Skip to content

Optimized-Brain/Cinecanvas

Repository files navigation

CineCanvas Logo

Cinecanvas is a fast, modern movie‑browsing web app built with Vite and React, styled using Tailwind CSS and shadcn/ui, integrated with TMDB and VidSrc APIs for metadata and streaming embeds, and deployed on Cloudflare Pages for global performance.

Vite React TailwindCSS Cloudflare TMDB API VidSrc API License

Features

  • Search & Discovery: Browse and search movies/TV shows via the TMDB API, which offers a community‑driven database of over 800,000 films and 150,000 TV shows with images and credits.
  • Streaming Embeds: Seamlessly embed trailers and previews using VidSrc’s free streaming API, providing responsive, auto‑updated, high‑quality links via simple REST endpoints.
  • Responsive UI: Utility‑first design with Tailwind CSS, combining low‑level, single‑purpose classes for rapid, custom styling directly in markup.
  • Accessible Components: UI primitives and patterns from shadcn/ui accelerate accessible React component assembly on top of Tailwind.
  • Blazing Fast HMR: Vite’s Hot Module Replacement updates modules in‑place without full reloads, preserving state and boosting developer productivity.
  • Global Edge Deployment: Hosted on Cloudflare Pages for instant, Git‑driven builds, automatic HTTPS, and edge caching across 275+ cities.

Technology Stack

Vite

Vite is a next‑generation build tool offering instant server start, on‑demand ESM, and lightning‑fast Hot Module Replacement.

React

React is a declarative JavaScript library for building reusable UI components, making complex UIs easier to reason about and maintain.

Tailwind CSS

Tailwind CSS is a utility‑first framework that provides low‑level, composable classes for styling without opinionated defaults.

shadcn/ui

shadcn/ui delivers a suite of accessible, theme‑aware React components built on top of Tailwind, streamlining UI development.

TMDB API

The Movie Database (TMDb) API supplies extensive metadata—images, synopses, cast, and crew—to power search, discovery, and detail pages.

VidSrc API

VidSrc offers a lightweight video‑streaming API and embed URLs for movies and episodes, updating links automatically for optimal quality.

Cloudflare Pages

Cloudflare Pages is a JAMstack platform that deploys static and full‑stack applications to Cloudflare’s global network with zero‑config Git integration.

Installation

git clone https://github.com/Optimized-Brain/Cinecanvas.git  
cd Cinecanvas  
npm install  

Configuration

Add your TMDB_API_KEY and any VidSrc credentials.

Usage

npm run dev

Open http://localhost:5173 to explore Cinecanvas locally.

License

This project is licensed under the MIT License—see the LICENSE file for details.