Ngx Demo App
Angular demo application containing typical pages with posts, albums and photos.
The goal of the assignment of this application is to demonstrate my software engineering skills, especially around code organization, data structure use, problem-solving, and testing.
Key Features
- Latest version of Angular
- Using four libraries for state management (NgRx + NGXS + Akita + Elf)
- Each page takes a different approach to dealing with state (for example normalization using normalizr)
- ESLint for code quality
- Bootstrap for UI
- Extreme usage of Type hinting via TypeScript
- Unit tests (Jasmine)
- End-to-End tests (Cypress)
Getting started
You can view a live demo over at https://ildar-icoosoft.github.io/ngx-demo-app/
To get the frontend running locally:
- Clone this repo
npm installto install all req'd dependenciesnpm startto start the local server
Backend API
The app uses these API endpoints to retrieve the data to display on the page.
- https://jsonplaceholder.typicode.com/posts/ to the list of posts.
- https://jsonplaceholder.typicode.com/posts/1/ to the details of post with ID 1.
- https://jsonplaceholder.typicode.com/albums/ to get list of albums.
- https://jsonplaceholder.typicode.com/albums/1/ to get details of album with ID 1.
- https://jsonplaceholder.typicode.com/photos/ to get list of photos.
- https://jsonplaceholder.typicode.com/photos/1/ to get details of photo with ID 1.
- https://jsonplaceholder.typicode.com/users/1/ to get details of user with ID 1.
Pages
Each page is lazy-loaded, include a loading indicator.
Dashboard page
The dashboard page shows a summary of each data and a statistics overview.
Post list page
A clean list of posts with filtering, sorting, and pagination.
Post page
Album list page
A clean list of albums with filtering and infinite scroll.
Album page
Similar to other list pages, it has search and infinite scroll.
Photo list page
Photo page
User page
