Skip to content

Step into the world of CineCanvas and uncover your next favorite film in an instant. With a beautifully crafted interface and lightning-fast performance, Cinecanvas makes movie discovery a delight—effortlessly browse trending hits, timeless classics, and hidden gems all in one place. Dive straight into the action with seamless streaming.

License

Notifications You must be signed in to change notification settings

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.

About

Step into the world of CineCanvas and uncover your next favorite film in an instant. With a beautifully crafted interface and lightning-fast performance, Cinecanvas makes movie discovery a delight—effortlessly browse trending hits, timeless classics, and hidden gems all in one place. Dive straight into the action with seamless streaming.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published