Spend no more than 2 hours to create a simple application using a React framework (e.g. Next.js, Gatsby etc) that fetches and displays GitHub repositories. Implement simple pagination to manage and display the data efficiently.
- Fetch Data: Utilize the GitHub API to fetch and display at least 30 repositories, showing 10 results at a time. Use the following endpoint:
https://api.github.com/orgs/github/repos?sort=name&per_page=10&page=1. - Pagination: Implement "Next" and "Previous" buttons or automatically load the next set of items as you scroll.
- UI Styling: Style the list to resemble the appearance of GitHub's pinned items or the repository list on their org overview page (https://github.com/github). Omit complex elements like graphs and precise icons for simplicity.
- Accessibility: Ensure the application is accessible by considering semantic HTML, ARIA roles, and keyboard navigation.
- Error Handling: Implement basic error handling to manage and communicate issues gracefully.
- Styling: You may use custom CSS or any compatible library for responsive design.
- Provide clear instructions for setting up and running the project.
- Email tech-tests@catchdesign.co.nz with:
- A link to your repo OR
- A zip file of your project including git config/metadata
Aim to focus on functionality, code clarity, and user experience within the allocated time frame.