Urban Style e-commerce web-app

urbanstyle-e-commerce-webapp

https://urbanstyle.harismoin.com/

About this Project

UrbanStyle is a full-stack e-commerce web application that I designed and developed to demonstrate my capabilities in modern web development, backend engineering, cloud deployment, and end-to-end product delivery. The project combines a styled React front-end with a secure Node.js/Express backend and a scalable MongoDB database, fully deployed on AWS EC2 with a custom domain configuration. The platform allows users to browse products by category, view detailed product pages with real-time data, apply filtering and sorting, manage a shopping cart, and experience a smooth, responsive UI across all devices. I implemented reusable React components, client-side routing, and optimized API calls with caching and efficient data structures. On the backend, I created a modular Express API connected to MongoDB Atlas, featuring structured controllers, routes, and middleware for clean, maintainable code. The server handles product listing, individual product retrieval, error handling, and CORS-secured communication with the frontend. The entire application is hosted on an AWS EC2 instance with Nginx acting as a reverse proxy, PM2 for process management, environment-based configuration, and a custom subdomain integrated via DNS routing. The deployment workflow includes build automation, reverse-proxy routing, production-level security headers, and optimization of static asset delivery. This project showcases my ability to design complete web systems—from UI/UX and frontend logic to backend API architecture and cloud infrastructure—while ensuring performance, maintainability, and a seamless user experience.

Objective

To build a modern, responsive e-commerce web application that demonstrates full-stack development skills by integrating a dynamic frontend, a secure API backend, real product data, and a fully deployed cloud-hosted architecture. The goal was to deliver a smooth shopping experience, implement essential e-commerce features, and deploy the entire system on AWS with a custom domain to simulate a real production environment.

Design and Developments

  • Key Design & Development Highlights
      - Modern & Responsive UI with a clean shopping experience
      - Dynamic Product Management powered by a custom REST API
      - Category-based filtering, sorting, and search functionality
      - Optimized User Navigation across Home, Categories, and Product pages
      - Seamless Cart System with quantity control and real-time state updates
      - Secure Backend Integration using Node.js, Express, and MongoDB Atlas
      - Fully Deployed on AWS EC2 with Nginx Reverse Proxy & PM2
      - Custom Domain & Subdomain Routing for production-level deployment
      - Improved scalability, maintainability, and real-world application architecture

Initial Design for User Flow
urbanstyle_workflow

  • Wireframe-based Site Map

  • Logo Design

  • Tools & Platforms Used

AWS panel
Github (Version Control)
https://github.com/harisUOL/urban-style-e-commerce-web-app
Mongodb
Figma

  • Other tools :

WordPress Github

Summary

UrbanStyle is a fully developed end-to-end e-commerce application built to replicate the functionality, design, and deployment workflow of real online shopping platforms. The project integrates a modern React (Vite) frontend, a structured Node.js/Express backend, and a scalable MongoDB database to deliver a seamless and dynamic shopping experience. Users can browse categorized products, view detailed product pages, manage a responsive cart system, and interact with a clean, mobile-friendly interface. From the backend side, products are served through a robust REST API with secure handling, modular routing, and real database storage. The project also demonstrates real-world DevOps practices, including deployment on AWS EC2, Nginx reverse proxy configuration, PM2 for process management, and custom domain/subdomain routing with HTTPS support. This transforms the project from a simple demo into a true production-quality web application. UrbanStyle highlights full-stack competency across frontend development, backend engineering, cloud deployment, system optimization, and web application architecture — reflecting the ability to design, build, and deploy professional-level digital solutions.