GitDash (SPA GitHub Application)

GithDash is a Single Page Application that retrieves data from Github endpoints and displays it. The application will be a dashboard application, which will display statuses of the selected GitHub projects.

Table of Contents

• Features
• Design Decisions
• Website
• Used Resources
• Quick Start
• File Structure
• Browser Support
• GitHub API Documentation
• Build
• Run
• Licensing

Features

• Search and add new GitHub projects to the project list. Remove project from the project list.
  • The list of the projects are stored at local storage for the next visit.
  • GitHub account integration to access private repositories.
• List the projects in a single page. The list can contain some summaries (project description, project link etc.)
  • Interface offers paginated results for the ease of surfing.
• Display project details such as latest activities (last commits, last issues etc.) or general status (open PR count, open issue count etc.). Each project detail page should be bookmarked on its own.
  • Saved projects' data represented at dashboard as additional information

Design Decisions

• Used create-react-app to fast-forward project creation & foundations.
• Used css templates from multiple resources in order to have responsive & elegant design system which is coherent across the application. -Customized many provided templates to create a unique design & style.
• Added various improvements and new features;
  • Added GitHub authentication for security purposes.
  • Added pagination for searching GitHub repos.
  • Added search for saved repos.
  • Added stats and repo info in dashboard.
• I haven't used react for almost 2.5 years and felt a bit rusty at times and I didn't have any prior knowledge of the testing workflow in react therefore I skipped tests.
• Tried to implement base designs provided in the Figma file.
• Migrated from GitHub Pages to Netlify because of SPA routing problems.

Website

Explore the application from the following URL: GitDash

Used Resources

During the development of this dashboard, I have used many existing resources from awesome developers.

• node-sass v4.11.0
• prop-types v15.7.2
• react v16.8.6
• react-bootstrap-sweetalert v4.4.1
• react-bootstrap-table-next v3.1.0
• react-bootstrap-table2-paginator v2.0.5
• react-bootstrap-table2-toolkit v1.4.0
• react-datetime v2.16.3
• react-dom v16.8.6
• react-notification-alert v0.0.12
• react-perfect-scrollbar v1.4.4
• react-quill v1.3.3
• react-router v5.0.0
• react-router-dom v5.0.0
• react-scripts v2.1.8
• react-select2-wrapper v1.0.4-beta6
• react-tagsinput v3.19.0
• react-to-print v2.1.0
• reactstrap v8.0.0

Quick start

File Structure

Within the git-dash directory you'll find the following directories and files:

Git-Dash
.
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── index.js
    ├── routes.js
    ├── store
    │   ├── reducer
    │   │   ├── index.js
    ├── assets
    │   ├── css
    │   │   ├── argon-dashboard-pro-react.css
    │   │   ├── argon-dashboard-pro-react.css.map
    │   │   └── argon-dashboard-pro-react.min.css
    │   ├── fonts
    │   │   └── nucleo
    │   ├── img
    │   │   ├── brand
    │   │   ├── icons
    │   │   └── theme
    │   ├── scss
    │   │   ├── argon-dashboard-pro-react.scss
    │   │   ├── bootstrap
    │   │   ├── core
    │   │   ├── custom
    │   │   └── react
    │   └── vendor
    │       ├── @fortawesome
    │       │   └── fontawesome-free
    │       ├── animate.css
    │       ├── fullcalendar
    │       │   └── dist
    │       ├── nucleo
    │       ├── quill
    │       │   └── dist
    │       ├── select2
    │       │   └── dist
    │       └── sweetalert2
    │           └── dist
    ├── layouts
    │   ├── Admin.js
    │   └── Auth.js
    ├── components
    │   ├── Footers
    │   │   ├── AdminFooter.js
    │   │   └── AuthFooter.js
    │   ├── Headers
    │   │   ├── RepoDetail.js
    │   │   ├── AuthHeader.js
    │   ├── Navbars
    │   │   ├── AdminNavbar.js
    │   │   ├── AuthNavbar.js
    │   ├── Spinner
    │   │   ├── Spinner.js
    │   └── Sidebar
    │       └── Sidebar.js
    └── views
        ├── Dashboard.js
        ├── Explore.js
        ├── Archive.js
        ├── RepoDetail.js
        └── auth
            ├── Login.js

Browser Support

At present, GitDash supports the last two versions of the following browsers:

GitHub API Documentation

GitHub API Documentation

Build

• Clone this repo. Go into the root folder and run npm install to install the dependencies.

  $ npm install
  

• In order to use GitHub O2Auth you need to create O2Auth credentials for your app. For the purpose of demonstrating sample credentials are provided.

• Login to your Github account and create an OAuth app by following the steps provided here (https://docs.github.com/en/free-pro-team@latest/developers/apps/creating-an-oauth-app). Note: For this example, while creating the OAuth app, you can set your Homepage URL to http://localhost:3000/ and Authorization callback URL to http://localhost:3000/login if you are running your app locally.

• Create a .env file in the root folder and set these variables:

  REACT_APP_CLIENT_ID=Your Client ID from Github
  REACT_APP_CLIENT_SECRET=Your Client Secret from Github
  REACT_APP_REDIRECT_URI=http://localhost:3000/login
  REACT_APP_PROXY_URL=http://localhost:5000/authenticate
  SERVER_PORT=5000
  

Run

Run npm start to start the app

$ npm start

Open the browser to see if the app is working!

License

GitDash is licensed under the GNU Public License, version 2.0. See LICENSE for more information.