Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/27ahmad/mern_product_store
This MERN stack web app enables product management with full CRUD functionality. It features a React.js frontend styled with Chakra UI and a Node.js/Express.js backend connected to a MongoDB database for scalability and responsiveness.
https://github.com/27ahmad/mern_product_store
chakra-ui expressjs mongodb mongoose nodejs react-router-dom reactjs vite zustand
Last synced: 18 days ago
JSON representation
This MERN stack web app enables product management with full CRUD functionality. It features a React.js frontend styled with Chakra UI and a Node.js/Express.js backend connected to a MongoDB database for scalability and responsiveness.
- Host: GitHub
- URL: https://github.com/27ahmad/mern_product_store
- Owner: 27ahmad
- Created: 2025-01-07T17:34:42.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2025-01-08T04:03:05.000Z (18 days ago)
- Last Synced: 2025-01-08T04:30:31.246Z (18 days ago)
- Topics: chakra-ui, expressjs, mongodb, mongoose, nodejs, react-router-dom, reactjs, vite, zustand
- Language: JavaScript
- Homepage:
- Size: 79.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Product Store - MERN Stack Application
A full-stack web application for managing products with CRUD operations built using the MERN stack and Chakra UI.
## Screenshots
### Home Page
### Product List
## Features
- 📝 Create new products with name, price, and image URL
- 📋 View all products in a responsive grid layout
- ✏️ Update existing product details
- 🗑️ Delete products
- 🎨 Modern UI with Chakra UI components
## Tech Stack
### Frontend
- React.js
- Chakra UI
- React Router DOM
- Zustand (State Management)
- React Icons
- Vite
### Backend
- Node.js
- Express.js
- MongoDB
- Mongoose
## Getting Started
### Prerequisites
- Node.js (v14 or higher)
- MongoDB Atlas Account
- npm or yarn
### Installation
1. Clone the repository
```bash
git clone
cd Fullstack_Product_Store
```
2. Install dependencies for backend
```bash
npm i
```
3. Install dependencies for frontend
```bash
cd frontend
npm i
```
4. Create a .env file in the root directory with your MongoDB Atlas connection string
```
MONGO_URI=your_mongodb_connection_string
PORT=5000
```
5. Start the backend server
```bash
npm run dev
```
6. Start the frontend server
```bash
cd frontend
npm run dev
```
## API Endpoints
### Products
- GET /api/products - Get all products
- POST /api/products - Create a new product
- PUT /api/products/:id - Update a product
- DELETE /api/products/:id - Delete a product