The goal of this assignment is to showcase your skills and coding style while building an enterprise grade Angular application. You may take your time with this assessment to show case your skills. Once you have it working you can add some extra flare with unit testing, e2e testing with playwright, updated styles to make it snazzy, or whatever else you feel like.
Tip
State Management - We have included all of the @ngrx
packages but you're welcome to use any state management library you see fit or just stateful services.
Component Library - We have included @angular/material but you're welcome to use any component library that suites your needs. Ex: PrimeNG
Caution
DO NOT FORK THIS REPO - Instead click the Download Zip.
- Install packages with
npm i
- Serve the application using
npx nx run angular-task:serve
- You're off to the races coding! Good luck!
Tip
NX Generators - you're more than welcome to modify the NX Generators section inside of the nx.json
file with any changes you prefer for your setup.
- @nx/angular:component Documentation Create an angular component using
npx nx g @nx/angular:component
- Create an angular service using
npx nx g @nx/angular:service
- @nx/angular:pipe Documentation Create an angular pipe using
npx nx g @nx/angular:pipe
- @nx/angular:directive Documentation Create an angular directive using
npx nx g @nx/angular:directive
- @nx/angular:library Documentation Create an angular library using
npx nx g @nx/angular:library
- Home page should show a card view of users from JSONplaceholder. The home page should allow you to click on a users card to navigate to their profile page.
- The profile page should use the angular router and exist at
/users/:id
and display all of the user information for the id in the route path. - Add filter(s) to the home page to allow the user to filter the list.
- Add a way to favorite users in both the card view and detail page.
- Run the following command to verify that your changes lint, test, and build correctly:
npx nx affected -t lint test build
.
Please submit a link to your public github repo and approximately how long it took you to complete this task. We will have a panel to discuss your desicions and design patterns.