Samir Magdy

Developer. Designer. Problem-Solver.

Projects

YallaShop (Front-end)

A frontend e-commerce implementation demonstrating modern React and Next.js capabilities. Built with TypeScript and Tailwind CSS. Deployed on Vercel.

Note: This project uses static JSON for product data, in a real-world application, this would typically involve server-side data fetching from a database.

Technical Highlights:

  • • Component-Driven UI Architecture: Nine React components with selective "use client" directives, compound component patterns and optimistic UI updates with visual state feedback (disabled → adding → added → in-cart).
  • • Product Filtering & Search: Supports multi-field search and multi-criteria sorting. Search queries and categories persist in the URL via search parameters for shareable results.
  • • Shopping Cart Management: Cart state is managed through React Context and persisted via localStorage. The "Add to Cart" button is context-aware, dynamically transitioning between "Add to Cart", "View in Cart", or a confirmation checkmark based on current state. The cart sidebar provides real-time quantity controls and subtotal calculations.
  • • Responsive Design: The interface adapts meaningfully between devices. Mobile prioritizes a modal-based filtering system, while desktop provides instant filtering for faster browsing, ensuring the app feels native to the user's device.
Next.jsReact.jsTypeScriptTailwindCSS

Space Reflex Game (Full-Stack)

A full-stack browser game built using Vanilla JS on both the front and back end (node.js). Deployed on Render.com along with a separate SQLite database hosted on Turso Cloud.

Note: Due to Render's free hosting limitations, the server may take around 50 seconds to initialize from an idle state.

Technical Highlights:

  • • HTTP Server: Node.js server built from scratch using the http module that handles manual route parsing, server-side validation, and request body handling. Implements three RESTful endpoints, managing GET/POST requests with proper status codes, headers, and error handling.
  • • Dynamic UI Management: Event-driven DOM manipulation controlling element visibility and keyframe animations based on game state, with real-time updates via fetch API to populate the leaderboard without page refresh.
  • • Database Operations: Executes conditional SQL queries that check existing records before INSERT/UPDATE operations. Only persists new high scores when players beat their previous times, preventing duplicate usernames via a dedicated name-check endpoint.
  • • Session Management: Implements username persistence and first-visit tracking using browser localStorage instead of traditional authentication. Conditionally displays instruction modal for new users while maintaining identity across browser sessions, with name-change functionality that replaces stored credentials.
Node.jsVanilla JSSQLiteCSS3HTML5

Skills

  • JS/TS

  • Next.js

  • React.js

  • Node.js

  • SQL/NoSQL

  • TailwindCSS

  • Linux/CLI

  • Git/Github

  • REST APIs

  • SEO

  • Laravel

  • PHP

Get In Touch

I'm currently seeking full-time roles and select freelance partnerships that align with my expertise. To discuss a potential role or project, please submit your inquiry via the form below.

2025 Samir Magdy