https://github.com/nbfontana/githor
Github's profile collector. :octocat: Stack: Angular | Angular Material | Webpack (AngularCLI) | SASS (SCSS) | Karma | Protractor
https://github.com/nbfontana/githor
angular angular-material github typescript
Last synced: about 1 month ago
JSON representation
Github's profile collector. :octocat: Stack: Angular | Angular Material | Webpack (AngularCLI) | SASS (SCSS) | Karma | Protractor
- Host: GitHub
- URL: https://github.com/nbfontana/githor
- Owner: nbfontana
- License: mit
- Created: 2017-09-20T12:43:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-26T00:10:56.000Z (over 7 years ago)
- Last Synced: 2025-04-01T20:41:19.676Z (about 1 year ago)
- Topics: angular, angular-material, github, typescript
- Language: TypeScript
- Homepage:
- Size: 468 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# githor
GitHub's profile collector made with Angular :octocat:
# Implementation
In this project I made use of NodeJS with NPM, Webpack to bundle and serve the application with webpack-dev-server in dev environment, and Angular 4+. I also made use of Angular Material components for better UI, and some custom SCSS scripts.
**Features**:
*Users - /users - *List Github Users with pagination and filters*
* The user can find a Github User by it's username or (login)
* The user can find Github Users based on location (Brazil is set as default if it's empty)
* The user can open a specific Github on the web
* The user is able to make comments over a Github User (wich is being saved in the LocalStorage)
* The user is able to list all public Github User repositories
* A 404 panda is visible if the search doesn't return any value at all
*Repositories - /repositories *List repositories of a specific Github User with pagination*
* The user is able to see all public repositories of a specific Github User
* The user is able to paginate over the repositories
**Details**
* I've made use of a Guard over the /repositories route, that way the user isn't able to navigate directly to the page without passing the the needed data to it.
* If the user types a incorrect base url like 'https://githor.herokuapp.com/#/blabla' he's redirected to 'https://githor.herokuapp.com/#/page-not-found' but if he types only the subroute incorrectly, like 'https://githor.herokuapp.com/#/app/ussssers', he will get a default route for that.
* Some components were created to help the main screens, like 'githor-loading' and 'github-user-card'. Some of them are dumb components wich are only responsible of emiting an event to the parent component so it can implement as it desires.
* The final bundle is made with an CLI AOT Build and has async routes, for better performance.
# Installation
You need NodeJS with NPM and the [HerokuCLI](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up) to publish the app if you want to.
First of all, install all dependencies:
```
npm i -d
```
Then, run the development server:
```
npm run server
```
And if you want to build AOT for production, just call:
```
npm run build
```
You also have the option to run both the build and the server with flags for **Development**, **Production** and **Homologation**, all you need to do is add ':[flag]' after the script with a valid flag. Example:
```
npm run build:dev
npm run build:prod
npm run build:hml
```
If you want to test the app you can run one of those
```
npm run test
npm run test:watch
npm run test:prod // To run with PanthomJS in production linux environment (not recommended)
npm run e2e
```
You can find those and more scripts in the **package.json** file.
Enjoy ;)