Skip to content

A responsive web application—providing user registration and authentication—that allows users to browse—as well as create, modify, and cancel—events by activity.

Notifications You must be signed in to change notification settings

davidsimowitz/fullstack-nanodegree-project-4

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Coordinate Application

Udacity - Full Stack Web Developer Nanodegree

The Backend: Databases & Applications Project

Objective

Develop a responsive, RESTful application—using the Python framework Flask—that provides a list of events within a variety of categories that are stored in a database for persistence. Implement a third-party OAuth authentication service to provide user registration. Registered users have the ability to post, edit, and delete their own events and activities—as well as mark events that they are attending or considering. Events that a user is hosting, attending, or considering can also be listed by selecting the appropriate button from the user navigation menu.

Achieved performance score of 100 using Lighthouse in Chrome DevTools:

Lighthouse report displaying a performance score of 100

Application URL

  • Access the web application using a wildcard DNS provided by xip.io.
    • http://itemcatalog.com.35.168.251.43.xip.io/

App Walkthrough

Log In

Start At The Application Main Page:

* You can log in from any page, though.

Coordinate app, displaying activities

Open The Navigation Menu:

User navigation menu

Log In Using Google Sign In:

User login

You Successfully Logged In:

User logged in

You Now Have Access To Additional Features:

Coordinate app, displaying activities

Create An Activity

Open Navigation Menu After Logging In:

User navigation menu

Select 'new activity':

Create activity page

Enter An Activity Name And Select An Icon:

Select icon for new activity

Submit Your New Activity:

Submit new activity

In The Next Section We'll Walkthrough Creating Events:

Activity page

For Now, The Activity Will Be Displayed On The Main Page:

Coordinate app, displaying activities

Create An Event

Select An Activity After Logging In:

Coordinate app, displaying activities

Select 'plan event' From The Navigation Menu:

User navigation menu

Enter The Event Details And Submit:

Hosting an event

Your New Event Has Been Created:

Event details

Your Event Is Listed Under The Activity In Which It Was Created:

Activity page, displaying events associated with it

Update An Event

* Events can only be updated by the user account that created them.

You Can Update An Event You Created By Selecting It From Its Activity:

Select event from activity page

Select The Event From Its Event Page:

Click on the event

Select 'update' Once You Have Completed Modifying The Event:

Click on the event to edit it

Mark Yourself As Attending Or Considering An Event

Browse Events After Logging In:

Activity page, displaying events associated with it

Select An Event You Wish To Attend/Consider:

Selecting an event from an activity page

Click The Appropriate Icon Located Toward The Top Right Of The Event Details:

* The check mark signifies 'attending' while the question mark represents 'considering'.

Event details

Your Choice Updates To Green:

Event has been updated to show that you are attending it

Events You Are Attending And Considering Will Be Marked By Either A Check Mark Or A Question Mark, Respectively:

Events you are attending and considering will be marked by either a check mark or a question mark, respectively

View The Events You Are Attending

Select 'attending' From The User Navigation Menu While Logged In:

User navigation menu

The Events You Are Attending Are Displayed:

Attending Events Attending Events

View The Events You Are Considering

Select 'considering' From The User Navigation Menu While Logged In:

User navigation menu

The Events You Are Considering Are Displayed:

Considering Events

Requirements

  • A Web Browser such as Chrome is installed.
  • Git is installed. (Optional, if you wish to clone the project repository.)
  • VirtualBox is installed.
  • Vagrant is installed.

Update

  • This web application has been modified to run on an Apache HTTP Server as a WSGI Application.
  • Therefore, the following steps in the 'Usage' section should no longer be followed. Updates to the code—such as file path changes—will cause the application to not run properly. Instead, please follow the steps listed in the Web Application Server repository to run this application.

Usage

  • Run the following commands to clone the complete web site.
$ git clone https://github.com/davidsimowitz/fullstack-nanodegree-project-4.git
  • Above command is optional.
  • Alternatively you may download the files into the directory.
$ cd fullstack-nanodegree-project-4
  • Verify the following files/folders are present before continuing: (client secret json files will be sent separately for security purposes)
    • app.py
    • client_secret.json
    • fb_client_secret.json
    • models.py
    • populate_events_db.py
    • README.md
    • static
    • templates
    • Vagrantfile
  • Setup the environment:

    • Run the following command inside the directory containing the Vagrantfile to bring up the Vagrant environment.
$ vagrant up
  • SSH into the machine.
$ vagrant ssh
  • Startup the backend for the site:

    • Run the app: (after ssh'ing into your vagrant machine)
$ cd /vagrant
$ python3 app.py

About

A responsive web application—providing user registration and authentication—that allows users to browse—as well as create, modify, and cancel—events by activity.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published