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
frontenddirectory. - The backend code is located in the
backenddirectory.
-
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
.envfile and putport,mongoURl. portis for listening the server.mongoURlis 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.
