Windows XP Movie & TV Shows Explorer 🎬

A web application that allows users to search, explore, and view popular movies, trending TV shows, and celebrities in an authentic Windows XP-styled desktop environment.

💻 Tech Stack & Architecture

• Runtime & Tooling: Node.js, pnpm, Vite
• Language: TypeScript
• UI & Framework: React 18, XP.css
• Serverless & Edge Proxy: Vercel Serverless Functions (/api/tmdb.ts) with Edge CDN caching
• State & Data Caching: @tanstack/react-query
• API: The Movie Database (TMDB) API & Picsum Wallpapers

---

🔒 Security & Serverless Architecture

The application proxies all TMDB requests through a serverless backend function (/api/tmdb.ts), ensuring the TMDB API key is never exposed to the client browser:

Browser (React Client)  --->  /api/tmdb?endpoint=/movie/popular  --->  Vercel Edge / Serverless Function (attaches secret TMDB_API_KEY)  --->  TMDB API

• In Local Development: Vite dev server uses a local middleware proxy to handle /api/tmdb.
• In Vercel Production: Vercel automatically deploys api/tmdb.ts as a serverless route and caches responses via Edge CDN headers (s-maxage=3600).

---

🚀 Deployment to Vercel

1. Push this branch (feat/vite-react-ts-rewrite) to your GitHub repository.
2. In the Vercel Dashboard:
   • Click Add New Project and import your repository.
   • Framework Preset: Vite
   • Root Directory: ./
   • Build Command: pnpm build
   • Output Directory: dist
3. Under Environment Variables, add:
   • Key: TMDB_API_KEY
   • Value: <your-tmdb-api-key>
4. Click Deploy.

---

💻 Local Development

# 1. Install dependencies
pnpm install

# 2. Set up environment variables
cp .env.example .env
# Fill in your TMDB key in .env (or use default development fallback)

# 3. Start local development server
pnpm dev

# 4. Typecheck & Build
pnpm typecheck
pnpm build

📜 License

MIT © Adityesh Mishra