This project implements a reservation list with filtering, searching and sorting capabilities.
The ReservationList component displays a table of reservation data. It allows users to:
- Filter reservations by status, date, area etc using dropdowns
- Search for reservations by customer first name and last name
- Sort reservations by columns in ascending/descending order
- The component is built using React and TypeScript.
- Taking care about web accessibility
Here are some ways the project could be improved:
- Add pagination to handle large data sets better
- Using debouncing for having better performance or adding useTransition and isPendeing for each state of changeing action
- Extract search components
- Write unit tests for utils
- Use React Context for global data like filters, and use useReducer globally but for better performance and can seprate state and action
- Memoize callbacks to prevent unnecessary re-renders
To run the project locally:
npm install
npm start
This will start the dev server on http://localhost:3000
npm run test
- Use the dropdowns to filter reservations
- Type in the search box to search by customer name
- Click the column headers to sort ascending/descending
- Create React App Docs
- React Docs
- Tailwind CSS
- TypeScript Docs