🎬 Video Store Platform

A modern, full-stack video storefront built with the T3 Stack and designed to be deployed on Cloudflare's edge network.

This platform allows users to browse and purchase movies, while providing administrators with a powerful dashboard to manage the store's inventory, analytics, and user interactions.

✨ Features

👤 User Experience

• Browse & Discover: Explore a rich catalog of movies with a responsive, modern UI built using Tailwind CSS and shadcn/ui.
• Seamless Purchasing: Frictionless checkout flow for buying movies.
• Intelligent Search: Enhanced search capabilities powered by AI (using Vercel AI SDK).

🛡️ Admin Dashboard

• Inventory Management: Add, edit, or remove movies from the store's catalog.
• Store Analytics: View sales data, user metrics, and store performance via interactive charts (Recharts).
• Edge-Ready: Fully optimized for Cloudflare Workers & D1 Database, ensuring global low-latency access.

🛠️ Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• API: tRPC for end-to-end typesafe APIs
• Database: Cloudflare D1 via Drizzle ORM
• Styling: Tailwind & shadcn/ui
• Deployment: OpenNext Cloudflare & Wrangler
• State Management: Jotai for global state management & TanStack Query for server state management
• Testing: Jest

🚀 Getting Started (Local Development)

Follow these steps to get the project running on your local machine.

Prerequisites

• Node.js (v20 or higher recommended)
• pnpm (Package manager, v10+)
• Wrangler CLI (Cloudflare's developer CLI)

Installation Steps

1. Clone the repository:

   git clone https://github.com/yannagrebah/video-store.git
   cd video-store

2. Set up environment variables:

   Create a .env file in the root of the project and add any necessary environment variables (e.g., API keys, database credentials). Refer to .env.example for required variables.

3. Install dependencies:

   npm install

4.a Start the development server:

Run Next.js locally with Turbo:

npm run dev

4.b Start Cloudflare Preview:

Run the project in a Cloudflare Workers environment locally:

npm run preview

☁️ Deployment

This project is configured to run on Cloudflare Pages/Workers using opennextjs-cloudflare.

To deploy to your own Cloudflare account:

1. Authenticate with Cloudflare:

   npx wrangler login

2. Provision your D1 database in the Cloudflare dashboard and update the database_id in wrangler.jsonc.

3. Run the deployment script:

   npm deploy

🧪 Testing

We use Jest to ensure application reliability.

# Run the test suite
npm run test

📁 Project Structure

• /src/app/home - The main storefront for users.
• /src/app/admin - The administrative dashboard and CMS.
• /src/app/api - Next.js API routes (including tRPC endpoints and AI Agent).
• /src/components - Reusable UI components (shadcn/ui).
• /src/server - tRPC routers, database schemas, and business logic.
• /src/trpc - tRPC client setup and React Query providers.

---