• Hero Section — Full-width banner introducing the furniture store visually.
• About Section — Brief section describing the brand and its values.
• Products Section — Product grid with category filters and live search support.
• Blog Section — Informational posts or articles related to furniture and home.
• Newsletter Section — Email subscription form for marketing and updates.
• Footer — Site-wide links, contact info, and social media references.
• Header — Sticky navigation with search, wishlist, cart, and user account access.
• Cart Page — Shows selected items, quantities, and total price before checkout.
• Wishlist Page — Saves favorite products locally using localStorage.
• Admin Panel — Dashboard for managing products and viewing sales analytics.
• Auth Pages — Signup, login, and profile update pages with form validation.
• Purchase Pages — Dedicated success and cancel pages after Stripe checkout.

• JWT Authentication — Secure login using HTTP-only access and refresh token cookies.
• Token Auto-Refresh — Axios interceptor silently refreshes expired access tokens automatically.
• Role-Based Access — Admin and customer roles with protected routes and conditional redirects.
• Product Search — Live search filtering products by name or keywords in real time.
• Category Filters — Filter products by furniture, decoration, or accessory with smooth transitions.
• Cart Management — Add, remove, and update item quantities synced with the backend.
• Wishlist — Save and remove favorite products, persisted in localStorage across sessions.
• Stripe Checkout — Secure payment flow with order creation on successful payment verification.
• Admin Dashboard — Create, edit, delete, and feature-toggle products from a dedicated panel.
• Sales Analytics — Charts showing monthly revenue and top-selling products using Recharts.
• Profile Management — Update name, email, or password with current password verification.
• Account Deletion — Users can permanently delete their account after password confirmation.

• React 19 — Frontend UI library for building fast, component-based interfaces.
• Vite — Modern build tool for fast development and optimized production builds.
• Tailwind CSS v4 — Utility-first CSS framework for building responsive, custom designs.
• Zustand — Lightweight state management for auth, cart, products, and wishlist stores.
• React Router v7 — Client-side routing with protected and role-based route handling.
• Axios — HTTP client with interceptors for API requests and token refresh logic.
• Recharts — Chart library used in the admin panel for sales and analytics visualization.
• Lucide React — Clean, consistent icon set used throughout the user interface.
• Node.js & Express 5 — Backend runtime and framework for handling REST API requests.
• MongoDB & Mongoose — NoSQL database with schema validation for users, products, and orders.
• JWT — JSON Web Tokens used for secure, stateless user authentication.
• bcryptjs — Password hashing library used to securely store user credentials.
• Stripe — Payment gateway integration for handling secure checkout and order creation.
• React Hot Toast — Lightweight toast notification library for user feedback messages.

