Urban Style — Modern Full-Stack E-Commerce Platform
High-performance MERN e-commerce storefront with dynamic catalog filtering, centralized Redux state, role-based admin dashboard, and PayPal payment integration.
Demo Accounts & Test Credentials
2 Test RolesUse these pre-configured accounts to test live features across different user roles without registering.
••••••••••••
Technologies & Architecture Stack
Project Overview
UrbanStyle is an end-to-end, full-stack e-commerce web application engineered with the MERN stack (MongoDB, Express, React, Node.js) and Vite. It delivers a fast, responsive shopping experience for customers and a comprehensive administrative portal for store managers. Customers can browse dynamic fashion collections, apply multi-attribute filters, manage cart items in real time, check out securely via the PayPal REST API, and track their orders. On the management side, store admins have access to an isolated role-protected dashboard for inventory management, real-time product image processing via Cloudinary, banner curation, and order tracking.
The Engineering Problem
Modern e-commerce platforms must handle complex, interdependent state—such as persistent shopping carts, concurrent inventory counts, dynamic filtering, and multi-step checkout sequences—without degrading client performance. Additionally, ensuring secure role-based access control (RBAC), preventing token tampering, and handling asynchronous external payment gateway callbacks require robust client-server synchronicity.
The Solution
Architected a Single Page Application (SPA) leveraging React 18, Vite, and Redux Toolkit, backed by an Express REST API and MongoDB with Mongoose ODM. Integrated JWT authentication with HTTP-only cookies and Authorization headers to safeguard user sessions. Implemented server-side cart calculation to prevent price tampering, offloaded image uploads and asset CDN delivery to Cloudinary using Multer memory storage, and integrated the PayPal REST SDK for secure server-verified order capture.
System Architecture & Data Flow
React (Vite) Frontend with Redux Toolkit slices ➔ Axios HTTP Client with credentials ➔ Express.js REST API with Role-Based Auth Middleware ➔ MongoDB Atlas via Mongoose Models (Users, Products, Carts, Orders, Reviews, Addresses) ➔ Third-party integrations: Cloudinary CDN for media assets & PayPal REST SDK for checkout execution.
Core Engineering Features
Technical Challenges & Overcoming Them
Results & Impact
Engineered an e-commerce platform achieving sub-second catalog filter responses and seamless PayPal checkout transitions. Reduced initial bundle size and load times through Vite's ESBuild engine and Tailwind CSS utility purging, resulting in smooth 60fps UI interactions across desktop and mobile screens.
Key Takeaways
Mastered end-to-end MERN architecture, scalable Redux Toolkit slice patterns with async thunks, and normalized MongoDB schema design for e-commerce entities. Gained deep practical insight into web security standards (JWT management, HTTP-only cookies, password hashing with bcrypt, role-based authorization) and third-party API integration patterns with Cloudinary and PayPal.
Future Roadmap
- Add real-time order status updates and delivery tracking using WebSockets (Socket.io). - Implement customer product wishlist / favorites functionality with dedicated Redux state. - Integrate Elasticsearch or Meilisearch for fuzzy search, typo tolerance, and instant auto-suggestions. - Add social authentication via OAuth 2.0 (Google and GitHub logins). - Implement refresh token rotation for seamless long-lived session management. - Support multi-currency checkouts by integrating Stripe / Razorpay as secondary gateways. - Add automated email and SMS transactional notifications for order confirmations and shipping milestones via SendGrid or Twilio. - Write automated unit and integration tests using Jest, Supertest, and React Testing Library.