💪🏼 FitLit! 💪🏼

A Front End Engineering Project by:

• Jani Palomino
• Nate Ewert-Krocker
• Regan Losey
• Susanna Carey

Project Manager: Cassandra Torkse

Formal Code Review by: Mike Limberg, Rachel Williams, and Katie Scruggs

---

Project Overview:

Our group was given a basic code foundation to add to in order to create an interactive fitness tracker that allows a user to track their lifestyle activities over several categories including water intake, amount and quality of sleep, and physical activity.

We accomplished this by applying our accumulated knowledge of Front End Engineering combined with a variety of newly introduced concepts such as Webpack, network requests and responses, 3rd party NPM dependencies, and Test Driven Development using the Mocha and Chai.

---

Functionality:

With the Fitlit application, the user can keep track of a multitude of health and fitness metrics. Widgets will display a visual representation of the user's daily and weekly water intake, daily step goal and the average step goal of their community, as well as the measurements of their daily and weekly hours slept and sleep quality. The user can also update these metrics for the current day in the "Daily Overview" section.

🎥 Take a look at our Video Demo!

Click on the video below to view a live demo

Accessibility:

We designed our Fitlit app to mobile response, readable on a screen reader, and tabable if a user is navigating it without a mouse. See examples below.

Techologies Used:

• JavaScript
• HTML
• SASS
• Mocha & Chai
• Node.js
• VSCode & Atom
• Lighthouse

Installation and Setup:

To navigate the website live, a server download is required.

1. Download the necessary server and API here
2. Cd into the server directory and then into the fit-lit-api directory.
3. In the command line, run npm start

Then clone down this repository

1. In your command line, cd into your local directory and clone down this repository -
   git clone https://github.com/janitastic/fitlit
2. Install the necessary package dependencies -
   npm install
3. Run the command npm start
4. With both the server running and this package, and visit http://localhost:8080/ in your browser.

Future Enhancements :

• Integrate functionality to update displayed info with the input added from the user in the sleep, activity and hydration fields.
• Add functionality for a user to create a new profile with a login and password.
• Allow user to create their own sleep, hydration, and activity goals.
• Add more elements like a profile photo to the user profile.
• Customizable theme templates.

Resources:

• Rubric and Project Specifications - Part 1
• Rubric and Project Specifications - Part 2
• Chart.js