Mayart Candles - Full-Stack E-Commerce Platform
Mayart Candles is a full-stack e-commerce application built with React 18 and TypeScript on the frontend, connected to a robust Express.js and MongoDB backend. The platform enables customers to browse, search, and purchase handmade candles with extensive customization options including color selection, fragrance choice, and size preferences. The backend provides RESTful APIs for candle browsing, filtering by category/size/type, shopping cart management, order processing, and admin functionalities. Authentication is handled via JWT tokens, with Bcryptjs for password security. The project demonstrates enterprise-level patterns including server-side data loaders, async state management, and comprehensive form validation.
Project journey
Project Foundation & Setup
Initialized React application with Tailwind CSS and TypeScript configuration. Set up project structure with Create React App, installed essential dependencies including React Router v6, Tailwind CSS, and Material-UI for component framework.
Navigation & Layout Components
Developed responsive navigation bar and footer for mobile, tablet, and desktop breakpoints. Implemented animated mobile menu with side navigation, desktop menu variants, and action buttons for shopping cart and favorites.
Product Catalog & Data Modeling
Created comprehensive candle product data types and MongoDB schema. Implemented product browsing with Mongoose models supporting colors, fragrances, sizes, pictures, and pricing with sale price support.
Search, Filter & Sort Functionality
Added product search bar with autocomplete thumbnails, multi-parameter filtering by shape/color/size/fragrance/price range, and sort options. Implemented dynamic filter extraction from product catalog and responsive filter/sort UI components.
Shopping Cart & Favorites System
Developed shopping cart with quantity adjustment, item persistence using browser local storage, favorites/wishlist functionality, and shopping cart popover overlay. Implemented proper state management with quantity increment/decrement and item removal.
Admin Dashboard & Order Management
Built comprehensive admin dashboard with collapsible order tables using Material-UI Table components. Implemented order detail viewing with itemized candle breakdown, total price calculation, order deletion, and JWT-protected API endpoints.