CineTube is a cinematic, state-of-the-art movie and video streaming application designed to deliver a high-end visual experience. It acts as both a feature-rich streaming/review hub and a developer showcase site. Movie enthusiasts can seamlessly explore films, write ratings and reviews, curate personal watchlists, and subscribe to premium access tiers.
- Cinematic Dark Mode UI: A glowing, glassmorphic layout optimized for movies, featuring interactive hovering cards and premium layouts.
- Search & Dynamic Discovery: Instantly query films using robust keyword search, pricing types (Free vs. Premium), genres, and tag filters.
- Interactive Ratings & Reviews: Add user scores and detailed feedback card blocks equipped with animated glow borders.
- Stripe Premium Subscriptions: Safe, end-to-end payment integration to unlock monthly/yearly premium tiers.
- Unified Admin Dashboard: Secure panel restricted to administrator roles to manage tags, content catalog, user profiles, stripe payments, notifications, reports, and contact inquiries.
- Responsive Bento Developer Portfolio: Built-in "About Me" bento showcase highlighting skills, tools, and background details in a balanced 12-column grid.
- Contact Message Logs: Integrated client-to-server contact forms validation powered by Prisma database storage.
| Category | Technology Used | Description |
|---|---|---|
| Frontend Framework | Next.js 15+ (App Router) | High-performance React framework. |
| Backend API | Express.js | Robust server handling routing and business logic. |
| Database ORM | Prisma | Modern database toolkit for PostgreSQL querying. |
| Cloud Database | Neon Postgres | Fully managed serverless Postgres database. |
| Authentication | Better Auth | Secure developer-friendly user auth. |
| Payments | Stripe | Real-time subscription payments processing. |
| Image Upload | Cloudinary | Asset hosting and content delivery. |
| Styling | Tailwind CSS 4 & Shadcn UI | Custom CSS tokens, layouts, and prebuilt components. |
| Animations | Framer Motion | Smooth fluid transitions and mouse-tracking glows. |
| Runtime & Bundler | Bun | Fast, all-in-one JavaScript runtime tool. |
Follow these steps to set up the project locally on your machine.
Ensure you have Bun installed:
# Verify bun installation
bun --version-
Clone the Repository:
git clone https://github.com/FajlaRabby24/CineTube-client.git cd CineTube-client -
Install Dependencies:
bun install
-
Start the Client:
# Start Next.js development server bun dev
Create a .env file in the root of the client directory:
NEXT_PUBLIC_API_BASE_URL="http://localhost:5000/api/v1"
JWT_ACCESS_SECRET="your-access-token-jwt-secret"
# Cloudinary Assets
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="your-cloudinary-name"
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET="your-preset-name"
CLOUDINARY_CLOUD_NAME="your-cloudinary-name"
CLOUDINARY_API_KEY="your-cloudinary-api-key"
CLOUDINARY_API_SECRET="your-cloudinary-secret"Here is a preview of the CineTube application landing page:
Thank you for exploring CineTube! I hope this project showcases my skills in modern full-stack web engineering, database relations, secure gateway payments, and responsive UX design. If you have any feedback or inquiries, feel free to submit them through the contact panel or drop by!
Happy Watching! 🍿
Fajla Rabby
Full Stack Web Developer