furniture-mern-app/
│
├── backend/
│   ├── controllers/
│   │   ├── analytics.controller.js    # Revenue stats, monthly sales, and top products
│   │   ├── auth.controller.js         # Signup, login, logout, profile, token refresh
│   │   ├── cart.controller.js         # Get, add, remove, and update cart items
│   │   ├── payment.controller.js      # Stripe checkout session and order creation
│   │   └── product.controller.js      # CRUD operations and featured product toggle
│   │
│   ├── lib/
│   │   ├── db.js                      # MongoDB connection setup
│   │   └── stripe.js                  # Stripe client initialization
│   │
│   ├── middleware/
│   │   └── auth.middleware.js         # JWT verification and admin role guard
│   │
│   ├── models/
│   │   ├── order.model.js             # Order schema with products, amount, and session ID
│   │   ├── product.model.js           # Product schema with image, price, category, and badge
│   │   └── user.model.js              # User schema with cart items, role, and refresh token
│   │
│   ├── routes/
│   │   ├── analytics.route.js         # Analytics API route
│   │   ├── auth.route.js              # Auth API routes (signup, login, logout, etc.)
│   │   ├── cart.route.js              # Cart API routes
│   │   ├── payment.route.js           # Payment API routes
│   │   └── product.route.js           # Product API routes
│   │
│   └── server.js                      # Express app setup, middleware, and route registration
│
├── frontend/
│   ├── public/                        # Static assets served directly
│   │
│   └── src/
│       ├── components/
│       │   ├── admin/
│       │   │   ├── ui/
│       │   │   │   ├── CustomConfirm.jsx     # Reusable confirmation dialog component
│       │   │   │   ├── CustomSelect.jsx      # Custom styled select dropdown component
│       │   │   │   ├── ImageUpload.jsx       # Product image upload input component
│       │   │   │   └── ProductFormUI.jsx     # Form layout for creating and editing products
│       │   │   ├── AnalyticsTab.jsx          # Revenue charts and top products display
│       │   │   ├── ProductForm.jsx           # Create and edit product form logic
│       │   │   └── ProductsList.jsx          # Admin product table with edit and delete actions
│       │   │
│       │   └── client/
│       │       ├── ui/
│       │       │   ├── About.jsx             # About section component
│       │       │   ├── Blog.jsx              # Blog section component
│       │       │   ├── DeleteAccount.jsx     # Account deletion form with password confirmation
│       │       │   ├── Footer.jsx            # Site footer component
│       │       │   ├── Hero.jsx              # Hero banner component
│       │       │   ├── Newsletter.jsx        # Email subscription form component
│       │       │   ├── OrderSummary.jsx      # Cart order summary with Stripe checkout button
│       │       │   └── ProductCard.jsx       # Product card with wishlist and add-to-cart actions
│       │       ├── AccountSettings.jsx       # Account popup with profile and logout options
│       │       ├── AuthForm.jsx              # Shared form component for login and signup
│       │       ├── Header.jsx                # Sticky header with search, cart, and user icons
│       │       └── Product.jsx               # Products section with filters and product grid
│       │
│       ├── hooks/
│       │   └── useScrollToSection.js        # Custom hook for smooth section scrolling
│       │
│       ├── lib/
│       │   └── axios.js                     # Axios instance with base URL configuration
│       │
│       ├── pages/
│       │   ├── AdminPanel.jsx               # Admin dashboard with tab-based navigation
│       │   ├── Cart.jsx                     # Cart page with item list and order summary
│       │   ├── Login.jsx                    # Login page
│       │   ├── MainPage.jsx                 # Main page layout composing all sections
│       │   ├── PurchaseCancel.jsx           # Payment cancelled confirmation page
│       │   ├── PurchaseSuccess.jsx          # Payment success confirmation page
│       │   ├── SignUp.jsx                   # Signup page
│       │   ├── UpdateProfile.jsx            # Profile update page for name, email, and password
│       │   └── Wishlist.jsx                 # Wishlist page showing saved products
│       │
│       ├── stores/
│       │   ├── useAuth.js                   # Auth state: user, login, logout, token refresh
│       │   ├── useCart.js                   # Cart state: items, quantities, and totals
│       │   ├── useProducts.js               # Product state: fetch, search, filter, and CRUD
│       │   └── useWishlist.js               # Wishlist state persisted in localStorage
│       │
│       ├── App.jsx                          # Route definitions and auth-based redirects
│       ├── globals.css                      # Global styles and Tailwind base configuration
│       └── main.jsx                         # React app entry point
│
├── .env                                     # Backend environment variables
├── .gitignore                               # Git ignored files
├── package.json                             # Root package config with backend scripts
└── package-lock.json                        # Dependency lock file

1. Clone the repository:

   git clone https://github.com/nawazdevx/furniture-mern-app.git

2. Set up environment variables:

   Create a .env file in the root directory (for the backend) and add the following variables:

   PORT=5000
   
   MONGO_URI=your_mongodb_connection_string
   
   ACCESS_TOKEN_SECRET=your_access_token_secret
   REFRESH_TOKEN_SECRET=your_refresh_token_secret
   
   STRIPE_SECRET_KEY=your_stripe_secret_key
   
   CLIENT_URL=http://localhost:5173
   
   NODE_ENV=development
   

   Create a .env file in the frontend directory and add the following variables:

   VITE_API_URL=your_backend_api_url

3. Install dependencies and start the backend:

   npm install
   npm run dev

4. Install dependencies and start the frontend:

   cd frontend
   npm install
   npm run dev

   Then visit http://localhost:5173

5. Start Customizing:
   • Update product categories and filters in Products.jsx
   • Edit hero content and branding in Hero.jsx
   • Modify global styles and color theme in globals.css
   • Update API base URL for production in axios.js
   • Adjust Stripe redirect URLs in payment.controller.js