Frontend and UI
Core tools used to build clean, responsive, and maintainable interfaces.
- React
- Next.js App Router
- TypeScript
- Tailwind CSS
- Responsive layouts
- Semantic HTML
Computer Engineering × Full-stack Web Development
Building reliable web experiences with an engineering mindset.
I’m Shaker Al-Masri, a Computer Engineering student and full-stack web developer focused on clean interfaces, practical systems, and maintainable code.
About me
A developer who cares about both the interface and the system behind it.
I enjoy turning ideas into clear, responsive web experiences that feel simple for users and organized for developers.
My Computer Engineering background helps me think beyond the screen: performance, data flow, reliability, and how software connects with real systems.
How I approach work
- Start with clear structure before adding visual complexity.
- Keep content, components, accessibility, and performance in mind from the beginning.
- Build in focused checkpoints so every change can be reviewed and improved.
Skills
A practical full-stack foundation for reliable web projects.
A focused overview of tools and practices I use across UI, backend, localization, testing, and project workflow.
Backend and data
Server-side foundations demonstrated through full-stack project work.
- Server-side validation
- Prisma ORM
- PostgreSQL
- Authentication flows
- Transactional logic
- Environment configuration
Localization and accessibility
Practices that make interfaces easier to use across languages, devices, and input methods.
- English / Arabic routes
- RTL layouts
- Keyboard-friendly navigation
- Visible focus states
- Readable content structure
Workflow and quality
Habits and tools that keep changes reviewable, tested, and safe to improve step by step.
- Git & GitHub
- Typed configuration
- Step-by-step delivery
- ESLint
- TypeScript type checking
- Vitest / Playwright
- AI-assisted development workflow
Focused by design
This list stays focused on skills I can demonstrate through real project work. The case studies explain how these tools were used in context.
Certifications & Workshops
Learning milestones that support my project work.
A focused list of completed courses and workshop certificates. The section is kept concise so certificates support the portfolio without replacing real project evidence.
CompletedCourse
Front End Web Developer Nanodegree
Udacity
June 2025
Certificate of Nanodegree program completion focused on frontend web development.
In progressCourse
The Complete Full-Stack Web Development Bootcamp
Udemy / Dr. Angela Yu
62+ hours
Currently working through a project-based full-stack web development course covering frontend foundations, React, Node.js, Express, PostgreSQL, authentication, APIs, deployment basics, and modern developer workflows.
Covered topics
- React
- Node.js
- Express
- PostgreSQL
- Authentication
- APIs
CompletedCourse
Arduino Training Course
IEEE An-Najah National University / RAS Community
September 202542 training hours
Completed a practical Arduino training course connected to electronics and embedded systems fundamentals.
CompletedWorkshop
RASCadia Bootcamp Workshop Certificates
IEEE RAS
September–October 20254 workshop certificates
A grouped workshop series from the same bootcamp to keep the portfolio concise while still showing the covered topics.
Covered topics
- Python
- Cyber Security
- Robotics
- Raspberry Pi
Projects
Selected work, presented with honest scope and clear outcomes.
A focused place for projects that can show the problem, stack, implementation choices, and what was learned.
CompletedFeatured
Clothing E-commerce Template
A full-stack bilingual ecommerce template for small clothing stores, focused on real catalog, cart, checkout, admin, variant stock, and deployment workflows.
Project highlights
- Variant-based size/color stock for clothing products.
- Server-side product search, category filters, and capped load-more pagination.
- Admin dashboard for products, categories, orders, variants, and inventory.
- Server-side validation for checkout, pricing, stock, and admin actions.
- Arabic/English UI with RTL/LTR support for local-market use.
- Next.js
- TypeScript
- React
- Prisma
- PostgreSQL
- Better Auth
- Zod
- Cloudinary
- Upstash Redis
- Nodemailer
- Vitest
- Playwright
- Render
Project actions
Hosted on Render free tier; the first load may take a moment after inactivity.
Demo data only; no real customer data is shown.
Private repository
Source code is kept private because this is a reusable client-ready template. Implementation details can be discussed or shared selectively when appropriate.
Contact
Let’s talk about practical web work and future opportunities.
A simple, direct contact area for professional conversations. For now, contact stays link-based instead of using a form, keeping the site simple, privacy-friendly, and easier to secure.
Good reasons to reach out
- Full-stack web development opportunities
- Portfolio, landing page, or small business website work
- Collaboration around practical software and Computer Engineering ideas