This is the code challenge I was given, see the Coding Assignment for more details.
Build a ticket managing app, where the user can add, filter, assign, and complete tickets.
There are three screens:
- Home (starting point)
- Tickets (list of all tickets, click ticket link to go to detail page)
- Ticket detail (view ticket, update or delete)
For styling I used Angular Material.
The Angular router manages transitions between the screens.
My preference is for Lazy loading Feature Modules so I used this where relevant.
It was suggested to use NgRx for state management. However, due to time constraints I chose not to since this is such a basic application that using state management would be a bit of an overkill.
Here is a high level view of the project.
.
├── app
│ ├── pages
│ │ ├── home
│ │ └── tickets
│ │ ├── create
│ │ └── detail
│ ├── services
│ │ └── backend.service.ts
│ └── shared
│ └── components
│ ├── footer
│ ├── header
│ └── spinner
└── assets
└── images
├── favicon.png
└── logo.svg
The backend is a mock server api which uses in memory static data (tickets and users).
When making calls to the server API and an exception occurs, we handle this by returning a default "safe" value and displaying the error, for now just logging a message to the console.
ngOnInit(): void {
this.tickets$ = this.backend.tickets().pipe(
catchError(err => this._handleError('tickets'))
);
}
// Private
private _handleError(fn: string) {
console.log(`backend.${fn}() failed`);
return of([]);
}
$ ng lint
$ ng test
$ ng e2e
Focusing on the assignment instructions, I spent in total two evenings and part of a day. When nearing completion, I happened to look at the original email again and discovered that there was a time indication of 2.5 hours, oh dear. Sorry about that.
Kiffin Gish
kiffin.gish@planet.nl