Explore the world of Angular and NgRx with Code quest, a single-page application (SPA) that showcases key features in frontend development.
User is available to run application, then:
- visit paginated page with books
- perform search for book's name
- add/remove book to/from favorites
- visit page with book detail
- visit page with favorite books
- remove book from favorites
IMPORTANT
Out of demo purpose, all functionality related to favorite books is stored locally in the browser. Please note that page refresh or server restart will cause DATA LOSS of all favorite books.
- complete UI styling with responsiveness (mobile and desktop, starting with mobile first), having good UX in mind
- modules (books, shared and design system) with lazy loading
- layout (header with navigation, footer and main)
- components (prefixed with
cq(i.e. code quest), e.g. cq-breadcrumbs to potentially avoid conflicts with other libraries, all components are using onPush strategy detection)- breadcrumbs
- pagination
- generic error
- book
- book list
- book detail
- routing with page components
//books(accepts page query parameter, e.g./books?page=2)/books/detail/:id/books/favorite/design-system
- services (books and favorite books)
- store (books, book detail and favorite books (using actions, effects, reducers and selectors))
- pipes (divider and numeric list)
- icons with lazy loading
- mocks (used at design system page and unit tests)
- basic unit tests for creation
- utility functions
- generated documentation of application parts
project-root/
│
├── client/
│ └── ...
│
└── api/
└── ...To have better understanding of application parts and details, run
yarn compodocand visit http://127.0.0.1:8080.
You can read more at official page of compodoc.
An API of Ice And Fire has been used to provide mock data.
- Clone the repository:
git clone https://github.com/ZigaVukcevicDev/code-quest - Change to the project directory:
cd code-quest - Install dependencies:
- For the client:
cd client && yarn install - For the API:
cd api && yarn install
- For the client:
cd client
yarn startcd api
yarn start:devVisit
- http://localhost:4200 for the client and
- http://localhost:3000 for the API.
Visit http://localhost:4200/design-system for styling guides, representations of elements or components which you can reuse.
This page is always a good entry point to continue development. If you develop something new, please add it to the page, so next developer can pick it up.