By the end of this guide you will have both the Express backend and the Vite-powered React frontend running on your local machine. You will upload a CSV file through the browser, confirm the data parses correctly, and use the real-time search box to filter rows by any field value.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/titobrian97/Prueba-tecnica-ts-node---gestion-de-csv/llms.txt
Use this file to discover all available pages before exploring further.
Clone the repository
Download the project source from GitHub. The repository contains both the
backend and frontend directories at the root level, along with an example.csv file you can use for testing.Install backend dependencies
Move into the
backend directory and install the Node.js dependencies. This pulls in Express 5, Multer, convert-csv-to-json, cors, cross-env, and ts-node, along with the necessary TypeScript type definitions.Start the backend server
Launch the Express development server using the Once running, the API is available at Leave this terminal session open and open a new terminal window for the next step.
dev script. Internally this runs cross-env PORT=3000 ts-node server.ts, which compiles and executes server.ts directly without a separate build step.http://localhost:3000. You should see the following line in your terminal:Install frontend dependencies
Navigate from the
backend directory into the frontend directory and install the React application’s dependencies. This includes React 19, Vite 8, use-debounce, and sonner for toast notifications.Start the frontend dev server
Start the Vite development server using the The React application will be available at
dev script, which runs vite --port=4000.http://localhost:4000. Open that URL in your browser and you will see the CSV MANAGE heading along with a file input.Upload a CSV file
In the browser at
http://localhost:4000:- Click the file input and select any
.csvfile from your filesystem (onlytext/csvfiles are accepted). - After selecting a file, the “Subir Archivo” button will appear. Click it to upload.
- The button label changes to “Cargando” while the file is being sent to
POST /api/files. - On success, a toast notification confirms the file was loaded and the app transitions to the search view.
Search your data
Once the upload completes, the file input is replaced by a search box. Type any value — a name, a city, an email fragment, or any other field from your CSV — and the matching rows will appear in real time.The search is powered by
GET /api/users?q= on the backend, which performs a case-insensitive match across all columns in every row. The frontend debounces keystrokes using use-debounce to avoid firing a new request on every character.What’s next
Uploading CSV files
Learn about the
POST /api/files endpoint in depth: accepted MIME types, the multipart/form-data field structure, and how the CSV is parsed into JSON.Searching data
Understand how
GET /api/users?q= performs full-text filtering, how the debounce hook works in the frontend, and tips for structuring your CSV for best search results.API reference
Full reference for both REST endpoints — request formats, response shapes, status codes, and error messages returned by the Express server.
Architecture overview
A deeper look at how the Express backend, in-memory data store, Multer file handling, and React frontend fit together as a cohesive full-stack system.