Welcome to the Product Listing React App! This is a full-stack web application built using the MERN stack (MongoDB, Express.js, React, and Node.js). This application allows you to manage and display a list of products with CRUD (Create, Read, Update, Delete) functionality.
- Installation
- Usage
- API Routes
- Example Requests with Postman
- Folder Structure
- Technologies Used
- Contributing
- License
-
Clone the Repository:
git clone https://github.com/vipullsingh/product-listing-react.git
-
Navigate to Client and Backend Folders:
cd product-listing-react/client npm install cd ../backend npm install
-
Create a Dotenv file (.env) and Paste below code into it:
PORT = 5000 MONGODB_URL = <place_your_MongoDB_URL>
This will install the required dependencies for both the frontend and backend.
-
Start the Backend Server:
cd backend npm start
The backend server will run on https://localhost:5000.
-
Start the React App:
cd client npm start
The React app will run on https://localhost:3000.
-
Access the App:
Open your web browser and navigate to https://localhost:3000 to interact with the React app.
The following API routes are available:
- GET /api/products: Fetch all products.
- GET /api/products/:id: Fetch a single product by its ID.
- POST /api/products: Create a new product.
- PUT /api/products/:id: Update a product by its ID.
- DELETE /api/products/:id: Delete a product by its ID.
-
Fetch All Products:
- Method: GET
- URL: https://localhost:5000/api/products
-
Fetch a Single Product by ID:
- Method: GET
- URL: https://localhost:5000/api/products/:id (Replace
:id
with an actual product ID)
-
Create a New Product:
- Method: POST
- URL: https://localhost:5000/api/products
- Body: JSON data with
title
,description
,price
, andimageUrl
.
-
Update a Product by ID:
- Method: PUT
- URL: https://localhost:5000/api/products/:id (Replace
:id
with an actual product ID) - Body: JSON data with updated
title
,description
,price
, andimageUrl
.
-
Delete a Product by ID:
- Method: DELETE
- URL: https://localhost:5000/api/products/:id (Replace
:id
with an actual product ID)
The project is organized into two main folders:
- client: Contains the React frontend code.
- backend: Contains the Node.js and Express.js backend code.
- Frontend: React
- Backend: Node.js, Express.js
- Database: MongoDB
- HTTP Library: Axios
- Routing: React Router
- Styling: CSS
Contributions are welcome! If you find any issues or want to add new features, feel free to open a pull request.