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/tw3/ngx-friends.git
2. cd ngx-friends
3. yarn install
4. npm start
5. Navigate to https://localhost:4200/

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.

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

1. ng run chart-cards-ui:storybook
2. Visit https://localhost:4400/ in your browser

1. npx nx run ngx-friends-e2e:e2e --watch
2. Wait for the cypress test window to launch
3. Click "app.spec.ts"
4. End-to-end tests for the application will run

1. npx nx run chart-cards-ui-e2e:e2e --watch
2. Wait for the cypress test window to launch
3. Click any of the spec.ts links
4. End-to-end tests for the chart cards will run

1. npx nx run shared-ui-e2e:e2e --watch
2. Wait for the cypress test window to launch
3. Click any of the spec.ts links
4. End-to-end tests for the chart cards will run

npm test

• 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 v11
• Angular Material v11 component library
  • Material toolbar
  • Material card
  • Material text field
  • Material autocomplete
  • Material chips
  • Material progress par
  • Material icons
• Nx v11 dev tools for Angular
  • Storybook v11 component viewer/tester
  • Cypress v6 end-to-end test framework
    • cypress-image-snapshot v4 to catch visual regressions during e2e tests
  • Jest v26 unit test framework
  • ESLint v7
• NgxCharts v17 charting framework
• D3 v4 charting library
• Flexboxgrid v6 grid system
• angular-cli-ghpages v1 script for easy deployment to GitHub Pages

Can be seen in Compodoc:

1. npm run compodoc
2. Visit https://127.0.0.1:8080/ in your browser
3. Click "Modules" in the left navigation