Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Screen capture


This is a case study project for a series of articles I'm writing about developing webapps based on Redux. It is not finished yet, nor the articles. It is based on my recent blog article "Web app architecture based on Redux" (also on Medium). The articles:

Project Subject

The project is a webapp for making online exams or quizzes:

  • Read the exam data from a server
  • Allow single and multi-option answers, no open/text answers
  • Time the examination using a server side timer
  • Allow the user to finish the exam earlier
  • Evaluate answers at the end and give result
  • Mock the server on the client side, including exam data.


The project uses the following technologies:

  • Angular 4
  • AngularCLI, AoT and Lazyloading
  • RxJS used extensively
  • @ngrx/store (Redux implementation)
  • @ngrx/effects (side effects) for main business logic
  • Bootstrap 4 for base web design and components
  • Karma/Jasmine unit tests
  • Protractor end-to-end tests

Also uses two small packages (also mine):

  • router-store-ser: An (sort of) extension to @ngrx/router-store providing router serialization and a navigation action. This allows for ReduxDevTools time travel to work.
  • match-observables: A simple function to implement a comparison between an observable and an array of values.

The project uses a customized AirBnb Style Guide. My "AirBnb Style Guide" adoption is recent, so this project is surely not fully compliant (besides the customization). Only what is enforced by TSLint is fully compliant.

Linting is enabled and rules are modularized.


  • Business models. Done.
  • Plan redux state. Done.
  • Plan redux actions and reducers. Done.
  • Plan redux effects. Done.
  • Init Angular CLI app. Done.
  • Exam Angular module, routing, lazy loading. Done.
  • Redux state. Done.
  • Redux actions. Done.
  • Redux reducers. Done.
  • Redux effects and data services. Done.
  • Containers, components, styling. Done.
  • General Review. In progress.

Development server

Run npm run serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.


Run npm run build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.


Run npm run lint to lint the project. Read more about the configuration for customized AirBnb Style Guide

Running unit tests

Run npm run test to execute the unit tests via Karma.

Running end-to-end tests

Run npm run e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via npm run serve.


This is a case study project of a webapp based on Redux using Angular.






No releases published


No packages published