Product Store - Full-Stack MERN Application

A complete full-stack web application that allows users to manage a list of products. It demonstrates CRUD (Create, Read, Update, Delete) functionality with a modern tech stack, featuring a responsive[...]

🎬 Demo

Live Demo: https://product-store-1-03hn.onrender.com/

Watch the demo on YouTube: https://youtu.be/7cdcZy1xmZU

✨ Key Features

• View All Products: A responsive grid displays all products fetched from the database.
• Create Products: A dedicated page with a form to add new products.
• Update Products: Edit product details through an in-place dialog modal.
• Delete Products: Remove products from the database.
• Responsive Design: The layout is fully responsive and works on various screen sizes.
• Light/Dark Mode: Toggle between light and dark themes, with styles adapting accordingly.
• Toast Notifications: User-friendly feedback for actions like creating, updating, or deleting products.

🛠️ Technology Stack

• Frontend:

  • Framework: React
  • Build Tool: Vite
  • UI Library: Chakra UI
  • Routing: React Router
  • State Management: Zustand

• Backend:

  • Runtime: Node.js
  • Framework: Express.js
  • Database: MongoDB (with Mongoose)

• Deployment:

  • The Node.js/Express server is configured to serve the static frontend build in a production environment.

📂 Project Structure

The project is organized as a monorepo with two main directories:

product-store/
├── backend/         # Node.js, Express, and MongoDB logic
│   ├── db/
│   ├── models/
│   ├── controllers/
│   ├── routes/
│   └── index.js     # Server entry point
├── frontend/        # React, Vite, and Chakra UI application
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── store/   # Zustand state management
│   │   └── App.jsx
│   └── vite.config.js
└── README.md

🚀 Getting Started

Prerequisites

• Node.js (v18 or newer)
• npm or your favorite package manager
• MongoDB installed and running, or a MongoDB Atlas connection string.

Backend Setup

1. Clone the repository:

   git clone https://github.com/your-username/product-store.git
   cd product-store

2. Navigate to the backend directory:

   cd backend

3. Install dependencies:

   npm install

4. Set up environment variables: Create a .env file in the backend directory and add your MongoDB connection string:

   MONGO_URI=your_mongodb_connection_string
   PORT=5000

5. Run the backend server:

   npm run dev

   The server will start on http://localhost:5000 by default.

Frontend Setup

1. Navigate to the frontend directory (from the root, in a new terminal):

   cd frontend

2. Install dependencies:

   npm install

3. Run the frontend app:

   npm run dev

   The application will be available at http://localhost:5173 (or another port if 5173 is in use).

Start Application

1. Build Command:

    npm run build

2. Start Command (for development)

    npm run start

3. Start Command (for production)

    npm run dev

📝 API Endpoints

The backend exposes the following RESTful API endpoints under the /api/products base path:

Method	Endpoint	Description
GET	/	Get all products.
POST	/create	Create a new product.
PUT	/:id	Update an existing product.
DELETE	/:id	Delete a product.

Request Body for POST /create and PUT /:id:

{
  "name": "string",
  "price": "number",
  "image": "string"
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

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

🙏 Acknowledgements

• React
• Chakra UI
• Express.js
• MongoDB
• Vite
• Zustand
• React Router
• Mongoose

Thank you for checking out this project! Happy coding! 🚀