RA
Rahul Adepu

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 ![Screenshot 2024-06-26 at 7.07.32 PM.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/983632c5-ee66-4f64-a1a6-b3eeff04ddb8/ee41a1b6-8f4f-490b-ba52-21645a810c4c/Screenshot_2024-06-26_at_7.07.32_PM.png) ## Display the user workout list with the below functionalities - Search by name - Filter by workout type - Pagination ![Screenshot 2024-06-26 at 7.03.56 PM.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/983632c5-ee66-4f64-a1a6-b3eeff04ddb8/7242334b-2558-493a-bc17-23e030c03a68/Screenshot_2024-06-26_at_7.03.56_PM.png) ## **Optional feature →** Display the workout progress using charts ![Screenshot 2024-06-26 at 7.04.49 PM.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/983632c5-ee66-4f64-a1a6-b3eeff04ddb8/b6b3374d-6c11-4802-912a-28b8eb669c69/Screenshot_2024-06-26_at_7.04.49_PM.png) <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.

Prompt
Component Preview

About

Build a comprehensive Angular 14+ SPA for tracking workouts, managing users, and visualizing progress with charts. Fully responsive with Tailwind CSS.

Share

Last updated 1 month ago