leroix / grocery-bliss

Starter repo for Udacity Fullstack Nanodegree capstone project

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

This repo contains the frontend UI for which you'll be designing and implementing a RESTful API. Here's a demo of the user experience that your API will make possible:

grocery-bliss-demo

Getting Started

First, you'll need a https://github.com/ account. Head to https://github.com/settings/developers and create a new OAuth App. Use "http://localhost:3000" as the "Authorization callback URL". You'll need the "Client Id" and "Client Secret" later.

Frontend

It will be helpful to use https://github.com/creationix/nvm to manage your node.js versions. This project uses v8.9.4. cd ./frontend and run npm install. Make sure that REACT_APP_GITHUB_CLIENT_ID is set in your environment (i.e. export REACT_APP_GITHUB_CLIENT_ID=<your github client id>). Run npm start and a browser tab should open with the GroceryBLISS login screen.

Backend

The backend requires the following environment variables to be set:

  • FLASK_APP=app.py
  • GB_DEBUG=true
  • GB_GITHUB_CLIENT_ID
  • GB_GITHUB_CLIENT_SECRET

You may wish to use https://github.com/pyenv/pyenv to manage your python versions. This project uses python 3.6. You might also want to use https://github.com/pyenv/pyenv-virtualenv to manage your python virtual environments.

cd ./backend and run pip install -r requirements.txt to install the backend's dependencies. To start the server, flask run_connexion.

Using the app

Once you have both the backend and frontend running, you should be able to login using github. The app will be saving all state to local storage. You will make the app collaborative as shown in the gif by implementing the backend api and changing https://github.com/leroix/grocery-bliss/blob/master/frontend/src/Network.js to use your api.

About

Starter repo for Udacity Fullstack Nanodegree capstone project


Languages

Language:JavaScript 87.7%Language:Python 6.8%Language:HTML 3.0%Language:CSS 2.6%