🛍️ MernPro - Online Product Store Web App

Welcome to MernPro, a fully functional online marketplace built using the MERN Stack! This project showcases a robust implementation of CRUD operations to manage products and provides a seamless user experience. Whether you're a developer exploring the MERN stack or a user browsing for an online store, this application has something for everyone!

---

🚀 Features

• Complete CRUD Operations:
  • Add, edit, view, and delete products effortlessly.
• Dark/Light Mode Toggle:
  • Switch between light and dark themes to enhance user experience and accessibility.
• Modern UI/UX:
  • Designed with Chakra UI for a clean, responsive, and intuitive interface.
• Fast Development:
  • Leveraged Vite for a blazing-fast front-end development experience.
• Scalable Back-End:
  • Powered by Node.js and Express, with MongoDB as the database.
• API Integration:
  • Seamless integration between the front-end and back-end using RESTful APIs.

---

🛠️ Tech Stack

Front-End

• React (with Vite)
• Chakra UI for responsive and modern design
• Dark/Light Mode support using Chakra's theme integration

Back-End

• Node.js and Express.js for server-side logic
• MongoDB for database operations
• Mongoose for seamless interaction with MongoDB

---

📦 Installation

Prerequisites

• Node.js and npm/yarn installed
• MongoDB instance running

Steps to Run Locally

1. Clone the Repository:

   git clone https://github.com/chiraaax/MernPro-CRUD-App.git
   cd MernPro

2. Install Dependencies:

   • For the server:

     cd server
     npm install

   • For the client:

     cd ../client
     npm install

3. Set Up Environment Variables: Create a .env file in the server directory with the following:

   MONGO_URI=<your-mongodb-connection-string>
   PORT=5000

4. Run the Application:

   • Start the server:

     cd server
     npm start

   • Start the client:

     cd ../client
     npm run dev

5. Open in Browser: Visit http://localhost:5173 to access the app.

---

📸 Screenshots

🏠 Main Page with Light Mode

🌙 Homepage with Dark Mode

📋 Product Management

---

🌟 Future Enhancements

• 🛡️ Add authentication for secure access.
• 📊 Implement analytics dashboards.
• 🌍 Deploy the application to a cloud platform (e.g., Heroku, Vercel).

---

🤝 Contributing

Contributions are welcome! Feel free to fork this repository and create pull requests for new features or fixes.

---

📜 License

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

---

💬 Contact

Connect with me on LinkedIn or visit my GitHub Profile.

---

⭐ Acknowledgments

• Special thanks to the open-source community for tools and libraries used.
• Inspired by modern online marketplaces.