A full-stack mock e-commerce product API application featuring a frontend built with React + Vite and a backend powered by json-server. This project enables GET and POST requests, allowing seamless frontend-backend integration for prototyping, learning, and testing.
- 🚀 Frontend: GitHub Pages
- ⚙️ Backend API: Render.com
🔗 You can use the API endpoint directly in your frontend or tools like Postman to test the routes.
json-server-products/
├── db.json # Mock database file for json-server
├── server.js # Entry point for custom json-server setup
├── package.json # Dependencies and scripts
├── frontend/
│ ├── index.html # HTML entry
│ ├── src/
│ │ ├── App.jsx # Main React component
│ │ ├── components/ # Reusable components
│ │ └── assets/ # Images and styling
│ └── vite.config.js # Vite configuration
- ✅ RESTful fake API with
json-server - ✅ Full CRUD functionality (
GET,POST) - ✅ Responsive UI built with React and Vite
- ✅ Axios for seamless API requests
- ✅ Backend hosted on Render
- ✅ Frontend deployed on GitHub Pages
- ✅ Clean code and modular structure
- ✅ Ideal for rapid prototyping and frontend/backend practice
| Method | Endpoint | Description |
|---|---|---|
| GET | /products |
Fetch all products |
| GET | /products/:id |
Fetch single product |
| POST | /products |
Add a new product |
| PUT | /products/:id |
Update a product |
| DELETE | /products/:id |
Delete a product |
Frontend:
- React
- Vite
- GitHub Pages (for deployment)
- Axios
- TailwindCSS (for styling)
Backend:
- JSON Server
- Node.js
- Render.com (for deployment)
git clone https://github.com/Geekykiran/gadgets-products-cart.git
cd gadgets-products-cartnpm installnpm startThe backend will run on http://localhost:8080.
Or use the hosted backend: https://json-server-products-tuej.onrender.com/products
cd frontend
npm install
npm run devThe frontend will run on http://localhost:5173.
Saikiran N G
LinkedIn
This project is licensed under the MIT License.
Feel free to open issues or submit pull requests if you find bugs or have suggestions!