GitHub Prober

Project that will help you with browsing GitHub!

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage

About The Project

This is a project built for searching GitHub users and their repositories. After a successful login you will be greeted with a navbar and within it an input field for searching. Try searching some of your favourite GitHub users. You don't have to press enter because I used debounce to submit your search term every 700ms after the typing stops.

Root directory layout

.
├── client   
├── server
└── README.md

Client directory layout

.
├── public
├── src
├── .gitignore
├── craco.config.js
├── package.lock.json
├── package.json
└── tailwind.config.js

SRC directory layout

.
├── components
├── context
├── App.jsx
├── index.css
└── index.js

Server directory layout

.
├── controllers
├── files
├── routes
├── .gitignore
├── index.js
├── package.lock.json
└── package.json

(back to top)

Built With

• React.js
• Tailwind
• NodeJS
• ExpressJS
• GitHub OAuth
• ExpressJS
• Axios
• React Loader Spinner
• Use Debounce
• Cookie Parser
• JsonWebToken
• Nodemon
• Dotenv

(back to top)

Getting Started

Prerequisites

Install NPM

• npm

  npm install npm@latest -g

Preparation

1. Login to your GitHub account, go to settings, then Developer Settings and make a new GitHub App.
   Type the Homepage URL: http://localhost:3000
   Type the Callback URL: http://localhost:8080/auth/github
   Uncheck WebHook! After that save your Client ID and Generate new client secret key and save that one too.
2. Go to settings again, then Developer Settings and then Personal Access Tokens and generate a new one and save it.
3. Clone the repo

   git clone https://github.com/MagicPojska/github-prober.git

4. Go inside server folder

   cd server

5. Install NPM packages

   npm install

6. Make .env file and paste your Client ID, Client secret and a new secret key(it can be anything you want) in variables like this:
   GITHUB_CLIENT_ID = Your Client ID
   GITHUB_CLIENT_SECRET = Your Client Secret
   SECRET = Your secret key
   
7. Start server

   npm start

8. Go back to root folder and enter client folder

   cd ..
   cd client

9. Install NPM packages

   npm install

10. Make .env file and paste your Client ID again and Personal Access Token in variables like this:
    REACT_APP_GITHUB_CLIENT_ID = Your Client ID
    REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN = Your Personal Access Token
    
11. Start client

    npm start

(back to top)

Usage

Login screen:

After the login screen you will be greeted with an emtpy homepage:

After you enter a search term results will be shown like this:

After you click on Edit Data button you will get a form with inputs from that profile or repo you clicked on:

After you click save your json file will be created at ./server/files folder. Name of the file is generated based on the type of data you saved. If it is a users profile it will be saved as that users username, if it is a repo it will be saved as repo's name:

(back to top)

Contact

Safet Pojskić - [email protected]

(back to top)