A GitHub client built with Angular v13, TailwindCSS, and Apollo Client.
Check out the live application
A GitHub account is required to login and view the application as it requires your an access token to retrieve the data.
- node v16
- yarn
- Create your project
.env
cp .env.example .envor for production:
cp .env.example .env.prod # and change PRODUCTION=true- Install dependencies:
yarn install - Graphql codegen:
yarn generate - Run the project:
yarn start
This project was generated using the Angular CLI.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
- To run https (recommended for Github OAuth), first create a key and cert:
yarn run generate-cert-
Then add the new cert to the macOS keychain by opening Keychain Access. Then under Certificates, paste the generated certificate file into the list. Change the permissions to "Always Trust" by right-click the certificate, selecting Get Info, and expanding the Trust section.
-
Then run the server:
ng serve --ssl true --ssl-key <key_file> --ssl-cert <cert_file>- And navigate to
https://localhost:4200/.
Create a proxy.conf.json based on the proxy.conf.example.json. The example uses ngrok and is recommended for local a secure server. Be sure to set authtoken after install.
Start a tunnel for a server:
ngrok http <custom_server_port>To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
This project is built using a number of beginner to advanced techniques to solve a number of different problems. The following is a list of additional features that could be build into the application to either make it feel more like GitHub or add a unique, personal touch.
| Project | Description | Skill |
|---|---|---|
| Repo Star Categories | Add a repo to a specialised list other than the default Star/Unstarred list. | Beginner |
| User Organizations | List a user's organizations. | Beginner |
| Repo Dependencies List | Display the main dependencies/packages used in a repo. | Beginner |
| Repo Dependencies Viewer | Built on the dependency list with the ability to view repos that share the same dependency. | Beginner |
| Repo languages | Display what are the languages used in the repository. | Beginner |
| Contributors | Display avatars of contributors for each repo. | Beginner |
| Activity Dashboard | Display a list of latest commits and activity for a specific repo or all repos. | Beginner |
| Profile overview page | Add Overview tab to Profile page and display profile readme if it exists. |
Intermediate |
| Profile pinned repositories | Display pinned repositories on an Overview tab of Profile page. |
Intermediate |
| Commit pulse | Integrate a chart library to view the lifeline of a project and its contributions. | Intermediate |
| Pull request view | Create a page for displaying pull request details and allow navigation to it from the Pull requests page. | Intermediate |
| Issue view | Create a page for displaying issue details and allow navigation to it from the Issues page. | Intermediate |
| File finder | Implement file fuzzy search functionality - available under the Go to file button |
Intermediate |
| Contributor graph | Display GitHub contributor graph on an Overview tab of profile page |
Advanced |
| Deployed Environments | Display deployed environments for a repo. | Advanced |
| CI/CD Pipelines | Graphical view of pipelines and github actions with graphql-inspector. | Advanced |