Mohamed Shalaby

# About me

I started from curiosity — taking things apart, figuring out how they work. My first steps into code were with Python a couple of years ago, but I found where I really wanted to build: the front end.

Today my focus is JavaScript and React — building responsive, interactive interfaces and working with APIs. I'm currently deepening my React skills through hands-on projects and a front-end bootcamp, on my way to becoming a strong front-end developer.

I believe consistency beats intensity. Small steps, repeated daily, compound into things you couldn't have built in a single sprint.

# Projects

Every project below is live. Open the demo, then read the code.

Next.js · TypeScript

FreshCart

E-commerce app with sign-up and login, a product catalog with categories, cart, wishlist, order history and product reviews. My graduation project for the Route Academy front-end program.

Redux Toolkit / RTK Query
NextAuth
Tailwind CSS
shadcn/ui
Zod

Live demo Code

React 19 · Vite

Social App

Social network with protected routes, posts with privacy levels, comments and replies, likes, bookmarks, follow and profile pages.

React Router
React Hook Form + Zod
HeroUI
Tailwind CSS
Axios

Live demo Code Free sign-up required

Vanilla JavaScript · 6 APIs

Wanderlust

Travel-planning dashboard that combines country facts, weather, public holidays, events, exchange rates and sunrise times, with plans saved in the browser.

Fetch API
async/await
localStorage
CSS Grid

Live demo Code

JavaScript · Bootstrap 5

What's For Dinner

Recipe inspiration app with tabbed ingredients, instructions, nutrition and chef tips, difficulty badges and link previews for sharing.

DOM rendering
Bootstrap 5
CSS clamp()
Open Graph

Live demo Code

JavaScript · PDF.js · Arabic RTL

PDF Page Planner

A real tool for a PDF compression service: preview pages in the browser, mark each one as important, less important or delete, and send the order on WhatsApp. Pages render in the browser with no server upload.

PDF.js
Web Crypto API
IntersectionObserver
RTL

Live demo Code

JavaScript · Bootstrap 5

ContactHub

Contact manager with add, edit and delete, regex validation, duplicate-number detection, favorites and emergency lists, and live search.

CRUD
Regex validation
localStorage

Live demo Code

More projects

Game Arena — responsive eSports landing page with a custom dark design. HTML, CSS, Bootstrap 5.

Live Code

Kanban Board — drag-and-drop task board with editing and localStorage. Vanilla JavaScript.

Live Code

Country Info App — search any country for its capital, population, region and flag with the REST Countries API.

Live Code

Vanilla JS mini-projects — 5 builds so far: form validator, movie seat booking, custom video player, exchange rates and array methods.

Live Code

Chef ClaudeIn progress — React app that will turn the ingredients you have into a recipe using the Claude API.

Code

# About me

# Tech I work with

# Projects

FreshCart

Social App

Wanderlust

What's For Dinner

PDF Page Planner

ContactHub

More projects

# Let's connect