Skip to content

This is a fullstack e-commerce application built with React (frontend) and Node.js + Express (backend). It features product listings, cart management, coupon discounts, and Flutterwave payment integration. The project is organized as a monorepo with separate folders for the frontend and backend.

License

Notifications You must be signed in to change notification settings

macobia/chief-store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

71 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Vercel License: MIT Node.js React

πŸ’Ό Chief-store

A modern full-stack e-commerce application built with React.js (frontend) and Node.js + Express.js (backend). Chief-store delivers a seamless shopping experience featuring dynamic product listings, powerful search & & filtering, secure Flutterwave payment, real-time admin notifications, and a robust admin dashboard for full control.

πŸš€ Live Demo

https://chief-store.vercel.app/


πŸ–ΌοΈ Preview

🏠 Home Page

πŸ‘’ Products Page

πŸ› οΈ Admin Dashboard

Home

Shop

Admin

πŸͺ° Features

  • πŸ” Secure JWT Authentication (Access & Refresh Tokens)
  • πŸ“¦ Product Management (Create, Edit, Delete)
  • πŸ‘ž Product Filtering & Sorting
  • πŸ‘š Shopping Cart & Checkout Flow
  • 🎟️ Coupon Discount Integration
  • πŸ’³ Flutterwave Payment Integration
  • πŸ“€ Cloudinary for Image Uploads
  • πŸ“¬ Nodemailer for Email Notifications
  • πŸ“Š Admin Dashboard with Analytics & Product Control
  • πŸ”” Real-time Admin Notifications (with Redis Pub/Sub)

πŸ—‚οΈ Project Structure

chief-store/
β”‚
β”œβ”€β”€ client/        # React frontend
β”œβ”€β”€ server/        # Express backend
β”œβ”€β”€ README.md
└── .env           # Environment variables

βš™οΈ Tech Stack

Frontend

  • React.js (Vite)
  • Zustand (state management)
  • Axios
  • Tailwind CSS

Backend

  • Node.js
  • Express.js
  • MongoDB (with Mongoose)
  • Redis (Uptash)
  • Cloudinary
  • Nodemailer
  • Flutterwave

πŸ”§ Installation

1. Clone the repository

git clone https://github.com/macobia/chief-store.git
cd chief-store

2. Setup Environment Variables

πŸ“ .env in server/

PORT=5000
MONGO_URL=your_mongo_connection_string

JWT_SECRET_ACCESS_TOKEN=your_access_token_secret
JWT_SECRET_REFRESH_TOKEN=your_refresh_token_secret

UPTASH_REDIS_URL=redis://username:password@host:port

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

FLW_PUBLIC_KEY=your_flutterwave_public_key
FLW_SECRET_KEY=your_flutterwave_secret_key
FLW_ENCRYPTION_KEY=your_flutterwave_encryption_key

CLIENT_URL=http://localhost:5173

GOOGLE_CLIENT_ID=your_GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET=your_GOOGLE_CLIENT_SECRET
GOOGLE_CALLBACK_URL=your_GOOGLE_CALLBACK_URL

RECAPTCHA_SECRET_KEY=your_RECAPTCHA_SECRET_KEY

SESSION_SECRET=your_SESSION_SECRET

MAIL_USER=your_email@example.com
MAIL_PASS=your_email_password

NODE_ENV=development

πŸ“ .env in client/

VITE_API_URL=http://localhost:5000/api
VITE_RECAPTCHA_SITE_KEY=your_RECAPTCHA_SITE_KEY

3. Install Dependencies

πŸ–₯️ Backend

cd backend
npm install

🌐 Frontend

cd ../frontend
npm install

4. Run the App

πŸ”™ Start Backend

npm run dev

πŸ–ΌοΈ Start Frontend

cd ../frontend
npm run dev

βœ… Scripts

Frontend

npm run dev        # Start development server
npm run build      # Build for production
npm run preview    # Preview production build

Backend

npm run dev        # Start dev server using nodemon

✨ Upcoming Features

  • πŸ“¦ Inventory Stock Management
  • 🧲 Order History Page for Users
  • πŸ“Š Detailed Analytics Dashboard for Admins
  • πŸ› οΈ Role-Based Access Control

🀝 Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.


πŸ“„ License

This project is licensed under the MIT License. See the LICENSE file for details.


πŸ”— Connect

Built with ❀️ by Macben Obiakor

About

This is a fullstack e-commerce application built with React (frontend) and Node.js + Express (backend). It features product listings, cart management, coupon discounts, and Flutterwave payment integration. The project is organized as a monorepo with separate folders for the frontend and backend.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published