Charter/Spectrum Front-End Code Challenge
For this challenge we would like you to create a React application that pulls restaurant data from a simple API, displays that data in a table, and allows users to filter that data.
API Endpoint: https://code-challenge.spectrumtoolbox.com/api/restaurants API Key Header: Authorization | Api-Key q3MNxtfep8Gt
Example Fetch:
fetch(“https://code-challenge.spectrumtoolbox.com/api/restaurants”, { headers: {
Authorization: “Api-Key q3MNxtfep8Gt”, },
});User stories are as follows:
- A user should be able to see a table with the name, city, state, phone number, and genres for each restaurant.
- A user should see results sorted by name in alphabetical order starting with the beginning of the alphabet
- A user should be able to filter restaurants by state. If a state is selected that does not contain any restaurants, there should be something that indicates no restaurants were found for that state.
- A user should be able to filter by genre.
- State and Genre filters should default to “All” and take effect instantaneously (no additional clicks).
- A user should be able to enter text into a search field. When hitting the enter key or clicking on a search button, the table should search results. Search results should match either the name, city, or genre.
- A user should be able to clear the search by clearing the text value in the search input.
- A user should only see 10 results at a time and the table should be paginated.
- A user should be able to combine filters and search. The user should be able to turn filters on and off while a search value is present.
What we are looking for:
- No use of third-party libraries for the table/filter/search. Using Create-React-App or Next.js as a starter kit is okay.
- Well organized file structure
- Descriptive naming conventions
- DRY code that is readable and production ready
- Reusable components
- Sound logic for how the filters are architected
- Styling follows a convention/pattern and is well organized
- Full Git history with atomic commits
Stretch goals:
- Deployed application
- CI / CD
- Unit tests
- TypeScript
- Table row click shows additional information
- Add filter for attire
- Feel free to get creative!