This application randomly fetches data on one of 50 users and their daily metrics for hydration, steps, sleep and miscellaneous activities. Daily and weekly data is then displayed on the dashboard, where they can also see their friends' daily step goal. Users can also post new data to their profile.
The goals of this project were to:
- Implement ES6 classes that communicate to each other as needed and utilize inheritance.
- Use object and array prototype methods to perform data manipulation.
- Create a dashboard that is easy to use and displays information in a clear and accessible way.
- Write modular, reusable code that adheres to SRP (Single Responsibility Principle) and DRY (Don't Repeat Yourself).
- Implement a robust testing suite using TDD.
- Make network requests to retrieve and post data.
- Clone the repo down to your machine.
- Clone the server repo here.
- Open the root folders for both repos in your terminal and enter
npm installon both to install the dependencies. - In your terminal run
npm starton both repos to initialize the server and webpage. - Go back to your browser and enter https://localhost:8080 in the search bar to access the frontend of the application.
Link to Project Demo Video
- Implementing fetch API
- Using ES6 and iterator methods in our JS
- Importing the fetched data to our JS file
- Error handling duplicate data for a specific date
- The design of the website
- The team coming together and working smoothly with GitHub tools
- Created responsive charts using Chart.js
- Implement sleek 'flip card' interface
- Class inheritance
- Javascript
- HTML, CSS and Sass
- Node.js & NPM
- Chart.js
- Webpack
- DRY up some of the Javascript
- Optimize code for faster load times and performance
- Check some elements of accessibility, including testing with a screenreader
- Flesh out sad path testing
- Enable visiting other user pages
- Add login and authentication