CineVerse

MongoDB, Expressjs, React/Redux, Nodejs

CineVerse is an online Movie Ticket Booking web app with MERN Stack.

• Online Booking System
• Admin Dashboard
• Dark Theme UI

MERN is a fullstack implementation in MongoDB, Expressjs, React/Redux, Nodejs.

MERN stack is the idea of using Javascript/Node for fullstack web development.

Features!

• Add / Update / Delete Movies
• Add / Update / Delete Cinemas
• Add / Update / Delete Showtimes
• Add / Update / Delete Reservations
• Add / Update / Delete Users
• Generate QR Code for reservation check in
• Send HTML emails invitations

You can also:

• Export QR Code pass as PDF

Tech

CineVerse uses a number of open source projects to work properly:

• MongoDB - A document-oriented, No-SQL database used to store the application data.
• ExpressJS - fast node.js network app framework.
• ReactJS - A JavaScript library for building user interfaces.
• Redux - A predictable state container for JavaScript apps.
• nodeJS - A JavaScript runtime built on Chrome's V8 JavaScript engine

Installation

CineVerse requires Node.js to run.

Set environment variables

$ Create a .env file in your server and client folder
$ See the .env sample
create a mongodb database and add your connection string into .env file

Environment Variables

The following environment variables are required for the application to function correctly.

Variable	Required	Description
MONGODB_URI	✅ Yes	MongoDB connection string
MAIL_HOST	✅ Yes	SMTP mail server host
GMAIL_USER	✅ Yes	Gmail user email for SMTP
GMAIL_PASSWORD	✅ Yes	Gmail app password for SMTP
CLOUDINARY_CLOUD_NAME	✅ Yes	Cloudinary cloud name
CLOUDINARY_API_KEY	✅ Yes	Cloudinary API key
CLOUDINARY_API_SECRET	✅ Yes	Cloudinary API secret
PORT	❌ No	Default is 8080

Make sure to set these variables in a .env file before running the application.

Install the dependencies and devDependencies

$ git clone https://github.com/TechKumarNitish/se-project.git
$ npm install
$ cd server npm install && npm start
$ cd client npm install && npm start

Start the server.

$ cd server $ npm install 

OR

Docker Image for Server

A pre-built Docker image for this project is available on Docker Hub:

https://hub.docker.com/r/122cs0070/cineverse-backend

To pull and run the Docker container:

docker pull 122cs0070/cineverse-backend
docker run \
-e NODE_ENV='production' \
--env-file .env \
-p 8080:8080 \
122cs0070/cineverse-backend:latest

Start the client.

$ cd client $ npm install $ npm start

Start from root path

$ npm run server
$ npm run client

Plugins

CineVerse is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.

Server

Plugin	README
concurrently	plugins/concurrently/README.md
bcryptjs	plugins/bcryptjs/README.md
express	plugins/express/README.md
googleapis	plugins/googleapis/README.md
jsonwebtoken	plugins/jsonwebtoken/README.md
mongoose	plugins/mongoose/README.md
multer	plugins/multer/README.md
nodemailer	plugins/nodemailer/README.md
nodemon	plugins/nodemon/README.md
qrcode	plugins/qrcode/README.md

Client

Plugin	README
fullcalendar	plugins/fullcalendar/README.md
material-ui	plugins/material-ui/README.md
moment	plugins/moment/README.md
jspdf	plugins/jspdf/README.md
react	plugins/react/README.md
react-facebook-login	plugins/react-facebook-login /README.md
react-google-login	plugins/react-google-login/README.md
react-redux	plugins/react-redux/README.md
react-router-dom	plugins/react-router/README.md
react-slick	plugins/react-slick/README.md
redux	plugins/redux/README.md

Todos

• Add Light Mode / More themes

Screenshots!

Movie Page

More Screenshots

Booking Page

Booking Invitations

Guest Dashboard Page

My Account Page

Admin Home Page

Admin Cinema Page

Admin Movie Page

Admin Reservation Page

Admin Reservation Calendar

License

MIT