Skip to content

WebApp where you can save a daily record of what you eat from a curated list and check your recommended calories based on height, age, and weight

Notifications You must be signed in to change notification settings

YoseptF/my-eat-list-frontend

Repository files navigation

My Eat List

Track what you eat!!!

header


With this app you can save a daily list of wht you eat from a list, and check your recomended calories based on height, age and weight.


IMPORTANT NOTE: This app uses 3rd-party cookies, so it might not work on more private browsers, as they tend to block 3rd-party cookies by default, so you might need to disable your adblocker while testing this one, sorry D:

At least in Brave Browser, I had to allow 3rd party cookies

Try it out!!

You want to try it out without any installation? YOU CAN! Just check out the live version.

Development Setup

Steps:

  • Clone this repo:
$ git clone [email protected]:YoseptF/my-eat-list-frontend.git
  • Move to the lastest branch:
$ git checkout [branch name]
  • Install the dependencies:
$ npm install
  • Run the developer server:
$ npm start

You are gonna need some api keys to populate your .env, you can get them here:

There are 2 way you can run this program locally:

  1. You can run the backend on your machine at the same time, for that you're gonna need to:

    • Follow the steps over: here
    • set the env so that it looks like this:
     REACT_APP_CLIENT_ID={IMGUR_API_KEY}
     REACT_APP_BACKEND_URL=https://localhost:4000
    
    • And run npm start
  2. You can let the frontend connect to the backend on the live version, although this has some caveats, to connect with the online api you need to be on a secure conection, this means opening the react developer server on https instead of http and this may cause your browser to give you an alert like this one

    in this case you need to click on advanced, and enter the page, It should only happen the first time.

    Another viable option is to sign it yourself, in which case you can follow the official docs here. But I HIGHLY recommend to just enter manually, and save the time, the code is open source, so there's nothing harmful in the code.

    After you choose what to do with the 'ssl-situation':

    • set the .env to be like this:
    REACT_APP_CLIENT_ID={IMGUR_API_KEY}
    HTTPS=true
    REACT_APP_BACKEND_URL=https://my-eat-list-backend.herokuapp.com
    
    • And run npm start

Build with

About

WebApp where you can save a daily record of what you eat from a curated list and check your recommended calories based on height, age, and weight

Topics

Resources

Stars

Watchers