Item Catalog

This is my project submission for Udacity's Full Stack Web Developer nanodegree's item catalog project. The goal of the project was to develop an application that provides a list of items within a variety of categories as well as to provide a user registration and authentication system. Registered users have the ability to post, edit and delete their own items. For every item, the website also offers a JSON endpoint. In order to access this endpoint, simply add 'JSON/' to the end of the URL for a specific item.

Outline

1. Demo
2. Screenshots
3. Backend
4. Frontend
5. Interactive
6. Run on your Own

Demo

A live demo of the project hosted by heroku is avaliable at https://item-catalog-proj.herokuapp.com. Please give the page 20 seconds to startup because the free heroku web dyno goes to sleep after 30 minutes of inactivity.

Screenshots

Logged Out

Catalog

Category

Item

404 Error

500 Error

Logged In

Catalog

Category

Item Created by Current User

New Item

Edit Item

Delete Item

404 Error

500 Error

Backend

Server

The server is built on the python web framework flask: http://flask.pocoo.org.

Database

The website uses a postresql database with 3 tables: user, category, item.

Authentication

Google's OAuth2 is implemented as a third party authentication and authorization service.

Authorization

A user can only create an item if he/she is logged in, and a user can only edit item that he/she created. If a logged out user tries to create/edit/delete an item, he/she will be redirected to the login page. If a logged in user tries edit/delete an item he/she did not create, he/she will receive a javascript warning and not be able to complete the action.

Frontend

Responsive

A media query is used to ensure that content looks great on all display sizes.

CSS Grids

The page is layed out with the CSS Grid.

Interactive

After a user completes an action (login, logout, create/edit/delete item) and the site redirects, a flash message is displayed to the user to confirm that his/her action was processed.

Run your Own

In order to actually run this website on your own, you need to take some setup steps.

Requirements

Make sure to install Flask, Flask-SQLAlchemy, SQLAlchemy, oauth2client, Flask-SSLify, flask_recaptcha, and httplib2 using pip3.

OAuth2

First, you will need to acquire google oauth2 credentials.

1. Go to https://console.developers.google.com/ and create a new project.
2. From the dashboard, go to credentials. Under the credentials tab, click on OAuth Consent Screen and fill in the necessary information. Now, return to the original credentials tab and click create credentials - OAuth client ID - Web Application. Now, fill in the javascript origins and the redirect URIs
3. Download the client ID file, put it in the repo with the rest of the code, rename it is as client_secrets.json
4. Copy the actual client ID into the login.html file where it says [your_client_id]

Captcha

Now, you need to get get recaptcha v2 credentials from google. Find out how https://developers.google.com/recaptcha/intro. On lines, 27 and 28 in app.py enter your public site key and your private secret key.

PostgreSQL Database

Now, you need to create/fill a PostgreSQL database.

Create Database

Begin by creating a new user with a password. Enter the psql shell by running the psql command in bash. Then, run the psql command CREATE USER new_user WITH PASSWORD 'my_new_password'; To create the database, run the command CREATE DATABASE database_name OWNER new_user;

Create Database Model

In order to create the database model, enter the python3 shell and run the following commands: from app import db db.create_all()

Fill Database

At the top of the filldatabase.py file, replace [db_name] with postgresql://psql_username:psql_password@localhost/database_name Then, run filldatabase.py with python3.

Config File

Finally, in the config.py file, make sure to give SQLALCHEMY_DATABASE_URI the path to the database as above.

Run

Now, all you have to is run app.py with python3 and connect to port 8000 on the localhost.