GitHub explorer

About • User Stories • Features • Layout • How to run • Technologies • Author • License

💻 About the project

Github Explorer is a React project that uses the GitHub API to find repositories you might be interested in, allowing the user to browse through their open issues.

Live Preview:

Layout:

Layout designed by Tiago Luchtenberg:

---

⭐ User Stories

• A user can search for a GitHub repository by typing the username/repository-name
• A user can list searched repositories
• When clicking on a repository, a user can see repository stars, forks, and open issues
• A user can navigate to a specific issue thread on GitHub by clicking on the card
• A user can switch themes for night reading
• A user must be able to navigate between pages

---

⚙️ Features

• Search

  • Search by GitHub repository by typing the username/repository-name
  • Search bar input gets validated, so no empty searches are allowed

• Repositories

  • History of searched repositories is displayed on the initial page
  • Repository card is animated on mouse-over
  • Each repository card display the photo of the repository's owner, username/repository-name, and description
  • You can see more information about that repository by clicking on it

• Repository Information Page

  • You can see the repository stats (stars, forks, and open issues)
  • Each open issue is linked to the open issue on Github, so you can open it on a new tab or click to be forwarded to it
  • Each open issue card displays the issue title followed by the GitHub user who opened that issue

• Theme (New)

  • You can switch between light and dark themes
  • The theme is a persisted state with its mode saved on local storage, so it will not be lost on page refresh

---

🎨 Layout

Web

---

🚀 How to run the project

Requirements

Initial requirements: Git, Yarn, and a code editor of your choice.

Running the web application (Frontend)

# Clone this repository
$ git clone git@github.com:wilsonfsouza/github-explorer.git

# Access the folder in your terminal/cmd/cli
$ cd github-explorer

# Install all dependencies
$ yarn install

# Start the app in development mode
$ yarn start

# The application will open at port:3000 - access http://localhost:3000

---

🛠 Technologies

The following tools were used in this project:

Website (React + TypeScript)

• React Router Dom
• React Icons
• React Switch
• Styled-components
• Polished

See the file package.json

Utilities

• Editor: Visual Studio Code
• Markdown: StackEdit, Markdown Emoji
• Icons: Feather Icons
• Font-family: Roboto

---

💪 How to contribute to this project

1. Fork the project.
2. Start a new branch with your changes: git checkout -b my-new-feature
3. Save it and create a commit message describing what you have done: git commit -m "feature: My new feature"
4. Send your alterations: git push origin my-feature

---

👨‍💻 Author

_{Wilson Franca}

---

📝 License

This project is being developed under MIT License.

Made with ❤️ by Wilson Franca 👋