🎬 CineVerse

A Modern Online Movie Exploration Platform

CineVerse is a full-stack web application that allows users to discover, search, and review movies. With a heavy focus on user experience, it features an intuitive interface with real-time search suggestions, detailed movie pages, personalized profiles, watchlists, and a community-driven review system.

✨ Features

• Movie Discovery: Browse through a vast collection of movies and view detailed information.
• Real-Time Search: Instantly search for movies as you type, with live suggestions.
• User Authentication: Secure registration and login using JWT (JSON Web Tokens).
• Personalized Watchlists: Save your favorite movies to your personal watchlist to watch later.
• Community Reviews: Share your opinion by writing reviews and rating movies. Includes an average rating calculation schema.
• User Profiles: Manage your profile, view your watchlists, and look at your past reviews.
• API Documentation: Interactive API endpoints documentation utilizing Swagger UI.

🚀 Tech Stack

The application relies on a modern development stack utilizing an API-first approach and a single-page frontend.

Frontend

• Vue 3: Core framework using the Composition API.
• Vite: Next-generation frontend tooling for rapid development.
• Pinia: State management.
• Vue Router: Navigation and routing.
• Vue Query (@tanstack/vue-query): Powerful data synchronization, caching, and state management.
• Bootstrap 5: Responsive CSS framework.
• Axios: Promise-based HTTP client for browser requests.

Backend

• Node.js & Express.js (v5): Robust backend routing and API endpoints.
• PostgreSQL: Primary relational database.
• Knex.js: SQL query builder and schema migration tool.
• Zod: Schema declaration and data validation.
• Bcryptjs & JWT: Security and authentication.
• Multer: Handling user uploads (e.g., Avatars).
• Swagger UI Express: Auto-generated API specification.

📁 Project Structure

CineVerse/
├── backend-api/          # Node.js/Express REST API
│   ├── src/
│   │   ├── controllers/  # Request handlers
│   │   ├── db/           # Knex configs, migrations, & seeds
│   │   ├── middlewares/  # Validation, Auth, Error handling
│   │   ├── models/       # DB interaction logic 
│   │   ├── routes/       # API endpoints 
│   │   ├── schemas/      # Zod validation schemas
│   │   ├── services/     # Business logic layers
│   │   └── utils/        # Generic helpers
│   ├── docs/             # API Documentation configs
│   ├── public/           # Uploaded static files
│   ├── knexfile.js       # Knex configuration
│   └── package.json
│
└── frontend-spa/         # Vue 3 Vite application
    ├── src/
    │   ├── assets/       # Global styles and static assets
    │   ├── components/   # Reusable Vue components
    │   ├── router/       # Vue Router configuration
    │   ├── stores/       # Pinia stores
    │   ├── views/        # Page level components
    │   └── App.vue       # Root component
    └── package.json

🛠️ Setup & Installation

Prerequisites

• Node.js (v18 or higher recommended)
• PostgreSQL database running locally or remotely.

1. Backend Setup

Navigate to the backend-api directory:

cd backend-api

Install dependencies:

npm install

Configure environment variables: Create a .env file in the backend-api root and configure the following variables:

PORT=5000
DB_HOST=localhost
DB_PORT=5432
DB_USER=your_postgres_user
DB_PASSWORD=your_postgres_password
DB_NAME=cineverse_db
JWT_SECRET=your_jwt_secret_key

Run database migrations and seed default data:

npx knex migrate:latest
npx knex seed:run

Start the API server (Development mode):

npm run dev

2. Frontend Setup

Open a new terminal and navigate to the frontend-spa directory:

cd frontend-spa

Install dependencies:

npm install

Configure Environment variables (Required for API connection): Create a .env file in the frontend-spa root:

VITE_API_URL=http://localhost:5000/api

Start the Vite development server:

npm run dev

📚 API Documentation

Once the backend is running, the interactive Swagger UI API documentation can be accessed by navigating to: http://localhost:5000/api-docs (Assuming PORT is set to 5000)

📄 License

This project is licensed under the ISC License. See the LICENSE file for details.