Table of Contents
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.
.
├── client
├── server
└── README.md
.
├── public
├── src
├── .gitignore
├── craco.config.js
├── package.lock.json
├── package.json
└── tailwind.config.js
.
├── components
├── context
├── App.jsx
├── index.css
└── index.js
.
├── controllers
├── files
├── routes
├── .gitignore
├── index.js
├── package.lock.json
└── package.json
- React.js
- Tailwind
- NodeJS
- ExpressJS
- GitHub OAuth
- ExpressJS
- Axios
- React Loader Spinner
- Use Debounce
- Cookie Parser
- JsonWebToken
- Nodemon
- Dotenv
Install NPM
- npm
npm install npm@latest -g
- 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. - Go to settings again, then Developer Settings and then Personal Access Tokens and generate a new one and save it.
- Clone the repo
git clone https://github.com/MagicPojska/github-prober.git
- Go inside server folder
cd server - Install NPM packages
npm install
- 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 - Start server
npm start
- Go back to root folder and enter client folder
cd .. cd client
- Install NPM packages
npm install
- 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 - Start client
npm start
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:
Safet Pojskić - [email protected]