User Management Application

Overview

This is a User Management Application that allows you to manage user data, including creating new users, updating existing users, and exporting user data as a CSV file. It provides a web-based interface for interacting with the application.

It uses four microservices:

• GET : Retrieves users based on a query.
• POST : Creates a new user.
• PUT : Updates an existing user.
• EXPORT : Exports user data as a CSV file.

User list page	Add user page
Update user page

Postman GET request

Postman POST request

Postman PUT request

Features

• View a list of users with their names, email addresses, gender, and status.
• Add new users to the system.
• Update the details of existing users.
• Export user data as a CSV file.
• RESTful API endpoints for retrieving, creating, updating, and exporting user data.

Technologies Used

• Front-end: React.js, Chakra UI, React Router DOM
• Back-end: Node.js, Express.js
• Database: MongoDB with Mongoose
• Other Libraries: json2csv, fast-gateway, cors

API Endpoints

The server provides the following API endpoints for managing user data:

• GET /user: Retrieves users based on a query.
• GET /user/export: Exports user data as a CSV file.
• GET /user/:id: Retrieves a specific user by ID.
• POST /user: Creates a new user.
• PUT /user/:id: Updates an existing user.

Code Explanation

Server: This directory contains the server-side code for the application.

config/db.js

• This file connects to the MongoDB server using the mongoose library.

models/User.model.js

• This file defines a User schema using the mongoose.Schema method.

routes/user.routes.js

• This file defines the routes and handlers for user-related API endpoints.

server.js

• This file defines the entry point of the server, sets up the Express server, establishes the database connection, and defines the routes.

Client: This directory contains the client-side code for the application.

Components/AllRoutes.js

• Defines the routes for different pages in the application using React Router DOM.

Components/Navbar.js

• Renders the navigation bar at the top of the application with different options based on the screen size.

App.js

• Entry point of the client-side code, renders the overall structure of the application including the navigation bar and routes.

Pages/UserList.jsx

• This file defines the UserList component, which displays a list of users. It fetches user data from the server using the fetchData function and renders the list using the Chakra UI components.

Pages/AddUser.jsx

• This file defines the AddUser component, which provides a form for adding a new user. It captures user input and sends a POST request to the server to create a new user.

Pages/EditUser.jsx

• This file defines the EditUser component, which allows editing the details of a specific user. It fetches the user data based on the provided ID and updates the user's information with a PUT request to the server.

Thank You