/FSND_03_Coffee_Shop_Full_Stack

My submission for the third project of Udacity's full-stack developer nanodegree.

Primary LanguageTypeScript

Coffee Shop Full Stack

Full Stack Nano - IAM Final Project

Udacity has decided to open a new digitally enabled café for students to order drinks, socialize, and study hard.

The application can:

  1. Display graphics representing the ratios of ingredients in each drink.
  2. Allow public users to view drink names and graphics.
  3. Allow the shop baristas to see the recipe information.
  4. Allow the shop managers to create new drinks and edit existing drinks.

About the Stack

It is designed with some key functional areas:

Backend

The ./backend directory contains a completed Flask server with a pre-written SQLAlchemy module. You will need to configure and integrate Auth0 for authentication.

Getting Started

Installing Dependencies

Python 3.7

Follow instructions to install the latest version of python for your platform in the python docs

Virtual Environment

We recommend working within a virtual environment whenever using Python for projects. This keeps your dependencies for each project separate and organized. Instructions for setting up a virtual environment for your platform can be found in the python docs

PIP Dependencies

Once you have your virtual environment setup and running, install dependencies by navigating to the /backend directory and running:

pip install -r requirements.txt

This will install all of the required packages we selected within the requirements.txt file.

Key Dependencies

  • Flask is a lightweight backend microservices framework. Flask is required to handle requests and responses.

  • SQLAlchemy and Flask-SQLAlchemy are libraries to handle the lightweight sqlite database. Since we want you to focus on auth, we handle the heavy lift for you in ./src/database/models.py. We recommend skimming this code first so you know how to interface with the Drink model.

  • jose JavaScript Object Signing and Encryption for JWTs. Useful for encoding, decoding, and verifying JWTS.

Running the server

From within the ./src directory first ensure you are working using your created virtual environment.

Each time you open a new terminal session, run:

export FLASK_APP=api.py;

To run the server, execute:

flask run --reload

The --reload flag will detect file changes and restart the server automatically.

Frontend

The ./frontend directory contains a complete Ionic frontend to consume the data from the Flask server. You will only need to update the environment variables found within (./frontend/src/environment/environment.ts) to reflect the Auth0 configuration details set up for the backend app.

Getting Setup

tip: this frontend is designed to work with Flask-based Backend. It is recommended you stand up the backend first, test using Postman, and then the frontend should integrate smoothly.

Installing Dependencies

Installing Node and NPM

This project depends on Nodejs and Node Package Manager (NPM). Before continuing, you must download and install Node (the download includes NPM) from https://nodejs.com/en/download.

Installing Ionic Cli

The Ionic Command Line Interface is required to serve and build the frontend. Instructions for installing the CLI is in the Ionic Framework Docs.

Installing project dependencies

This project uses NPM to manage software dependencies. NPM Relies on the package.json file located in the frontend directory of this repository. After cloning, open your terminal and run:

npm install

tip: npm i is shorthand for npm install

Required Tasks

Configure Enviornment Variables

Ionic uses a configuration file to manage environment variables. These variables ship with the transpiled software and should not include secrets.

  • Open ./src/environments/environments.ts and ensure each variable reflects the system you stood up for the backend.

Running Your Frontend in Dev Mode

Ionic ships with a useful development server which detects changes and transpiles as you work. The application is then accessible through the browser on a localhost port. To run the development server, cd into the frontend directory and run:

ionic serve

tip: Do not use ionic serve in production. Instead, build Ionic into a build artifact for your desired platforms. Checkout the Ionic docs to learn more

Authentication

The authentication system used for this project is Auth0. ./src/services/auth.service.ts contains the logic to direct a user to the Auth0 login page, managing the JWT token upon successful callback, and handle setting and retrieving the token from the local store. This token is then consumed by our DrinkService (./src/services/auth.service.ts) and passed as an Authorization header when making requests to our backend.

Authorization

The Auth0 JWT includes claims for permissions based on the user's role within the Auth0 system. This project makes use of these claims using the auth.can(permission) method which checks if particular permissions exist within the JWT permissions claim of the currently logged in user. This method is defined in ./src/services/auth.service.ts and is then used to enable and disable buttons in ./src/pages/drink-menu/drink-form/drink-form.html.