WatchUrNetwork

Running the app

The simplest way to see the app is to visit the deployed app on GitHub pages.

To run the app locally:

1. git clone https://github.com/LasithaPrabodha/watch-ur-network.git
2. cd watch-ur-network
3. yarn install
4. npm start
5. Navigate to http://localhost:4200/

Instructions

Once the app is loaded you will see the New User Details form. Enter in the Name, Age, Weight, and Friends for the user and click the Add User button.

A series of charts will appear below the form that visualize the data you entered.

For your convenience you can click the Populate Random Data to fill in the form with random values for Name, Age, Weight, and Friends.

Running storybook for chart-cards-ui

Storybook is a great tool to see and interact with your app components in isolation.

1. npx nx run ui-chart-cards:storybook
2. Visit http://localhost:9009/ in your browser

Testing

Running e2e tests for the app

1. npx nx run my-friends-e2e:e2e
2. End-to-end tests for the application will run

Running unit tests

npm test

Libraries/Frameworks used

• Angular v11
  • Modules
  • Components
  • Services
  • Routing
    • Lazy-loading feature modules
    • Quicklink preload strategy
  • Reactive Forms
    • Form status change listeners
    • Form value change listeners
    • Form validation
  • Typescript v4 language
  • RxJS v6 reactive programming library
• NgRX v17
• Angular Material v11 component library
  • Material toolbar
  • Material card
  • Material text field
  • Material autocomplete
  • Material chips
  • Material progress par
  • Material icons
• Nx v17 dev tools for Angular
  • Storybook v18 component viewer/tester
  • Cypress v13 end-to-end test framework
    • cypress-image-snapshot v4 to catch visual regressions during e2e tests
  • Jest v29 unit test framework
  • ESLint v8
• NgxCharts v20 charting framework
• D3 v7 charting library
• Flexboxgrid v15 grid system
• angular-cli-ghpages v2 script for easy deployment to GitHub Pages

App / lib / module relationships

App / lib relationships

Modules relationships

Can be seen in Compodoc:

1. npm run compodoc
2. Visit http://127.0.0.1:8080/ in your browser