A React.js single-page application (SPA) that allows you to search for GitHub users and view their public repositories. This project was developed as part of Gama Academy's Hiring Coders program.
🌐 Live Demo: https://github-finder-jv.netlify.app/repositories
- 🔍 Search for GitHub users by username
- 📋 Display all public repositories for the searched user
- 🎯 Direct links to each repository on GitHub
- ⚡ Fast and responsive user interface
- 🔄 Error handling for invalid usernames
- 📱 Mobile-friendly design
- React.js - Frontend framework
- React Router DOM - Navigation and routing
- Axios - HTTP client for API requests
- Styled Components - CSS-in-JS styling
- GitHub API - Data source for user repositories
- Clone the repository:
git clone https://github.com/joaovitor/github-finder-reactjs.git
cd github-finder-reactjs- Install dependencies:
npm install- Start the development server:
npm start- Open http://localhost:3000 in your browser.
- Search for a User: Enter a GitHub username in the search field on the home page
- View Repositories: Press Enter or click the "Pesquisar" button to see the user's repositories
- Access Repositories: Click on any repository name to open it directly on GitHub
- Navigate Back: Use the "VOLTAR" button to return to the search page
src/
├── App.js # Main application component
├── Routes.js # Application routing configuration
├── index.js # Application entry point
├── style.css # Global styles
└── pages/
├── home/
│ ├── index.js # Home page component
│ └── styled.js # Home page styles
└── repositories/
├── index.js # Repositories listing component
└── styled.js # Repositories page styles
npm start- Runs the app in development modenpm build- Builds the app for productionnpm test- Launches the test runnernpm eject- Removes the single build dependency (one-way operation)
- Real-time input validation
- Integration with GitHub API using Axios
- Error handling for non-existent users
- Dynamic list rendering using React hooks
- Local storage for data persistence during navigation
- Direct links to GitHub repositories
- React Router DOM for seamless page transitions
- Browser history management
- Responsive navigation controls
This project uses Styled Components for component-level styling, providing:
- Scoped CSS styles
- Dynamic styling based on props
- Better maintainability and organization
- Add user profile information display
- Implement repository filtering and sorting
- Add pagination for users with many repositories
- Include repository statistics (stars, forks, language)
- Dark/light theme toggle
- Enhanced mobile responsiveness
This project was created for educational purposes as part of Gama Academy's Hiring Coders program. The focus was on developing React.js skills and improving user experience with essential features.
This project is open source and available under the MIT License.
Note: This application focuses on functionality and React.js skill development rather than aesthetic design, emphasizing clean code practices and user experience.