Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/preetiraj3697/reactjs-integration-with-backend
This project showcases the integration of React frontend with Express backend for managing user data. Features include CRUD operations via RESTful APIs, React Router navigation, MongoDB integration, and separate READMEs for frontend and backend setup.
https://github.com/preetiraj3697/reactjs-integration-with-backend
axios backend cors crud expressjs frontend full-stack mongodb mongodb-atlas mongoose nodejs react react-router restful-api
Last synced: about 1 month ago
JSON representation
This project showcases the integration of React frontend with Express backend for managing user data. Features include CRUD operations via RESTful APIs, React Router navigation, MongoDB integration, and separate READMEs for frontend and backend setup.
- Host: GitHub
- URL: https://github.com/preetiraj3697/reactjs-integration-with-backend
- Owner: Preetiraj3697
- Created: 2024-03-07T19:37:35.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-03-15T19:08:52.000Z (9 months ago)
- Last Synced: 2024-10-11T12:11:57.679Z (2 months ago)
- Topics: axios, backend, cors, crud, expressjs, frontend, full-stack, mongodb, mongodb-atlas, mongoose, nodejs, react, react-router, restful-api
- Language: JavaScript
- Homepage: https://react-js-integration-with-frontend-backend.vercel.app
- Size: 67.4 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Frontend README**
---
# React-Express User Data Manager
## Frontend - ReactJS Integration with Backend APIs
This project demonstrates the integration of a ReactJS frontend with backend APIs for managing user data.
### Deploy Link:
```bash
https://react-js-integration-with-frontend-backend.vercel.app
```
### Features
- Displaying user data fetched from the backend API.
- Adding new entries to the user data through the frontend interface.
- Updating existing user data using the provided form.
- Displaying counts of add and update operations.
### Technologies Used
- ReactJS
- Axios for HTTP requests
- React Router for navigation
### Setup Instructions
1. Clone the repository to your local machine:
```bash
git clone https://github.com/Preetiraj3697/ReactJS-Integration-with-Backend.git
```
2. Navigate to the frontend directory:
```bash
cd client
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
5. Open your browser and visit [http://localhost:3000](http://localhost:3000) to view the application.
### Usage
- Navigate between different pages using the navigation links.
- Use the "AddEntry" page to add new entries to the user data.
- Use the "Home" page to view the existing user data and update entries if needed.
### Responsive Design
The application is designed to be responsive on various devices:
- Mobile
- Tablet
- Desktop
**Backend README**
---
# React-Express User Data Manager
## Backend - ExpressJS API for User Data Management
This project provides an ExpressJS backend API for managing user data.
### Deploy Link:
```bash
https://react-js-integration-with-backend-yaf6.vercel.app/api/entries
```
### Features
- API endpoints for adding new entries and updating existing entries in the user data.
- API endpoint for fetching the count of add and update operations.
- MongoDB database integration for storing user data.
### Technologies Used
- ExpressJS
- MongoDB
- Mongoose for MongoDB integration
- cors
- nodemon
### Setup Instructions
1. Clone the repository to your local machine:
```bash
git clone https://github.com/Preetiraj3697/ReactJS-Integration-with-Backend.git
```
2. Navigate to the backend directory:
```bash
cd server
```
3. Install dependencies:
```bash
npm install
```
4. Set up your MongoDB database and update the connection URL in app.js if needed.
5. Start the server:
```bash
npm start
```
6. The server will start running on [http://localhost:3000](http://localhost:3000).
### API Endpoints
- POST /api/entries/add: Add a new entry to the user data.
- POST /api/entries/update/:id: Update an existing entry in the user data.
- GET /api/entries: Get the user data.
- GET /api/entries/count: Get the count of add and update operations.
- Delete /api/entries/:id: Delete the user data from existing user Data.
### Usage
- Send HTTP requests to the appropriate endpoints to add or update user data.
- Use the provided count endpoint to monitor the number of add and update operations.
---
Feel free to reach out if you have any questions or need further assistance!
## 🌐 Connect with me:
