Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/indiecodermm/gh-dashboard

📊 Website that allows users to generate a stylish GitHub Dashboard just by entering username. Built with React, Redux & GitHub API
https://github.com/indiecodermm/gh-dashboard

github-api github-dashboard reactjs redux styled-components

Last synced: 26 days ago
JSON representation

📊 Website that allows users to generate a stylish GitHub Dashboard just by entering username. Built with React, Redux & GitHub API

Host: GitHub
URL: https://github.com/indiecodermm/gh-dashboard
Owner: IndieCoderMM
License: mit
Created: 2023-01-30T15:01:19.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-09-12T11:36:14.000Z (over 1 year ago)
Last Synced: 2025-01-15T23:48:58.028Z (about 1 month ago)
Topics: github-api, github-dashboard, reactjs, redux, styled-components
Language: JavaScript
Homepage: https://gh-dashboard-icmm.onrender.com
Size: 1.01 MB
Stars: 7
Watchers: 1
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        

## 📑 Table of Contents

- [📊 GitHub Dashboard Generator ](#-github-dashboard-generator-)

  - [🛠 Built With ](#-built-with-)

    - [🧰 Tech Stack ](#-tech-stack-)

    - [💎 Key Features ](#-key-features-)

  - [🚀 Live Demo ](#-live-demo-)

  - [� Getting Started ](#-getting-started-)

    - [📋 Prerequisites](#-prerequisites)

    - [📂 Setup](#-setup)

    - [📥 Installation](#-installation)

    - [🔑 Token](#-token)

    - [💻 Usage](#-usage)

    - [🎈 Deployment](#-deployment)

  - [📧 Contact ](#-contact-)

  - [🔭 Future Features ](#-future-features-)

  - [🤝 Contributing ](#-contributing-)

  - [💖 Show your support ](#-show-your-support-)

  - [🙏 Acknowledgments ](#-acknowledgments-)

  - [📝 License ](#-license-)

# 📊 GitHub Dashboard Generator 

A web-based application that creates a dashboard for a user by using data from the GitHub API. Simply enter a GitHub username and the app will generate a dashboard displaying overview of relevant information. Users can also copy the link to their dashboard for easy access.

![Screenshot](app_screenshot.png)

## 🛠 Built With 

### 🧰 Tech Stack 

- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white)

- ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)

- ![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)

- ![Render](https://img.shields.io/badge/Render-%46E3B7.svg?style=for-the-badge&logo=render&logoColor=white)

### 💎 Key Features 

- Generate a comprehensive dashboard using data from GitHub API 💻

- Overview of repositories, followers, stars and more 📈

- Beautifully designed and easy-to-use 🎨

- Instant snapshot of your GitHub presence 📸

- Save your dashboard link for easy access 🔗

(back to top)


## 🚀 Live Demo 

You can visit the website on [GitHub Dashboard Generator](https://gh-dashboard-icmm.onrender.com/).

(back to top)


## 📗 Getting Started 

To run this project locally, follow these steps.

### 📋 Prerequisites

Before you begin, ensure that you have [Node.js](https://nodejs.org/en/) installed on your machine.

### 📂 Setup

Clone this repository to your desired folder:

```sh

  cd my-project

  git clone [email protected]:IndieCoderMM/gh-dashboard.git .

```

### 📥 Installation

Install the dependencies with:

```sh

  npm install

```

### 🔑 Token

You need a personal access token from Github to run this project locally.

1. Generate a new token in [GitHub Setting](https://github.com/settings/tokens).

2. Create a `.env` file in project root directory.

3. Add your generated token to the `.env` file.

```sh

REACT_APP_GITHUB_ACCESS_TOKEN = your_github_token

```

4. Restart your server after adding this variable.

### 💻 Usage

To run the project, execute the following command:

```sh

  npm start

```

### 🎈 Deployment

You can deploy this project using:

```sh

  npm run build

```

This will create a production-ready build of your website in `build/` folder, which you can use to deploy to a hosting service.

(back to top)


## 📧 Contact 

I am always looking for ways to improve my project. If you have any suggestions or ideas, I would love to hear from you.

[![Github](https://img.shields.io/badge/GitHub-673AB7?style=for-the-badge&logo=github&logoColor=white)](https://github.com/IndieCoderMM)

[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/hthant_oo)

[![Linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/hthantoo)

[![Gmail](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:[email protected])

(back to top)


## 🔭 Future Features 

- [x] **Mobile UI**

- [ ] **Visualize contribution**

(back to top)


## 🤝 Contributing 

I welcome any and all contributions to my website! If you have an idea for a new feature or have found a bug, please open an issue or submit a pull request.

Feel free to check the [issues page](../../issues/).

(back to top)


## 💖 Show your support 

If you like this project, please consider giving it a ⭐.

(back to top)


## 🙏 Acknowledgments 

This project was inspired by:

- [GitHub Finder](https://github.com/JasurbekIsokov/github-finder)

- [GitHub Profile Finder](https://devpost.com/software/github-profile-finder)

(back to top)


## 📝 License 

This project is [MIT](./LICENSE) licensed.

(back to top)