This is an interactive web-based application that was developed to make the user's experience viewing their daily and weekly health stats simple. The user is presented with three sections on the right side of the page, all pertaining to their own personal data. They are able to view weekly averages with our custom graphs. The app will display their user information, along with their daily step and stride length. There is also a section that will display the user's current friends and some of their activity stats that will inspire the user to be more active. The user is able to rearrange the default UI by dragging and dropping the various info cards, and add new Hyrdation data to the dashboard.
We successfully implemented Chart.js as seen in the GIF below. This provides users with an overview of their daily and weekly stats for activity, hydration, and sleep. Our group utilized multiple types of graphs for what we believed to be the best visual representation for the user, along with customizing colors to make the app accessible and cohesive with the color themes.
NOTE - This app makes network requests to local server data. You will need to clone down two repositories, install dependencies for both, and run both in separate tabs within your terminal each time you run the app. Follow the below instructions.
- Open your terminal and navigate to where you would like to store the repositories. They will need to share a root folder.
- Open the local server data repo: https://github.com/turingschool-examples/fitlit-api
- Using the
SSH
key, pastegit clone git@github.com:turingschool-examples/fitlit-api.git
into your terminal. cd
into the server's repository on your local machine and runnpm install
ornpm i
to install project dependencies.- Run
npm start
to launch the API's server. - Open the app's Github repo: https://github.com/tialaaa/fitlit
- In a new tab within your terminal, paste
git clone git@github.com:tialaaa/fitlit.git
to clone using theSSH
key. cd
into the app's repository on your local machine and runnpm install
ornpm i
to install project dependencies.- Run
npm start
to launch this API's server. - Open the link to your local server (listed in your terminal) in your web browser to view the live page.
Control + C
is the command to stop running the local server. RunControl + C
in both terminal tabs to fully disconnect.
This project was completed in the 10th week of the Turing front-end software engineering program. We were required to synthesize technical information learned thus in the program, in addition to project management skills to create a fully functioning site. This project required additional research to implement new technologies.
- Use object and array prototype methods to perform data manipulation
- Implement ES6 classes with a complex data model
- Implement a robust testing suite using TDD
- Make network requests using the fetch API to retrieve and post data to a local server
- Create a user interface that is easy to use, clearly displays information, and follows best practices for accessibility
- Conduct a usability test and implement feedback to improve product
- Fetch API
- Chart.js 3rd party library
- Micromodal.js 3rd party library
- Webpack module bundler
- Git/GitHub/ProjectBoard
- JavaScript
- CSS
- HTML
- Mocha JavaScript testing framework
- Chai assertion library
- Test driven development
- Tiala: This was my first project that utilized a third-party library. As a group we felt it was necessary to visually display some of the user’s data, and the chart.js library allowed us to do so. The charts make it easier to digest the information while adding visual interest to the page. We used a CDN (content delivery network) to integrate chart.js within our project’s repository.
- Jacob: This was my first project utilizing fetch and get and learning how to manipulate data from API’s. It was 100% a rocky start but once it clicked it clicked, learning that once we pull the API’s only THEN could we utilize the information was really cool to me!
- Michael: The order of operations. Being able to set up a basic framework, TDD, fetch data, and then display all that data on the page before getting too heavy with css proved to be a really nice/clean workflow.
- Sara: fetching data via GET, posting data via POST, utilizing a third-party library called chart.js and installing its packages, writing tests using TDD, manipulating data via iterator methods, understanding class-to-class interaction, importing/exporting files with correct syntax, being comfortable with writing HTML and CSS from scratch
- Tiala: Using the fetch method for API calls brought challenges to this project. Since this was another new concept, it took some trial and error to fully understand how Promises work and how to utilize the information returned in a Promise.
- Michael: Utilizing the promise.all and understanding what was happening took some research and resources. There were some bugs in a couple of our methods that took a lot of time to figure out why our page was displaying incorrect data.
- Sara: Using Promise.all for fetched data, discussing code more in-depth with my teammates and being on the same page as them in terms of thought processes
- Group: Implementing HTML5's native drag-and-drop features for UI rearrangement, while making sure the Charts still rendered correctly after rearranging the widget cards.