Git Product home page Git Product logo

weight-tracker-boilerplate's Introduction

This project is a starting point for the weight tracker sample application.

The Goal

The goal of this project is to create a simple react application with 2 pages. The app allows multiple users to track their weight over time. There is no need to implement authentication or authorization. Feel free to use basic styling libraries or roll your own. You are also able to add 3rd Party libraries for things such as charting if you desire. It is perfectly accpetable to use localstorage to save the data if you do not want to implement a backend. Be creative! Show us what you got!

Note

Please include some sample data so that the app is not empty to begin with. For example, 2 users with 10 weight measurements each.

Users Page

The users page should display a list of users. The list shows basic information about the user such as name, age, and current weight. The page should also allow you to create a new user.

Selecting a user from the list takes you to the weight page for that user.

Weight Page

The weight page displays the users name, current weight, and any other information you would like in a meaningful way at the top of the page. It also displays a graph of a users weight over time. This can be a simple line chart or something more complex if you have a better idea.

You also need to be able to add a new weight for the user. This can be as simple as adding their weight for a specific day or as complex as reading in a csv.

Running the project

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

weight-tracker-boilerplate's People

Contributors

jmoore1127 avatar

Watchers

James Cloos avatar Troy Shields avatar Jonathan K. Stevens avatar greywolf avatar fiveateooate avatar  avatar

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.