Client Management
CRM
About the project
Provides the user with the ability to have all the control they need to manage their clients effectively and efficiently.
One of the most useful features of the CRM is its ability to prevent duplicate records. Additionally, the registration form is easy to use, allowing you to add new clients quickly and easily.
Once you have registered your clients, you will be able to access the client management section, where you can view, edit or delete all relevant information for each of them.
Project Stack
The project uses React and React Router Dom to design user interfaces and manage application state. It also uses Fetch with appropriate HTTP methods to interact with the REST API. This means you will always have access to the most up-to-date data.
My Role
I have developed the website with the purpose of optimizing the user experience. To achieve this, I have applied advanced web design and development techniques
I developed React components for the user interface. To use Tailwind in the website design, I made the necessary configurations in the "Tailwind" and "CSS" files and installed the corresponding dependencies.
I used React Router Dom, the Link component, useNavigate and Path to define routes and for main navigation. I implemented the redirect Hook to redirect the user. To highlight menu links I used useLocation and pathName And to display components within the "Layout" component, I used Outlet and Element.
When registering a new client I use the Form component and the POST method, which looks for an Action to get the form data. I verify that all fields are filled and that the user has entered a valid email, if an error occurs in these validations the "Error" component is rendered. Additionally, I used the errorElement to capture and improve the design of error messages that arise in case of problems with the page or API.
REST API
To create and use an API securely, I used json-server and protected its URL in environment variables for greater control and security of shared information.
To query the API I used the useLoaderData Hook and an asynchronous function that makes Fetch to the API URL to get a JSON response and display client information efficiently.
To add a new client to the API, I used an asynchronous function that receives the client data and in a try-catch block, if there is an error, it shows a message, otherwise, it executes the try and makes a Fetch to the API URL. It uses the POST method, a body that contains the data to be sent and a header that indicates the content type.
To get information for a particular client, I used dynamic routing to inject their ID into the URL. Then, I loaded the client ID using a loader and verified it with the API. If the client doesn't exist, I showed an error. If it exists, I automatically filled the form to edit the client information.
I used an "action" to edit a client's data. This "action" receives a request to get the data and validate it before sending it. It also uses "params" to get the client ID and send it as a parameter to the function that will update the client data. The function receives the ID and updated client data, and writes it to the API using the PUT method.
To delete a client I used "Form". I queried the API with the "PUT" method, then in an action I instantiated the Delete function, this function receives the client ID as a parameter and deletes it using the DELETE method.
Before deleting the client, I added a confirmation message so the user can decide whether to continue or not. If they accept, the client is deleted and the user is redirected to the main page.