Sleep Tracker
Your second Angular project has the objective of solidifying the knowledge you gained from the Coffee Tracker. Even though Angular is a beginner-friendly framework, it’s still a lot to take in, and if you’re coming from a C# background, there are a few things to get used to. But don’t worry! You will still be challenged. We’re building on the first project with two extra challenges.
In this project you’ll log data about your sleep, either manually inputting your time in bed or using a timer to automatically log it. Dealing with time is always a challenge and great practice. Also, you’ll be using Angular Material, a powerful UI component library ubiquitous in enterprise Angular projects. This is a massive library that does take some time to learn, but once you master it, it becomes extremely easy to build interesting and great-looking UI components. You’ll be saying goodbye to Bootstrap!
Requirements
This is an application where you should record sleep time.
You should create two projects: An ASP.NET Core/EntityFramework WebApi and an Angular app.
You need to use Angular Material.
You should have a filter functionality, so I can show records per type and or date.
Your database should have a single 'Records' table.The objective is to focus on Angular, so we should avoid the complexities of relational data.
This app needs to have a timer that will log your sleep once stopped and saved.
Users should also be able to input their sleep time using a form.
Every action performed in the app should prompt a 'Toast' notification indicating success or failure.
Your list of sleep records should have pagination, so you're not loading all records every time you visualise the list.
This app should be mobile-first, since realistically , most users will use it from their phones.
Your app should contain integration tests for the services that are interacting with the database, and unit tests where you find applicable.
Your repository should contain a Postman collection with all endpoints documented for easy testing.
Resources
Angular Material can be tricky at first, but trust us, you’ll learn to love it and once you master it, you will never look back. But as always, reach out in our Discord community if you get stuck!
Tips
When building your timer, I suggest you have a pause, play, stop and save buttons for better user experience.
If you get stuck implementing Angular Material in your project, take a step back and build a couple of simple purely front-end projects from Youtube tutorials.
Since tests are part of the requirements, we suggest you write the tests as you go, instead of leaving it to the end. The tests will help you write more clean and maintainable code and it can be hard (technically and psychologically) to refactor your web api after it's finished.
Comments
0 comments
No comments yet. Start the conversation.