CINEMA APP

Idea

This is a full-stack project of a cinema booking site created to learn and combine the stack described below.

Prerequisites

• Have Git, Node.js and npm installed (optional: nvm).
• Front-end and back-end opted to be created under one same repository on GitHub.

mkdir cinema-app
cd cinema-app
git init
git remote add origin https://github.com/user/repo.git

Wireframes

Wireframes designed with Mockflow.

Front-end

cinema-app
mkdir client
cd client

• Vue.js (v2.x) used as front-end framework.
• Client side created with Vue CLI.

npm install -g @vue/cli

• Site routes created with Vue Router:

npm i vue-router

Path	Component	Permissions	Behavior
/	movies	Public	Redirect to /movies
/movies	movies	Public	Display all movies available
/movies/:id	movieDetails	Public	Display details of selected movie with booking button
/auth	userAuth	Public	Log In or Sign Up
/checkout	checkout	Private	Booking page
/my-account	myAccount	Private	Panel to check completed bookings and edit personal details
/:notFound(.*)	notFound	Public	Show message if user enters a path not registered

• Data stores for authentication and orders created with Vuex.

npm i vuex

Back-end

Server

• Server initialized with Express Generator:

npm install express-generator -g

This package creates a basic structure to start an Express server. To generate it, we need to enter the command express followed by the name we want to give to our server folder.

express server

Once the installation is completed, we need to install the dependencies included in the generated package.json and start the server:

cd server
npm i
npm start

Database

Steps to integrate an Azure SQL database:

1. Register.
2. Create a sample database.
3. Connect with SQL Server Manager Studio.
4. Use Sequelize as object-relational mapper (ORM) to connect and query the database from our app. Sequelize allows to create models for each table and establish their relationships.

Models

User (with validation parameters for authentication):

{
    name: {
        type: DataTypes.STRING,
        allowNull: false,
        },
    }, 
    email: {
        type: DataTypes.STRING,
        }
    },
    password: {
        type: DataTypes.STRING,
        allowNull: false,
    }
}

Movie:

{
    title: DataTypes.STRING,
    description: DataTypes.TEXT,
    imageUrl: DataTypes.STRING
}

Session:

{
    time: DataTypes.DATE
}

Order:

{
    title: DataTypes.STRING,
    description: DataTypes.TEXT,
    imageUrl: DataTypes.STRING
}

Models associations:

User.hasMany(Order);
Order.belongsTo(User);

Movie.hasMany(Session);
Session.belongsTo(Movie);

Session.hasMany(Order);
Order.belongsTo(Session);

Database schema adapted from Learn Programming Academy 'SQL for beginners' course on Udemy:

API

HTTP Method	URL	Description
GET	/users	Route for testing purposes. A user will only have access to his profile.
GET	/users/:id	User private access to personal profile.
POST	/users/signup	User registration in sign up page.
POST	/users/login	User log in.
PATCH	/users/:id	User profile edition.
DELETE	/users/:id	User profile deletion.
GET	/movies	Display of all movies available
GET	/movies/:id	Show details of one specific movie
POST	/movies	Route for testing purposes, to seed the database with movies.
POST	/sessions	Route for testing purposes, to seed the database with sessions assigned to movies.
GET	/users/:id/orders	Show all orders from one user. Private route.
GET	/users/:userId/orders/:orderId	Show one specific order from a user. Private route.
POST	/users/:id/orders/	Complete an order. Private route.

All routes tested in Postman.

Authentication created with JSON Web Tokens (JWT).

Courses

• Tim Buchalka's Learn Programming Academy SQL course on Udemy.
• Maximilian Schwarzmüller Vue.js course on Udemy.
• The Net Ninja Vue.js course on YouTube.
• AZR Media Sequelize ORM & Authentication with JWT course on YouTube.