This project is a user management application that allows you to fetch user data from an external API, edit user information, and export user data to a CSV file. It consists of microservices for handling data operations, a frontend built with React and Chakra UI for user interaction, and a MongoDB database for storing user information.
-
Accessing User API:
- To fetch user data, use the following API endpoint:
https://gorest.co.in/public-api/users
- Please ensure that you are logged in with your Gmail ID to obtain the required API token.
- To fetch user data, use the following API endpoint:
-
Storing User Data:
- When you receive a successful API response, store the user data in the User Master table within the MongoDB database.
- Each user object received from the API should map to a record in the User Master table.
- Store the following fields for each user: Id, name, email, gender, status, Created_at, and Updated_at.
-
Editing User Data:
- Create an edit screen in the frontend where users can update their information.
- When a user modifies their data and submits the changes, make a request to the web service to update the corresponding record in the database.
-
Exporting User Data:
- Implement a microservice responsible for exporting the User Master data to a single-sheet CSV file.
- This CSV file should contain all the user records stored in the database.
- Frontend: React JS with Chakra UI
- Backend/Microservice: Node.js with Express.js
- Database: MongoDB
The project follows a client-server architecture, with the frontend and backend components separated.
- The frontend code is located in the
frontend
directory. - The backend code is located in the
backend
directory.
-
Clone the Repository:
git clone https://github.com/sainRaghuveer/Goldstone-assignment.git
-
Backend Setup
- Navigate to the backend directory:
cd backend
- Install the dependencies:
npm install
- Start the backend server:
npm run server or npm start
-
Frontend Setup
- Navigate to the Frontend directory:
cd frontend
- Install the dependencies:
npm install
- Start the backend server:
npm start
-
Access the Application:
Open your web browser and visit http://localhost:3000 to access the user management application.
├── index.js
├── configs
| └── db.js
├── models
| └── user.model.js
├── routes
| └── user.route.js
| └── exportCSV.route.js
├── middleware
| └──
├──controllers
| └── user.controller.js
| └── exportCSV.controller.js
Note:
- Before doing anything first create
.env
file and putport
,mongoURl
. port
is for listening the server.mongoURl
is for running database and store your data in database so put your mongo link.
{
name: {
type: String,
required: true
},
email: {
type: String,
required: true
},
gender: {
type: String,
enum:{
values:["male", "female"],
message:"Choose your gender only male or female"
}
},
status: {
type: String,
enum:{
values:["active", "inactive"],
message:"Choose your status only active or inactive"
}
}
}
{
name: {
type: String,
required: true
},
email: {
type: String,
required: true
},
gender: {
type: String,
enum:{
values:["male", "female"],
message:"Choose your gender only male or female"
}
},
status: {
type: String,
enum:{
values:["active", "inactive"],
message:"Choose your status only active or inactive"
}
}
}
METHOD | ENDPOINT | DESCRIPTION | STATUS CODE |
---|---|---|---|
POST | /api/user/userdata | This endpoint should allow users to add the data. | 200 |
GET | /api/user/data | This endpoint should allow users to view the data od user | 200 |
PATCH | /api/user/:id | This endpoint should allow users to edit own data by their id. | 200 |
GET | /api/export-csv | This endpoint should allow users to download the content in csv file all data | 200 |
Render Deployed link of Application
├── public
| └── favicon.ico
| └── index.html
| └── logo192.png
| └── logo512.png
| └── manifest.json
├── src
| └── components
| | └── Navbar.jsx
| | └── StatusMenu.jsx
| | └── UserCard.jsx
| | └── UserUpdateModal.jsx
| └── customHook
| | └── UseToast.jsx
| └── pages
| | └── Home.jsx
| └── routes
| | └── AllRoutes.jsx
| └── styles
| | └── Home.css
| └── App.css
| └── App.js
| └── App.test.js
| └── index.css
| └── index.js
| └── logo.svg
| └── reportWebVital.js
| └── setupTests.js
├── styles
| └── index.css
| └── product.css
Note : Don't Change any file name or do not delete any files
METHOD | ENDPOINT | DESCRIPTION | STATUS CODE |
---|---|---|---|
POST | `${BaseUrl}/api/user/userdata` | This endpoint should allow users to add the data. | 200 |
GET | `${BaseUrl}/api/user/data` | This endpoint should allow users to view the data od user | 200 |
PATCH | `${BaseUrl}/api/user/:id` | This endpoint should allow users to edit own data by their id. | 200 |
GET | `${BaseUrl}/api/export-csv` | This endpoint should allow users to download the content in csv file all data | 200 |
- The database connection details are specified in the backend code (backend/index.js). Make sure to update the connection URI if necessary.
- For detailed information about the API routes, request/response examples, and available endpoints, refer to the API documentation provided by Postman.
- Screenshots of the frontend webpages can be found in the screenshots.
![image](https://private-user-images.githubusercontent.com/112657812/248555036-29ecf320-8668-4241-b544-dfabd3c4152c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzMjMzNTcsIm5iZiI6MTcyMzMyMzA1NywicGF0aCI6Ii8xMTI2NTc4MTIvMjQ4NTU1MDM2LTI5ZWNmMzIwLTg2NjgtNDI0MS1iNTQ0LWRmYWJkM2M0MTUyYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxMFQyMDUwNTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIzODdkYTQyZWI1NDkyZjQzOWUxMzMwMWI4MzI3NWFmNzlkN2M1MDMxNDI5ZGFjNjdkMTA0MWUyNTE0YzUwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.rvHg6ugnX4hHRQO3GnazoJGIWnwEAstH0ujaUk8JWzs)
![image](https://private-user-images.githubusercontent.com/112657812/248555047-f851a114-3042-4379-b8e7-b1f3dfa1f6e9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzMjMzNTcsIm5iZiI6MTcyMzMyMzA1NywicGF0aCI6Ii8xMTI2NTc4MTIvMjQ4NTU1MDQ3LWY4NTFhMTE0LTMwNDItNDM3OS1iOGU3LWIxZjNkZmExZjZlOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxMFQyMDUwNTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05ZDUxZGJjNzY5MGM2NjhjMmZlMWEyM2ZjOWI0MTBjMWY1ZWQ0NTlmM2YwNTkxNDg1NDVmNjFiYWYxMzBjY2EwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.sVHMxPte9QUtQA6td8Z53_25oUf-H5AKDNXcnq-1wbE)
![image](https://private-user-images.githubusercontent.com/112657812/248555050-919b31f2-87cf-41fc-a8f5-5893f826db08.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzMjMzNTcsIm5iZiI6MTcyMzMyMzA1NywicGF0aCI6Ii8xMTI2NTc4MTIvMjQ4NTU1MDUwLTkxOWIzMWYyLTg3Y2YtNDFmYy1hOGY1LTU4OTNmODI2ZGIwOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxMFQyMDUwNTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01ZjFkMWRjNTJlODM4NDVkYjYyZTNiNGU2MTRlM2ZjNmUxZTNmNzBlYmU0MTJjMDQ2ZDY1ODNkZDA1ZmI4ZDM0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.82MZituUagyV-rDAXppMUbZoxM6pKEOeXVglk7Ym3Xc)
![image](https://private-user-images.githubusercontent.com/112657812/248555055-8ae8c620-248d-4da4-bc12-f39af0f1c3fc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzMjMzNTcsIm5iZiI6MTcyMzMyMzA1NywicGF0aCI6Ii8xMTI2NTc4MTIvMjQ4NTU1MDU1LThhZThjNjIwLTI0OGQtNGRhNC1iYzEyLWYzOWFmMGYxYzNmYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxMFQyMDUwNTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wNmE4MWJjOGNiOTg5NTc5YjRkNjg3ZjM2N2I5M2MzMmRjMTQ2ZmMyZDA1N2M4YjNlNjQwMzUyYzg0MzFlNWY1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.xDA0y2MBRE-9O0lxAr0pwGuHUcrdrc5P0kgEVBo2Bqc)
![image](https://private-user-images.githubusercontent.com/112657812/248555059-22fd47c3-07c1-4eb4-88d7-893b36719fc6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzMjMzNTcsIm5iZiI6MTcyMzMyMzA1NywicGF0aCI6Ii8xMTI2NTc4MTIvMjQ4NTU1MDU5LTIyZmQ0N2MzLTA3YzEtNGViNC04OGQ3LTg5M2IzNjcxOWZjNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxMFQyMDUwNTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xM2Y1OWViYWU2YzgwZDE5OGI3Nzk1YTMyMzhjZjgwMWQ0NWEzMzNjODI5OTI3ZDdmZGVkOGFhMWU5OTc4N2YwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.xwxWUDMoGFrOAJfstyj9ebPi1uVt5qTRmrDJSDxOECQ)