Giter Club home page Giter Club logo

fit_lit's Introduction

Abstract

This is a user-friendly app inspired by fitness tracking apps like Fitbit or Strava as outlined in this project spec. Using remote data sets of users and their daily entries of information, we managed to integrate fitness and hydration logs into a dashboard to display for any user. The purpose of FitLit was to take user datasets and display it for individual users in an easy to understand visual representation. The dashboard allows a user to view and see their latest activity data, goals, and hydration intake.

Learning Goals

  • Use object and array prototype methods to perform data manipulation.
  • API fetch and post calls to retrieve and add new data.
  • Incorporating accessibility best practices into our design.
  • Implement feedback from a usability test to improve product.
  • Write DRY, reusable code that follows SRP and trends toward function purity.
  • Implement a robust testing suite using TDD.
  • Understanding closure functions and introducing them appropriately.
  • Collaborate productively and professionally as a team. Ensure all team members are able to be heard and contribute throughout the project.

Preview of App

Part One

Screenshot of Fit Lit App

Part Two

Screenshot of Part Two

Context

Tools

Javascript, HTML, CSS, NPM, Node.JS, GitHub, GitHub Projects, JSON, Webpack, Mocha, Chai, DayJS, WAVE

Timeline

This is a mod 2 student project done in two parts in a two week sprint by four people.

Collaborators

Installation

  • Click the green code button.
  • Copy the SSH link to your clipboard.
  • Open the terminal on your local machine.
  • Change into the directory that you wish to clone the app into with the cd command.
  • Install the npm dependency by typing npm install on the command line in terminal.
  • Start the webpack by typing npm start into the terminal.
  • Copy the link it provides that will look like this: http:localhost:8080
  • Paste that code into your web browser.
  • On a separate tab, navigate to this page which has the server that will be necessary to run on your local machine.
  • Follow the first steps of copying and cloning that SSH code into your terminal.
  • Run npm install and npm start.
  • You should see that the local server is now running and which provides the data to populate on the 8080 site.
  • Enjoy using an activity tracking application!

Wins

  • Learning how to implement fetch requests and no longer using local data files which involved creating a function that stored the data.
  • Posting new data for hydration.
  • Created and implemented a stopwatch timer with asynchronous Javascript.
  • Writing and implementing our first usability test, gathering information and using feedback.
  • Learning about Promises and promiseAll().
  • Learning about Webpack and how to utilize imports and exports.
  • Overcoming the challenges we faced using GitHib involved establishing new norms for more frequent communication and careful coordination of pushing and merging branches.
  • Keeping accessibility in mind during the app rendering phase on the DOM.
  • Utilizing GitHub projects and creating a board with issue tickets linked to pull requests.
  • Reaching out to mentors and having frequent checkins while learning new tools.

Challenges

  • TDD
  • Accurately POSTing new information with adequate error handling to guide the UX.
  • Developing a concept for a login which was a huge undertaking with refactoring our functionality.
  • Naming conventions and effectively tracking variables and functions across multiple files.
  • Understanding code written by others.
  • Utilizing iterator methods in our ES6 JS functions.
  • Moving from using local data files to using fetch calls to retrieve data.
  • PromiseAll() and missing a return that made us question our understanding of a new method.
  • Using Webpack to manage file structure and import / export statements between files.
  • Learning to coordinate collaboration using GitHub between four team members working simultaneously on multiple branches.

Future features could include:

  • Building user interactivity allowing them to not only add new input for one activity but also manipulate data.
  • Complete the login and develop a login view which persists for the user upon refresh.
  • Giving the user more information on login such as a motivational quote or a competitive incentive with other app users.

fit_lit's People

Contributors

wlavery22 avatar dsstevens avatar egaving avatar rsteckline avatar robbiejaeger avatar niksseif avatar hannahhch avatar brittanydionigi avatar khalidwilliams avatar hfaerber avatar dependabot[bot] avatar

Stargazers

 avatar  avatar

Forkers

wlavery22

fit_lit's Issues

Read Over Webpack and Watch Video #1

Watch Webpack video on youtube here to get information on how to import/export through bundle.

https://www.youtube.com/watch?v=GU-2T7k9NfI

https://www.youtube.com/watch?v=3On5Z0gjf4U&list=PLblA84xge2_zwxh3XJqy6UVxS60YdusY8

##Notes on Webpack##
Webpack is a powerful tool, which you’re encouraged to explore more (the Turing Webpack lesson plan is a great place to start). But there are a few things that you should know when starting to work with it:

You need to use import / export syntax
Note: This video goes into Babel and Rollup. Webpack handles the transpiling of our ESModules code into something the browser can read.
Webpack needs to know where to look for your files. Look here for a description of where webpack is set up to look for your HTML, CSS, JS and image files. Some general points:
You need to import images into the entrypoint file (usually scripts.js or index.js).
You need to import your CSS files into the entrypoint file too
Make sure HTML, JS and CSS files are all in the /src directory
You have to import any required modules and code for tests into your test files
While developing, run npm start. Webpack will create a live version of your site on a local server, where you can see your changes happen in real time. To access it, in your browser, navigate to the localhost address that your terminal gives you. Be aware, if you write a breaking change, your server may crash. The terminal will give you some error report about why the crash happened.
The command control + c is used to stop the local server. Just closing the terminal without stopping the server first could mean things continue to run in the background and cause problems. This command is not specific to Webpack; make note of it for future use.
Don’t worry about running npm build until you are ready to deploy your site

Do not run npm audit fix --force. This will update to the latest version of packages. We are not using the latest version of webpack (see starter-kit README for version) so updating to the latest version will cause problems.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.