Introduction
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: A .NET WebApi and an Angular app.
- You need to use Angular Material.
- You can choose whatever database solution you want: Sqlite, SQL server or whatever you're comfortable with.
- You can choose whatever ORM you want: Dapper, EF, ADO.NET.
- 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.
- Your list of sleep records should have pagination, so you're not loading all records every time you visualise the list.
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!
What you'll learn
- 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.
Review Repository
https://github.com/TheCSharpAcademy/CodeReviews.Angular.SleepTracker