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 REST 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.
• 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.
• If any of the filters do not return any restaurants, the UI should indicate that no results were found.
What we are looking for:
• Deployed application
• No use of third-party component 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:
• CI / CD
• Unit tests
• TypeScript
• Table row click shows additional information
• User can sort the data by name and state
• Add filter for attire
• Feel free to get creative!