/Goal_P

Primary LanguageJavaScript

Goal{P}

Goal{P} is a passion project made by Stephen Vertucci. The GOAL of this app is to make tracking your water intake simple and efficient. No need to add age, height, calories, or workout metrics. This is simply for water. You create your account, set your daily goal of water you want to drink in ounces and begin to add data.

To see the fully functional site, please visit: DEPLOYED VERSION OF APP

Prerequisites

Installation

  1. Create a database named goalp,
  2. The queries in the tables.sql file are set up to create all the necessary tables and populate the needed data to allow the application to run correctly. You will run the two insert tables, and then the lines of code to add additional columns (This will be changed in the future). The rest of the SQL code is meant foor artificial injection of data.

The project is built on Postgres, so you will need to make sure to have that installed. We recommend using Postico to run those queries as that was used to create the queries,

  1. Open up your editor of choice and run an npm install
  2. Run npm install @mui/material @emotion/react @emotion/styled to be able to work on the styling
  3. Run npm run server in your terminal
  4. Run npm run client in your terminal
  5. The npm run client command will open up a new browser tab for you!

Usage

How does someone use this application? Tell a user story here.

  1. So to begin someone would use the app by creating an account on the login screen
    • They will create a username, password, and set their daily goal of water to drink in OZ
  2. Once they create their accounrtthey will be brought to the account screen, here they can change their daily amount if needed
  3. To begin tracking water intake the User will navigate to the Track page on the navbar
  4. Once here they can enter whatever amount of water in OZ to add. Simply press the quick inputs or + and - signs and then hit the cup icon
  5. When you see the progress bar add or subtract that means your submission is complete
  6. To look at their History, the User will navigate to the History component
  7. Here They can see their compiled data in a chart and graph
    • The Chart will allow Users to delete submissions they added in error or if they just want to remove
    • The graph will show their daily goal as a dotted red-line, and then plot point for each day's total water intake

Built With

  • Javascript
  • React w/ Redux
  • Node and Express
  • Axios
  • PostGreSQL
  • HTML
  • CSS
  • Material UI

Acknowledgement

Thanks to Prime Digital Academy who equipped and helped me to make this application a reality.

Support

If you have suggestions or issues, please email me at