ShopVibe Ultimate

Welcome to the ultimate version of ShopVibe, a full-featured e-commerce platform built using the MERN stack and TypeScript. The platform now boasts new features, including Docker integration, Redis for caching, and advanced user functionalities, enhancing both performance and user engagement.

---

ShopVibeUpgrade.mp4

🌐 Website Link

Visit ShopVibe Upgraded Version

---

🚀 What's New?

• 🐳 Docker Integration: Simplified setup and deployment for developers.
• 🧰 Redis Caching: Replacing Node-Cache with Redis for improved performance and scalability.

---

🚀 Existing Features

User Features

• 🔒 Authentication: Secure login and registration using Firebase.
• 🔍 Product Search & Filter: Easily explore products using advanced search and filters.
• 🛒 Cart Management: Add, update, and remove items from the cart.
• 📄 Product Details Page: Enhanced product detail view with user reviews and ratings.
• 📦 Order Management: Track and view orders with detailed information.
• 💳 Secure Checkout: Integrated with Stripe for smooth and reliable payments.

Admin Features

• 📊 Admin Dashboard: Comprehensive analytics and stats with interactive charts.
• 🛠️ Product Management: Add, edit, and delete products with ease.
• 💰 Discount Management: Tools for creating promotional offers and discounts.
• 📋 Order Management: Manage customer orders efficiently.
• 📈 Data Visualization: Bar, pie, and line charts for insights into sales and performance.

---

🖥️ Tech Stack

Frontend

• ⚛️ React, Redux Toolkit, TypeScript
• 🎨 SCSS, Framer Motion, React Icons
• 📊 React ChartJS for data visualization
• 🔔 React Hot Toast for notifications

Backend

• 🗄️ Express.js, MongoDB, TypeScript
• 💳 Stripe for payment gateway integration
• 🖼️ Cloudinary for image management
• 🧰 Redis for caching
• 🛠️ Mongoose for MongoDB interactions

---

🚀 Setup & Installation

Backend Setup

1. Clone the repository and navigate to the backend directory.
2. Install dependencies:

   npm install  

3. Set up environment variables in .env:

   MONGO_URI=your_mongo_connection_string  
   STRIPE_KEY=your_stripe_api_key  
   CLOUDINARY_NAME=your_cloudinary_name  
   CLOUDINARY_API_KEY=your_cloudinary_api_key  
   CLOUDINARY_API_SECRET=your_cloudinary_api_secret  
   REDIS_HOST=your_redis_host  
   REDIS_PORT=your_redis_port  
   PORT=your_port  

4. Start the server with Docker:

   docker-compose up  

Frontend Setup

1. Navigate to the frontend directory.
2. Install dependencies:

   npm install  

3. Set up environment variables in .env:

   VITE_FIREBASE_API_KEY=your_firebase_api_key  
   VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain  
   VITE_FIREBASE_PROJECT_ID=your_firebase_project_id  
   VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket  
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id  
   VITE_FIREBASE_APP_ID=your_firebase_app_id  
   VITE_SERVER_URL=your_backend_url  
   VITE_STRIPE_KEY=your_stripe_key  

4. Start the development server:

   npm run dev  

---

📷 Screenshots

---

🤝 Contributions

Contributions are welcome! Fork the repository and submit a pull request for review.

---

📩 Contact

For queries or collaboration, feel free to reach out:

• 📧 Email: skprajapati3214@gmail.com
• 🔗 LinkedIn