Skip to content

IsaacRF/github-ngsearch

Repository files navigation

Github Ngsearch

CI

Author: IsaacRF239

Deployed app URL: https://isaacrf.com/apps/github-ngsearch

License: GNU GPLv3

Angular test app that consumes GitHub API to retrieve data. This project was generated with Angular CLI version 9.1.7.

Usage instructions

Production app can be accesed on http://isaacrf.com/apps/github-ngsearch

Search

Use the search bar to search for users by their login name. The search is performed as you type

Search

Theming

Theme button can be used to dinamically swap themes

Theming

User Details

Click an user to go to the user details

Details

Key Features

Responsive

Layout is adapted to be well visualized in any resolution.

ngsearch-responsive

Mobile ready and animated

App is ready for mobile resolution and navigation transitions are animated.

ngsearch-animations

Cache in memory

This app caches the user details once retrieved, and this data has a configurable lifetime, setted to 1 hour by default. GitHub API is called in every navigation to user detail, however, succesive calls are filled with an Etag header field GitHub uses to determine if data has changed since the last call. If not, GitHub API just return a 304, not modified error, and data is then retrieved from cache.

Calls with a 304 error don't count towards API call limits, and since they return empty, they are also fast in most case scenarios.

An optional timeout and offline cache could be also implemented to avoid sucessive calls for a period of time, but that's out of the scope of this project.

ngsearch-cache

Lazy loading

User detail page is configured to lazy load only when it's required, helping keep initial bundle sizes smaller, which in turn helps decrease load times. As user search module is the main route point of the app and it's required on first load most of the time, I opted to go with an eagerly load approach, also serving as demonstration purposes showing the differences between the two modes.

github-ngsearch-lazyloading-demo-optimized

Scalable folder structure

App architecture is structured so the app is fully and easily scalable in the future, using the core module, shared modules, and module by feature division philosophy.

folder-structure

Continuous Integration

App is built and tested on every branch push, and development and master branches are protected expecting this build and test process to pass before any pull request can be accepted and merged. Development and Master also launch the build and test process to ensure everything is ok after every merge. This encloses a secured continuous integration workflow.

github-ngsearch-ci-demo2

Project Build

Development server

Run ng serve --open for a dev server. The app will automatically reload if you change any of the source files.

Build

Run ng build --prod --base-href ./ to build the project production ready. The build artifacts will be stored in the dist/ directory.

License

This project uses a GNU General Public License v3.0. This means that:

  1. You can freely use, copy, modify and redistribute this software, as long as it remains open source.
  2. You must keep original copyright information and notices. Removing them is not permitted.
  3. If you modify and / o redistribute this code, you must use the same license (GNU General Public License v3.0).