Kinopia

A movie ticket booking application built using the MERN stack (MongoDB, Express, React, and Node.js).

• You may visit the deployed app here:
  kinopia.vercel.app

---

Features

• Login/logout-based user authorization and authentication
  Secure sign in and account registration with role-based access.


• Ticket booking
  Users can browse movies, choose screening times, and theater seats based on availability—all through the app's booking system.


• 'Favorites' section
  Each user can curate a list of their favorite movies available on the app.


• Payment processing integration
  Secure ticket purchases can be acheived through a fully functional checkout flow.


• Admin dashboard
  Admin users can view a dashboard that records the number of active shows, total bookings, total revenue, and registered accounts in real-time.


• Add 'Now Showing' movies
  Through a dynamically provided set, admin users can add movies with custom showtimes and set booking prices in the app's catalog of active shows.


• View added movies and booked users
  Tables containing information of movies with active showings and successful bookings can be viewed by admin users.


• Responsive UI
  Seamless experience in navigating throughout the app via desktop, tablet, and mobile layouts.

---

Tech Stack

Name	Details
Vite 7.2.4	Development environment
Express 5.1.0 Node.js 22.20.0	Back-end
TMDB API	Movie information, user ratings, 'now showing' trailers
Cloudinary 2.8.0	Media management API
Stripe 20.0.0	Payment processing
Nodemailer 7.0.10 Brevo	REST-to-SMTP mail sending
Inngest 3.46.0	Webhook endpoint and scheduling
Svix 1.81.0	Webhook signature verification
CORS 2.8.5	Express middleware
MongoDB Atlas Mongoose 9.0.0	Database
Axios 1.13.2	Promise-based HTTP client
Clerk React SDK 5.56.2	Authentication and user management SDK
React 19.1.1 react-router-dom 7.9.6 Tailwind CSS 4.1.17 Motion 12.23.25 PrebuiltUI Lucide React 0.554.0	UI
react-hot-toast 2.6.0	Notifications
ReactPlayer 3.4.0	URL-based video player

---

Setup

Prerequisites

• Ensure you have Node.js installed.
  Download Node.js (Windows Installer):
  Node.js — Download Node.js®

• You may need Postman to test GET and POST requests made by the client-side, as well as responses retreived from APIs invoked within the app.
  
  Download Postman (Windows 64-bit):
  Download Postman | Get Started for Free

• You must have an account for the following services:

Service	Reasons why it's needed
Clerk	You need to obtain environment variables for the app's client-side and server-side so that Clerk's authentication and user management integration to work properly. It'll allow you to add/remove admin privileges to a registered account.
MongoDB	Gives you access and control to the app's cloud database. You need to obtain environment variables for the app's server-side, permitting MongoDB to store, delete, and update data processed in the app.
Inngest	Allows you to monitor the triggers and schedules of the app's functions in real-time. You need to obtain environment variables for the app's server-side, allowing Inngest to establish a webhook endpoint reserved for the app's core functions.
TMDB	Provides you access to their API in retrieving and displaying movie information, user ratings, and trailers of currently showing movies in the app. You need to obtain environment variables for the app's client-side and server-side to let the app retreive and add movies for the admin accounts to add as active shows.
Stripe	Allows the app to integrate a full checkout flow for processing ticket booking. You need to obtain environment variables for the app's server-side, giving Stripe access to implement its checkout flow.
Brevo	Allows the app to notify and confirm admin accounts of successful booking confirmations and addition of new movies within the app. You need to obtain environment variables for the app's server-side, allowing Brevo to provide Nodemailer a destination to send an email through REST.
Vercel	Allows the app to be deployed and accessed on the web. You need to deploy the folders client and server as separate projects.

Getting Started

• Running the project locally

# Clone this repository
git clone https://github.com/andreiagbisit/kinopia.git
  
# Navigate into the client-side directory
cd client

# Navigate into the server-side directory
cd server
  
# Install dependencies
npm install
  
# Start the client-side
npm run dev

# Start the server-side
npm run server

• .env - client-side
  (LOCAL) - put this file in the root of client
  (DEPLOYED) - Access your client-side's Vercel project and go to Settings > Environment Variables and add them in the fields Key and Value

VITE_CURRENCY = '[currency symbol]'
VITE_CLERK_PUBLISHABLE_KEY=[publishable key]
VITE_BASE_URL = http://localhost:[port number] (local) / [Vercel project link of the back-end] (deployed)
VITE_TMDB_IMAGE_BASE_URL = https://image.tmdb.org/t/p/original

• .env - server-side
  (LOCAL) - put this file in the root of server
  (DEPLOYED) - Access your server-side's Vercel project and go to Settings > Environment Variables and add them in the fields Key and Value

MONGODB_URI=[connection string]

CLERK_PUBLISHABLE_KEY=[publishable key]
CLERK_SECRET_KEY=[secret key]

INNGEST_EVENT_KEY=[event key]
INNGEST_SIGNING_KEY=[signing key]

TMDB_API_KEY=[key]

STRIPE_PUBLISHABLE_KEY=[publishable key]
STRIPE_SECRET_KEY=[secret key]
STRIPE_WEBHOOK_SECRET=[webhook secret]

SENDER_EMAIL=[email]
SMTP_USER=[SMTP login]
SMTP_PASS=[password]

Deployment

• vercel.json configuration
  Create two files named vercel.json then copy and paste the following code. Afterwards, place the files in the root of the folders client and server, according to their code content.

• vercel.json - client-side

  {
    "rewrites": [
      {
        "source": "/(.*)",
        "destination": "/"
      }
    ]
  }

• vercel.json - server-side

{
    "version": 2,
    "builds": [
        {
            "src": "server.js",
            "use": "@vercel/node",
            "config": {
                "includeFiles": [
                    "dist/**"
                ]
            }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "server.js"
        }
    ]
}

---

Clerk - set user as admin

1. Sign in to your Clerk account.
2. On Applications, select the app that contains the users you want to configure.
3. Select the Users tab.
4. In the table under the All tab, pick the user you want to give admin privileges to.
5. Under the Profile tab of the selected user, navigate to Metadata > Private and click Edit.
6. Within the provided area, paste the following:

  "role": "admin"
  

---