Popcorn Palace

A fullstack cinema booking app.

View demo

About

Front-end and back-end apps to manage a small cinema.

Notable features :

• Tickets added to the user account
• Easily add movies by fetching all the data from TMDB
• Ticket type and seat selection
• 15 minutes lock on the selected seats
• Payment with Stripe
• Confirmation email

Built with

• React
• Tailwind
• Express
• JWT
• MongoDB
• Resend
• Stripe
• TMDB

Getting Started

⚙️ Prerequisites

Ensure you have Node.js and npm installed on your machine to run this project locally.

💾 Installation

1. Clone the Repository

git clone [email protected]:louis-va/mern-template.git

2. Install server & client dependencies

cd server/
npm install

cd client/
npm install

3. Add .env variables

client/.env

VITE_API_URL='' # URL of the server. By default: http://localhost:8000
VITE_URL='' # URL of the client. By default: http://localhost:3000

server/.env

PORT= # Port the server is listening at. By default 8000
DATABASE_URL='' # URL of your mongo database
JWT_SECRET='' # Secure string of characters.
COOKIE_SECRET='' # Secure string of characters.
TMDB_API_KEY='' # TMDB API Key. https://www.themoviedb.org/settings/api
RESEND_API_KEY='' # Resend API Key. https://resend.com/api-keys
STRIPE_API_KEY='' # Stripe Secret Key (starts with 'sk_'). https://dashboard.stripe.com/apikeys

🚀 Execution

Run server & client

cd server/
npm run dev

cd client/
npm run dev

🚚 Production

Build and Run Client & Server

cd server/
npm run build
npm run start

cd client/
npm run build
npm run preview

Docker Compose

Launch the server using Docker Compose on port 8000

cd server/
docker compose up -d

Deployment

To deploy the site in production, in /client/.env.production, set VITE_API_URL as your server URL and VITE_URL as your client URL. Additionally, configure the allowedOrigins in /server/index.ts to allow your client's URL to connect to the server.

🌐 Ports

Client: http://localhost:3000
Server: http://localhost:8000

You can edit the port values in /server/.env and /client/vite.config.ts. If you change the client's port, remember to update allowedOrigins in /server/index.ts with the new port.