A web application designed to allow users to monitor their latest and all-time activity, hydration, and sleep data and to compare their health metrics and goals against the wider user base of the platform. Users can easily track their water consumption by inputting the amount of water they drink, and can view their weekly consumption in the app. Additionally, the app offers a unique feature that allows users to see their running data mapped out on a map.
- Javascript
- CSS & HTML
- Webpack module bundler
- Fetch API
- Mocha Javascript testing framework and Chai assertion library
- Charts.js
- Day.js
- Micromodal
- Leaflet
- Git/GitHub
- GitHub project board
- Figma and Adobe Illustrator for wireframing and vector graphics
- Navigate to This API
- Copy SSH key on GitHub inside the code dropdown
- Using the terminal, run git clone [SSH key here]
- Run npm install
- Run npm start
- Follow the setup instructions provided here to clone down and start the backend server where the user data APIs are held.
- Fork this repository to your GitHub account.
- Copy SSH key on GitHub inside the code dropdown.
- Using the terminal, run git clone [SSH key here].
- cd into the repository.
- Open it in your text editor.
- Run npm install
- Run npm start
- Click the hyperlink where the project is running to launch the application in the web browser or enter http://localhost:8080/ into your web browser.
Project Spec and Rubric Part One
Project Spec and Rubric Part Two
This application was developed for the Turing School of Software and Design's Module 2 group project. The project, Fitlit, was broken into two parts:
- The first challenged teams to store, manipulate, and display users' fitness data, accessed from a series of APIs, using a test-driven development approach;
- And the second asked teams to enable users to log new data to the relevant API; to improve the sites' accessibility using evaluation tools, the ARIA framework, and design principles; and to implement a unique extension feature. For this group, the feature selected was the ability for users to view the route of their latest run on a map, by using XML-formatted coordinate data hosted on an API.
The app presents users with a dashboard of their latest daily and all-time fitness metrics across three categories - activity, sleep, and hydration - and allows the user to:
- Compare their statistics against benchmarks of all users
- View dynamically-created infographics of their metrics over the past week.
- View the location and route of their last logged run.
- Log their water intake for a given date and view their updated all-time water consumption statistics.
- Successfully implemented the fetch API to fetch data asynchronously.
- Utilized third-party libraries, such as chart.js, Leaflet, and date.js, to enhance the user interface.
- Utilized GitHub project boards to organize tasks, update designs, and receive feedback from team members.
- Achieved 100% accessibility for the application through a Lighthouse audit.
- Utilized test-driven development to ensure high code quality.
- Collaborated effectively with the team.
- Resolved merge conflicts efficiently.
- Struggled to uniformly decide on a layout and design, but overcame this challenge through frequent communication, extensive planning and research, and ongoing updates to wireframes and project boards.
- Had difficulty understanding and implementing fetch calls.
- Faced a learning curve with both chart.js, and date.js third-party libraries, but successfully implemented methods to display user data.
- Interpreting XML coordinate data for users into readable data with third party library Leaflet.