🛒 Ratna Supermarket

Welcome to Ratna Supermarket – an online shopping platform that delivers a complete and seamless e-commerce experience. From product browsing to order management, this project simulates a fully functional online store with an intuitive interface.

---

---

✨ Project Overview

Ratna Supermarket is designed to provide users with a real-world shopping experience. It includes essential features such as product listings, cart management, user authentication, and order processing. Developed as part of a college project, it showcases a fully-fledged e-commerce platform using modern web development tools.

Our Objective is to create a user-friendly and responsive online shopping platform that allows customers to explore, add products to their cart, and place orders effortlessly.

🌐 Live Demo: Ratna Supermarket

🔥 Features

• 🛒 Product Management: Users can browse, search, and filter products by categories.
• 🛍️ Cart System: Add or remove products, adjust quantities, and view the total price in the cart.
• 🔑 User Authentication: Secure login, sign-up, and logout functionalities.
• 💸 Order Management: Place and manage orders, track purchase history.
• 👤 Admin Dashboard: Admin can manage products, users, and orders (admin-specific features).
• 📱 Responsive Design: Optimized for mobile, tablet, and desktop devices.

---

🛠️ Tech Stack

• Frontend: React.js, Tailwind CSS
• Backend: Node.js, Express.js
• Database: MongoDB
• Hosting: Firebase

---

🚀 Getting Started

Follow these steps to set up and run the Ratna Supermarket project on your local machine:

Prerequisites

Ensure that the following software is installed on your system:

• Node.js (v14.x or higher)
• npm (Node package manager)
• React.js (React JS)

📦 Installation

To set up the Ratna Supermarket project on your local machine, follow these detailed instructions for both the frontend and backend.

Run With Docker

Don't want to setup with all of the below steps? Use Docker Compose (Note: Docker should be installed)

1. Set ENV File Use this starter env file for setting up Docker, Client and Server. It should be at root level(In another words at same level where docker-compose.yml is)

   MONGO_URI=mongodb://mongodb
   PORT=3000
   JWT_SECRET=secret
   MONGODBPORT=27017
   MONGOEXPPORT=8081
   SERVERPORT=3000
   CLIENTPORT=5173

2. Run Docker Compose

   docker compose up --watch

   Note: --watch paramter helps docker to track changes in files if you don't use it you will not be able to see changes and would have to restart everytime/

3. Stop Docker

   docker compose down

   This commands stops docker containers and network and frees all the ports Docker was using.

   For more info on Docker look through this Youtube Video: https://www.youtube.com/watch?v=3c-iBn73dDE

🔧 Frontend Setup

1. Fork the Repository:
   Go to the Ratna Supermarket GitHub repository and click the "Fork" button in the top-right corner to create your own copy.

2. Clone the Repository:
   Clone your forked repository to your local machine:

   git clone https://github.com/yourusername/Ratna-Supermarket.git

3. Navigate to the Project Directory:
   Change your directory to the cloned project folder:

   cd Ratna-Supermarket
   cd client

4. Install Frontend Dependencies:
   Run the following command to install all necessary frontend dependencies:

   npm install

5. Start the Frontend Development Server:
   Launch the frontend in development mode by running:

   npm run dev

6. Open the App:
   Open your browser and visit http://localhost:5173 to see the app in action.

🛠️ Backend Setup

1. Navigate to the Backend Directory:
   Change your directory to the backend folder:

   cd ../server

2. Install Backend Dependencies:
   Install the necessary backend dependencies:

   npm install

3. Set Up Environment Variables:
   Create or edit the .env file in the backend directory with the following variables:

   MONGO_URI=<your-mongodb-connection-string>
   DB_NAME=<your-database-name>

4. Start the Backend Server:
   Launch the backend server:

   node server.js

🐍 Running py_server Files

Ensure you have the following installed:

• Python (version 3.x)
• Flask (for creating the web server)
• Flask-CORS (for enabling CORS)
• PyMongo (for MongoDB integration)

Start the Backend Server:
Launch the backend server:

python backend.py

Folder Structure 📂

Ratna-Supermarket/
├── client/ # React frontend application
│   ├── src/ # React components and files
│   ├── public/ # Public static files
│   ├── package.json # Frontend dependencies
│   └── vite.config.js # Vite configuration file
├── server/ # Backend Node.js application
│   ├── server.js # Main server file
│   ├── .env # Environment configuration (not included in repo)
│   ├── package.json # Backend dependencies
│   └── ... # Other backend files
├── README.md # This file
└── ...

📜 Contributing

We welcome contributions from the community! To contribute, please check out our CONTRIBUTING.md and CODE_OF_CONDUCT.md to understand the guidelines.

Quick Guide:

1. Fork and clone the repository.
2. Create a new branch for your feature/bug fix.
3. Make your changes and test them.
4. Submit a pull request for review.

For more details, refer to the CONTRIBUTING.md file.

---

🤝 Open Source Programs

This project is part of GirlScript Summer of Code 2024 (GSSoC) Extended, an initiative to help aspiring developers get involved in the open-source community.

This project is also part of Hacktoberfest 2024. We encourage participants to contribute and improve the project during this event. Let’s make open source accessible and fun for everyone!

---

Project Admin ⚡

Minav

Contributors

We extend our heartfelt gratitude for your invaluable contribution to our project! Your efforts play a pivotal role in elevating Ratna-Supermarket to greater heights.