Backend Frontend Integration

a comprehensive web application designed to streamline and enhance professional development and organizational management. It encompasses functionalities for user authentication and management, asset management, evaluation management, training plan management, and insightful data analytics. The application is being built using a React-based frontend with Material UI components and a Node.js backend ([login to view URL], PostgreSQL, Prisma), all while following best practices for development.

Current Status (Completed and Partially Completed Features):

Backend:

A basic authentication structure has been implemented, including the generation and validation of JSON Web Tokens (JWT) for securing API endpoints.

Core API routes for user registration and login, company registration, user management, evaluation management, and regulations management have been created.

The authentication middleware has been implemented and is being used to protect the routes that require a valid token.

The project uses PostgreSQL as a database with Prisma for ORM.

All the required dependencies are installed and configured.

The backend is able to upload files using multer.

The backend returns responses according to the data in the database.

The backend provides endpoints for:

User management (/api/users) including user registration (/api/users/register), login (/api/users/login), and token validation (/api/users/me).

Company management (/api/company) including the creation of a company and admin (/api/company/register) and fetching the information for a company.

Evaluation management (/api/evaluations), including the endpoints for creation, updating, deleting and list all the evaluations.

Regulation management (/api/normatives), including the endpoints for creation, updating, deleting and list all the normatives.

Frontend:

The main components for authentication are working correctly: Home, Login, Register

The users are able to authenticate and be redirected to the main page or to their corresponding dashboard.

The session is persistent between navegations.

Key components such as CompanyDashboard, EvaluatedDashboard, and ManageUsers have been partially connected with the backend, and are able to retrieve some information.

Several UI components have been built using Material UI for a consistent user experience.

The component Home is able to display the name of the user, and to handle the logout logic.

The Login component handles the login correctly and redirects to the Home page after a successfull login.

A demo login option is available by clicking a button, and redirecting the user to /.

The Register component allows you to upload files.

Remaining Tasks (Frontend Integration):

[login to view URL] Component:

Ensure that the component displays the proper name of the logged-in user if there is an active session.

Ensure that if the user is logged in, the button "Iniciar Sesión" should change to "Cerrar Sesión".

[login to view URL] Component:

Connect the component to the backend to retrieve all the required information (Total users, pending and complete evaluations, training progress, assets, normatives, etc.) and remove the static data.

Ensure that the graphs for training progress are connected with the backend.

Implement error handling and loading states.

Verify the persistency of the session.

[login to view URL] Component:

Connect the component to the backend to retrieve all the required information (name of the user, company, pending and completed evaluations, training plans, and their status) and remove the static data.

Use a valid token from local storage to communicate with the backend.

Implement proper error handling and loading states.

Verify the persistency of the session.

[login to view URL] Component:

Connect the component to the backend for listing all the users of the current company, and filter them by companyId.

Allow the admin user to create, edit, and delete other users of the company.

Ensure that new users are being created related to the current logged in company.

Verify that all the actions to create, update, and delete are done correctly.

Implement proper loading and error states.

Verify that the token is being sent correctly in the requests to the backend.

Implement the functionality to show and accept the evaluations for a specific user.

[login to view URL] Component:

Connect the component to the backend to obtain and display the evaluation results for a user.

Fetch the information of the questions and the user's answer, as well as the correct answer and the explanation for why a user answer was wrong.

Provide links to the study resources in case that a question is answered wrong.

* Ensure a proper error handling and loading states.

[login to view URL] Component:

Connect the component to the backend to fetch and display all the information of a specific training plan.

* Use the token from localStorage.

* Ensure the correct display of information and implement a loader and error state.

[login to view URL] Component:

Implement a system to list, create, update, delete, search and filter all the regulations.

Handle the errors from the API, and the loading states.

Ensure the correct navigation.

[login to view URL] Component:

Connect the component to the backend to change the password of the logged-in user.

Handle all the possible errors, and redirections.

Verify that the token is being passed correctly to the backend.

[login to view URL] Component:

Connect to the backend to change the profile information of the logged-in user.

Handle all the possible errors and redirections.

Verify that the token is being sent correctly to the backend.

[login to view URL] Component:

Implement the logic to get all the information from the backend including the overall results of the evaluations, and the details of every evaluation.

Render the corresponding charts with the information from the backend.

All data should be protected using a valid token.

* Make sure that the reports (CSV, PDF) use the data from the API, and that they are being sent using the right format and with the token.

* Implement the filtering of information, and the anonymization of data.

[login to view URL] Component:

Implement the logic to retrieve the information from the backend of a specific evaluation, by using its id.

Render the questions correctly according to their type, and send the response from the user to the correct backend endpoint.

Implement the logic of a timer, and automatic sending of the evaluation if the time ends.

[login to view URL] Component:

Fetch and display the list of all the pending evaluations of a specific user from the backend.

Use a valid token from `localStorage` and handle loading and error states correctly.

Use code with caution.

[login to view URL] Component:

Fetch and display the list of all the completed evaluations of a specific user from the backend.

* Use a valid token from localStorage and handle loading and error states correctly.

[login to view URL] Component:

Connect to the backend to validate a code and then redirects the user to the register component or to the app.

* The code should be sent using the correct backend endpoint.

Backend Functionality Checklist:

All routes are now protected with the authMiddleware and the token is being validated successfully.

The JWT_SECRET is the same in the backend, and there's no inconsistencies in the .env

The routes/[login to view URL] is handling the authentication, and the CRUD for the user properly.

The routes/[login to view URL] is handling the company creation and the fetch of company information.

The routes for evaluation and normative (routes/[login to view URL], /routes/[login to view URL]) have all the basic CRUD operations correctly implemented.

All the API endpoints are returning the correct data, in the correct format.

Implement the Remaining Functionalities: Your team should start working on completing the remaining features on the frontend, using the endpoints already implemented in the backend.

Testing: Thoroughly test all the components and their interactions with the backend to ensure correct behavior.

Code Review: Perform code reviews to maintain code quality and follow best practices.

Documentation: Document all components and their purpose.

Diseño de sitios web Backend Development

Nº del proyecto: #39044592

Sobre el proyecto