Design an Angular 14+ single-page application (SPA) that takes a GitHub username as input and displays the public Github repositories belonging to the user
- Fork this repository to your github account.
- Clone the forked repository and proceed with steps mentioned below.
- Install angular cli Ref
npm installin this repository
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
1.Consist of 5 components where Github-app is the main component
#Unit test
#FYLE Internship Challenge 2024 Output
User needs to search for the github username
Features User Search Bar:
A search bar for entering a GitHub username. A search button to fetch repositories for the entered username. Validation to ensure the input is not empty. API Integration:
Fetch public repositories of a user using the GitHub API. Handle cases where the user is not found (display a zero state). Repository Listing:
Display a list of repositories with details such as the repository name, description, and topics. Each repository should display multiple topics if available. Pagination:
Implement server-side pagination to fetch repositories in pages. Include a dropdown to select the number of repositories per page (10, 20, 50, 100). Default to 10 repositories per page. Loading Indicators:
Show a skeleton loader or spinner while API calls are in progress. Error Handling:
Display appropriate messages for different error scenarios (e.g., user not found, network errors). Caching:
Cache GET API calls to avoid duplicate requests when switching between pages or reloading. Responsive Design:
Ensure the application is responsive and works well on various screen sizes. Unit Testing:
Implement unit tests for at least one component and one service. Ensure 100% code coverage for the tested component and service. Documentation:
Provide clear documentation in the README on how to run the application and the tests. Deployment:
Deploy the SPA on a cloud service (e.g., Netlify, GitHub Pages). Provide a link to the hosted application. Code Quality:
Follow best practices for clean, maintainable, and readable code. Use Angular CLI for project setup and configuration. Additional Points Project Structure:
Organize the project with a clear folder structure (e.g., components, services, models, etc.). Styling:
Apply consistent and modern styling using CSS/SCSS. Use Angular Material or another UI library for improved UI/UX. Accessibility:
Ensure the application is accessible with proper ARIA labels and keyboard navigation support. Performance Optimization:
Optimize performance by lazy loading modules and components where applicable. Version Control:
Use Git for version control. Commit changes with clear and descriptive messages.
#If the user clicks on any repo it will be redirected to it
to watch live click here:https://66434602f0fde10829b9434a--glowing-gnome-d579e9.netlify.app/