ultra-ecommerce
Muhammad AbubakarAct as a senior full-stack developer, UI/UX designer, and eCommerce expert. Build a complete, production-ready full-stack eCommerce website similar to SHEIN and WideTrade where I can sell all types of products (fashion, electronics, accessories, etc.). The website must include: ### 🧠 Tech Stack * Frontend: React.js (with Tailwind CSS for modern UI) * Backend: Node.js with Express.js * Database: MongoDB * Authentication: JWT-based login system * Payment Integration: Stripe + Cash on Delivery option --- ### 🎨 UI/UX Design * Modern, clean, responsive design (mobile-first) * Attractive homepage with banners, categories, trending products * Smooth animations and loading effects * Dark/light mode toggle * Professional product cards (like SHEIN) --- ### 🛍️ Core Features #### 👤 User Features * User registration & login * Social login (Google optional) * Profile management * Wishlist system ❤️ * Shopping cart 🛒 * Checkout system * Order history & tracking --- #### 🛒 Product Features * Product listing with categories * Advanced filters (price, rating, brand, etc.) * Search with suggestions * Product details page (images, reviews, ratings) * Related products --- #### 💳 Payment System * Stripe payment integration * Cash on Delivery option * Secure checkout flow --- #### ⭐ Reviews & Ratings * Users can rate and review products * Display average rating --- #### 📦 Order Management * Order placement * Order tracking system * Order status (pending, shipped, delivered) --- #### 🧑💼 Admin Panel (VERY IMPORTANT) * Admin dashboard * Add/Edit/Delete products * Manage users * Manage orders * View analytics (sales, users, revenue) --- #### 🔔 Notifications * Email notifications (order confirmation) * Optional: real-time notifications --- ### 🔐 Security Features * Password hashing * JWT authentication * Role-based access (admin/user) * Input validation & protection --- ### ⚡ Advanced Features (Make it Premium) * AI-based product recommendations * Discount & coupon system * Flash sales & deals section * Multi-language support * Multi-currency support * SEO optimization --- ### 📁 Code Requirements * Clean, modular, scalable code structure * Proper folder structure (MVC architecture) * Comments for understanding * API documentation --- ### 🚀 Deployment * Guide to deploy frontend & backend * Use platforms like Vercel (frontend) & Render/Node server (backend) --- Also: 1. Explain each part step-by-step 2. Provide complete code 3. Give folder structure 4. Include sample data 5. Make it beginner-friendly but professional Goal: Build a real-world, scalable eCommerce platform that I can actually use to start a business.
Comments (0)
Sign in to leave a comment
Project Tasks26
Implement Theme From Mock Designs
As a frontend developer, I want to implement the theme and structure from all mock-design pages so that every page looks identical to the approved designs. This includes applying the ChartGo color palette (#F4F4F8, #FFFFFF, #333333, #FF7A59, #B0BEC5), typography (Inter font), spacing, border radius, animation classes (cg-reveal, cg-stagger), and layout scaffolding. Remove any pages not in the design set. This task is independent and must be completed first.
Build Multi-language Currency APIs
As a backend developer, I want to implement multi-language (English/Urdu) and multi-currency (PKR as default) APIs so that users can toggle their preferred language and view prices in their local currency. Includes i18n string management and currency conversion endpoints.
Build Product Backend APIs
As a backend developer, I want to implement product CRUD, category listing, search with suggestions, and advanced filter (price, rating, brand) APIs so that products can be managed by admins and browsed efficiently by users. Includes pagination, sorting, and related products endpoint.
Build Auth Backend APIs
As a backend developer, I want to implement register, login (email + optional Google OAuth), and profile management APIs so that users can securely authenticate and update their account details. Includes JWT token issuance, password hashing (bcrypt), role-based access (admin/user), and input validation.
Align Colors And Theme
As a UI/UX designer, I want all pages to use the defined ChartGo color palette (#F4F4F8 background, #FFFFFF surface, #333333 text, #FF7A59 accent, #B0BEC5 muted) so that the UI is visually consistent across the entire application. This includes Tailwind config setup, CSS custom properties, dark/light mode toggle, and global animation keyframes (cg-reveal-up, cg-stagger, cg-float-gentle, cg-glow-pulse).
Build Cart And Wishlist APIs
As a backend developer, I want to implement cart and wishlist APIs so that authenticated users can add, update quantities, and remove items from their cart, and save/remove products from their wishlist. Includes sync logic for guest-to-user cart migration.
Build Reviews And Ratings APIs
As a backend developer, I want to implement product reviews and ratings APIs so that authenticated users can submit star ratings and written reviews, and all visitors can view average ratings and review lists on product detail pages.
Implement Home Page UI
As a frontend developer, I want to implement the Home page (v2) from the existing JSX design so that authenticated users can browse categories, view flash sales, and see personalized recommendations. Includes animated category banners, product grid, and flash sales section.
Implement Login Page UI
As a frontend developer, I want to implement the Login page (v2) from the existing JSX design so that users can authenticate through a polished, branded interface. Includes form validation, JWT token storage, error handling, and redirect to Home on success.
Implement Signup Page UI
As a frontend developer, I want to implement the Signup page (v2) from the existing JSX design so that new users can register with a consistent, branded form. Includes field validation, password strength indicator, and redirect to Home on successful registration.
Build Order And Checkout APIs
As a backend developer, I want to implement order placement and checkout APIs including Stripe payment integration and Cash on Delivery option so that users can complete purchases securely. Includes order status management (pending, shipped, delivered), order history endpoint, and order tracking.
Implement Landing Page UI
As a frontend developer, I want to implement the Landing page (v3) from the existing JSX design so that visitors see a compelling and accurate entry point to ChartGo. Includes hero section, animated banners, category highlights, and CTAs linking to Home and Login/Signup pages.
Implement Product Detail Page UI
As a frontend developer, I want to implement the Product Detail page (v1) from the existing JSX design so that users can view product images, descriptions, reviews, ratings, and related products. Includes Add to Cart, Add to Wishlist, and review submission functionality.
Implement Products Page UI
As a frontend developer, I want to implement the Products page (v1) from the existing JSX design so that users can filter by price, rating, and brand, search with suggestions, and browse the full product catalog in a responsive grid layout.
Implement Wishlist Page UI
As a frontend developer, I want to implement the Wishlist page (v1) from the existing JSX design so that users can view saved products, move items to cart, and remove items from their wishlist.
Build Coupon And Discount APIs
As a backend developer, I want to implement coupon and discount APIs so that admins can create promotional codes and users can apply them during checkout for percentage or fixed-amount discounts. Includes validation logic and expiry support.
Implement SEO Optimization
As a frontend developer, I want to implement SEO best practices across all public-facing pages so that ChartGo ranks well in search engines. Includes meta tags, Open Graph, structured data (JSON-LD), alt tags on images, sitemap, and page-level performance optimization.
Implement Email Notification System
As a backend developer, I want to implement an email notification system so that users automatically receive order confirmation emails upon purchase and status update emails when their order progresses (shipped, delivered).
Implement Orders Page UI
As a frontend developer, I want to implement the Orders page (v1) from the existing JSX design so that users can view their full order history, check order status (pending/shipped/delivered), and track current orders.
Build AI Recommendations API
As an AI engineer, I want to implement an AI-powered product recommendations API using TensorFlow.js so that users receive personalized product suggestions based on their browsing and purchase history. Includes 'Recommended for You' and 'Frequently Bought Together' endpoints.
Build Admin Management APIs
As a backend developer, I want to implement admin APIs for user account management, order status updates, and analytics (sales, revenue, user counts) so that admins can efficiently operate and monitor the platform.
Implement Flash Sales Feature
As a frontend developer, I want to implement the flash sales feature with countdown timers and deal cards so that users see time-limited discounts prominently on the Home page, and admins can schedule flash sales via the admin panel. Connects to the Coupon/Discount API backend.
Implement Admin Users Page UI
As a frontend developer, I want to implement the Users admin page (v1) from the existing JSX design so that admins can view, search, and manage all user accounts including role assignment and account suspension.
Implement Checkout Page UI
As a frontend developer, I want to implement the Checkout page (v1) from the existing JSX design so that users can enter shipping details, select Stripe or Cash on Delivery payment, apply coupon codes, and confirm their order. Includes order summary and secure payment flow.
Implement Admin Dashboard Page UI
As a frontend developer, I want to implement the Dashboard admin page (v1) from the existing JSX design so that admins can view platform analytics including sales charts, revenue metrics, user statistics, and order summaries at a glance.
Implement Cart Page UI
As a frontend developer, I want to implement the Cart page (v2) from the existing JSX design so that users can review selected items, update quantities, apply coupon codes, and proceed to checkout. Includes real-time subtotal calculation and empty cart state.
No page designs yet.
The Design Agent will generate JSX pages automatically after user flows are created.
No comments yet. Be the first!