randygitprojects / fit-lit

FitLit project starter kit for students

About

Fit Lit is a locally-hosted, web-based application designed to help users track, log, and visualize their personalized fitness data. The dashboard-style interface allows users to access statistics in three broad categories-- activity, hydration, and sleep. Within each of these three categories, users can dig deeper to see information related to their daily, weekly, and all-time data.

---

Set Up

Installing the files

• Fork this repository to your GitHub account.
• In your forked respository, click the code drop-down menu and copy the SSH key.
• On your local machine, open the terminal using ⌘ + space and navigate to the location you'd like the flashcards repository directory cloned to.
• Once you're there, run git clone [SSH Key] [Fit-Lit] via the command line.
• Run npm install.

Opening the application

• When you're ready to use the app, open the terminal and navigate to the Fit-Lit directory via the terminal.
• In the terminal, use command+t to open a new terminal tab.
• In the new terminal tab, run npm start.
• Once WebPack has compiled the necessary resources, you will see a link within the text of your terminal. You can copy and paste that link into your browser to access a locally-hosted version of this application on your machine.

---

Preview

---

Contributors

Randy Cisneros GitHub | LinkedIn

Dustin Gouner GitHub | LinkedIn

Em Lindvall GitHub | LinkedIn

Kelli Watkins GitHub | LinkedIn

---

Context

This application was built while all colloborators were Mod 2 students at Turing School of Software and Design Front End Web Development program, a four- module, seven-month course focused on preparing students for a career as web developers working with Javascript, HTML, CSS, and the React framework. The application was built over the course of ten days, and completed with the Project Specification and Rubric in mind. Fit Lit accesses remote serve data, and was written utilizing JavaScript, HTML, CSS, and WebPack bundler. The development process leaned heavily on test-driven development, especially in its earliest stages. This project is Part 1 of a longer

---

Goals and Challenges

The big-picture goal of this project was to synthesize and show our learning as new developers. Building the FitLit application tied together all of the skills, technologies, and tools that we've become familiar with, challenging us to implement our learning on a broader scale and deeper level than in any previous Turing project. We were also required to integrate a few tools and functionalities that were completely new to us-- primarily fetching API data and utilizing the bundler WebPack. and building out data visualizations in JS Chart. The learning curve in using these new tools was steep, and our group initially struggled specifically with importing and exporting fetched data, and later with reconciling data returns with the types of datasets needed to correctly populate a readable, functional chart graphic. Our team was also new to iterators, and although utlilzing them was challenging at times, we were always able to put our heads together figure it out.

Future Development Opportunities

Ultimately, our team would like to strengthen the Fit Lit app to include additional functionality, stronger accessibility, and more interactable elements. Given additional time, we would have liked to display several other datapopints graphically-- for example, on the steps chart, we'd like the chart to indicate whether a user made their steps goal for that date on mouseover. We also discussed displaying a user's overall steps for the week and overall sleep for the week within their respective charts. Accessibility-wise, our team has plans to tackle stronger accessibility features like screen-reader compatibility and keyboard navigation in Part 2.