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 Item Catalog
'JSON/'to the end of the URL for a specific item.
A live demo of the project hosted by heroku is avaliable at Demohttps://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.
Item Created by Current User
The server is built on the python web framework flask: Serverhttp://flask.pocoo.org.
The website uses a postresql database with 3 tables: user, category, item. Database
Google's OAuth2 is implemented as a third party authentication and authorization service. Authentication
A media query is used to ensure that content looks great on all display sizes. Responsive
The page is layed out with the CSS Grid. CSS Grids
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. Interactive
In order to actually run this website on your own, you need to take some setup steps. Run your Own
Make sure to install Flask, Flask-SQLAlchemy, SQLAlchemy, oauth2client, Flask-SSLify, flask_recaptcha, and httplib2 using Requirements
First, you will need to acquire google oauth2 credentials. OAuth2
- Go to https://console.developers.google.com/ and create a new project.
- Download the client ID file, put it in the repo with the rest of the code, rename it is as client_secrets.json
- Copy the actual client ID into the login.html file where it says
Now, you need to get get recaptcha v2 credentials from google. Find out how Captchahttps://developers.google.com/recaptcha/intro. On lines, 27 and 28 in
app.pyenter your public site key and your private secret key.
Now, you need to create/fill a PostgreSQL database. PostgreSQL Database
Begin by creating a new user with a password. Enter the psql shell by running the Create Database
psqlcommand 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;
In order to create the database model, enter the python3 shell and run the following commands: Create Database Model
from app import db
At the top of the Fill Database
Finally, in the Config File
config.pyfile, make sure to give
SQLALCHEMY_DATABASE_URIthe path to the database as above.