Prime Gadgets is a full-featured e-commerce web application built using the MERN stack (MongoDB, Express.js, React, Node.js). It offers a seamless shopping experience for tech enthusiasts, allowing users to browse gadget categories, manage a shopping cart, and place orders with multiple payment options. It also includes a dedicated admin dashboard for sellers to manage inventory and view orders.
- User Authentication: Secure signup/login using JWT and cookie-based sessions.
- Product Browsing: Filter products by category (Smartphones, Laptops, etc.) or search for specific items.
- Shopping Cart: Add/remove items and update quantities; data is synced with the database for logged-in users.
- Address Management: Save multiple shipping addresses to your profile.
- Payment Integration: Supports both Cash on Delivery (COD) and Online Payments via Stripe.
- Order Tracking: Users can view their order history and current status.
- Admin Authentication: Protected routes for authorized sellers using a dedicated login.
- Product Management: Add new products with multiple images (uploaded via Cloudinary) and toggle stock availability.
- Order Overview: Monitor all incoming orders, including customer details and payment status.
- Frontend: React.js, Tailwind CSS, React Router DOM, Axios.
- Backend: Node.js, Express.js.
- Database: MongoDB with Mongoose ODM.
- Media Storage: Cloudinary (for product image hosting).
- Payment Gateway: Stripe.
- Authentication: JSON Web Tokens (JWT) & Bcrypt.
prime-gadgets/
├── client/ # React Frontend (Vite)
│ ├── src/assets/ # Static assets and category data
│ ├── src/components/ # Reusable UI components (NavBar, Footer, etc.)
│ ├── src/context/ # AppProvider for global state management
│ └── src/pages/ # Page components (Home, Cart, Seller dashboard)
└── server/ # Node.js Backend
├── config/ # DB, Multer, and Cloudinary configurations
├── controllers/ # Logic for products, users, orders, and cart
├── middleware/ # Auth guards (User & Seller)
├── models/ # Mongoose schemas (Product, User, Order, Address)
└── routes/ # API endpoints
- Node.js installed
- MongoDB URI (local or Atlas)
- Cloudinary Account (for image uploads)
- Stripe Account (for online payments)
Navigate to the server directory and install dependencies:
cd server
npm install
Create a .env file in the server folder and fill in your credentials:
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
PORT=3000
CLOUDINARY_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_SECRET=your_api_secret
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
SELLER_EMAIL=admin@primegadgets.com
SELLER_PASSWORD=your_admin_password
NODE_ENV=development
Start the server:
npm run dev
Navigate to the client directory and install dependencies:
cd ../client
npm install
Create a .env file in the client folder:
VITE_BACKEND_URL=http://localhost:3000
Start the development server:
npm run dev
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Click the "Fork" button at the top right of the repository page to create a copy of the project in your own account.
- Clone your Fork
git clone https://github.com/your-username/prime-gadgets.git
cd prime-gadgets
- Create a Feature Branch
git checkout -b feature/AmazingFeature
- Commit your Changes
- Make sure your code follows the project's style and all tests pass.
git commit -m 'Add some AmazingFeature'
- Push to the Branch
git push origin feature/AmazingFeature
- Open a Pull Request
- Go to the original repository on GitHub and click "New Pull Request".
- Provide a clear description of your changes and why they are beneficial.
If you find a bug or have a suggestion for a new feature, please open an Issue. Be sure to include:
- A clear title and description.
- Steps to reproduce the bug (if applicable).
- Screenshots or code snippets to help explain your point.
This project is licensed under the MIT License.