CineScope

CineScope is a lightweight movie search web app built with TypeScript and Vite. It uses the OMDb API to search movies and TV series, show featured content on the homepage, and open a full movie details modal from search results.

What it does

• Search movies, series, and episodes from OMDb
• Browse featured homepage sections
• View detailed movie information in a modal
• Handle empty states, loading states, and API errors
• Keep the UI responsive with a simple component-based structure

Tech Stack

• TypeScript 5.9
• Vite 7
• Tailwind CSS 4
• OMDb API

Project Structure

src/
├── api/        # OMDb API integration
├── components/ # UI components and page sections
├── config/     # App and featured-content settings
├── store/      # Central app state
├── types/      # TypeScript types
├── utils/      # Shared helpers
├── main.ts     # App entry point and rendering logic
└── style.css   # Global styles

Getting Started

Prerequisites

• Node.js 18 or newer
• An OMDb API key from omdbapi.com

Install

npm install

Configure environment

Create a .env file in the project root:

VITE_OMDB_API_KEY=your_api_key_here

The example file is available as .env.example.

Run locally

npm run dev

Open the local URL shown by Vite, usually http://localhost:5173.

Build for production

npm run build

Preview the production build

npm run preview

Available Scripts

• npm run dev - start the Vite development server
• npm run build - type-check and build for production
• npm run preview - preview the production bundle locally

How It Works

The app uses a simple render loop in src/main.ts to rebuild the UI from a central state object. User actions update state, then the app re-renders the current page. API calls are isolated in src/api/omdb.ts, and reusable UI pieces are exported from src/components/index.ts.

Featured homepage sections are defined in src/config/featured.ts.

Notes

• This project is designed as a coursework-style frontend demo rather than a full backend-driven product.
• The app expects a valid OMDb API key to return search and detail data.
• If the API key is missing or invalid, the UI will still load but searches will fail with an error state.