Health Challenge Tracker

# Challenge outline - Health Challenge Tracker ## Design an Angular 14+ single-page application (SPA) that takes inputs - User name - Workout Type - Workout minutes  ## Display the user workout list with the below functionalities - Search by name - Filter by workout type - Pagination  ## **Optional feature →** Display the workout progress using charts  <aside> 💡 **The screenshots are for representation purposes, feel free to beautify them as needed!** </aside> # References & Requirements - Create a **new repository** for the assignment - There should be input fields to **add the user**, **workout type**, and **minutes** with a **button** - The users added should be displayed as a **table grid** - There should be an option to **search by username** and **filter by workout type** - You can store the data using **`localStorage`**, for example: ```jsx userData = [ { id: 1, name: 'John Doe', workouts: [ { type: 'Running', minutes: 30 }, { type: 'Cycling', minutes: 45 } ] }, { id: 2, name: 'Jane Smith', workouts: [ { type: 'Swimming', minutes: 60 }, { type: 'Running', minutes: 20 } ] }, { id: 3, name: 'Mike Johnson', workouts: [ { type: 'Yoga', minutes: 50 }, { type: 'Cycling', minutes: 40 } ] }, ...... ] ``` - You can have the **initial** data with 3 users added to the list by default - There should be **pagination** added for more than 5 users - The assignment **must contain unit tests** for **1 component and 1 service** with **100% code coverage** with the `code coverage` report added in the **README** - You can use libraries like [angular material](https://material.angular.io/), [primeNG](https://primeng.org/), etc - **Host your SPA** on any cloud service you choose (Heroku, Netlify, Github Pages, etc - If you don't have an account, you can sign up for free). - As a bonus feature → Add charts to display the workout of users <aside> 💡 Please make sure that all of the points mentioned above are taken care of. </aside> ### Notes - The assignment has to be done in the Angular 14+ framework. - You're free to make assumptions, please make sure they are mentioned in the README. - You're free to use additional libraries that work with Angular 14+. - Design is for representation purposes only, you are free to modify it, but all the functionalities shown in the design (and as listed in requirements) should be present. - Make sure all edge cases are thought through and handled. - Make sure all bugs are taken care of - Styling is to be done with [Tailwind](https://tailwindcss.com/) ### Deliverables - A Github repo link(public) of your solution, with a README to run and check things locally. - Link to the hosted Web App. ### What do we look for - If best practices are followed - How well-formed is the Folder Structure - Code Readability / Clean Coding principles adhered to or not - If edge cases are handled properly in the implementation - The visual appeal of the implementation ## **Submission** Please fill out this form with the details of the public link of the repository containing the application and test cases, the deployed application, and your resume. Also, Please record a video introducing yourself. <aside> 💡 Upload the video to Google Drive and share the public access link. Please verify if the video is visible to anyone with the link. </aside> We also want to hear your thoughts on your recently completed assignment. Keep the video under 2 minutes. Mention the following points in the video: 1. Introduce yourself. You can include: a. Personal details like name, education, hobbies, etc. b. Will you be available for a full-time internship for 6 months? 2. What was the most challenging part of the assignment? 3. If you were to change anything about the assignment, what would it be? https://forms.gle/4ShCinKJPEVTU7pQ8  P.S. Please feel free to contact shishira.ms@fylehq.com if you have any questions, and remember to have fun with the assignment.