Web Application that allow users to upload CSV file with pre formated data and able to show those data as cards in the frontend, additionally able to filter in a search bar. This leads to a full stack project where the best practices in the RESTful API were showed.
-SPA
-NO Magic Strings to avoid make it more error-prone, and difficult to maintain as it evolves over time.
-window.history.pushState() used to modify the search history without reaload the browser and make it more friendly and efficient to the user.
-RESTful API.
-Best practices for the API, accept (in this case since it's a file first we have to check the buffer then convert csv to json) and response with JSON, naming conventions, allowing filtering, handle errors gracefully and return standard error codes.
-Part of Multer middleware, convert csv to json function to be able to recieve JSON and response with so to get stick to good practices.
As we are going to upload files, Multer was the best option for handling multipart/form-data, the process was first to add the file into the input button, then with the event.target.files assign it into a variable used by the hook "useState", then pass it to a function and create a new formData, very important is to NOT ADD ANY HEADERS, since we need to let the browser to add the apropiate boundaries.
Then make the call to the appropiate endpoint in the RESTful API and the backend will accept the multipart/form-data, since we want to store it into the memory i used const storage = multer.memoryStorage(); const upload = multer({storage: storage}); in order to have access to the buffer and turn it into a string (rawCSV), then use the function CSVtoJson and finally adding into memory and respond with JSON.
Before selecting our file let's see how it looks
Now let's select our file
File uploaded successfully
Filter by Number
