The simplest way to see the app is to visit the deployed app on GitHub pages.
To run the app locally:
git clone https://github.com/LasithaPrabodha/watch-ur-network.git
cd watch-ur-network
yarn install
npm start
- Navigate to http://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.
npx nx run ui-chart-cards:storybook
- Visit http://localhost:9009/ in your browser
npx nx run my-friends-e2e:e2e
- End-to-end tests for the application 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 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
Can be seen in Compodoc:
npm run compodoc
- Visit http://127.0.0.1:8080/ in your browser