A modern, highly-performant movie and TV show exploration platform powered by Next.js 14 and TMDB.
View Live Demo · Getting Started · Tech Stack
Nextio is a full-stack media discovery application built with the newest Next.js App Router architecture. It leverages the global TMDB Database to fetch deep metadata for cinema and television, seamlessly integrating with Supabase Auth & Database for robust user progression, favorites, and real-time backend state management.
Crafted with a focus on UI/UX, the application boasts dynamic animations, infinite horizontal swipers for categorized lists, and a rich cinema-focused aesthetic.
- 🎟 Real-time Media Feeds: Fetching live trending and top-rated movies/TV shows via the TMDB API.
- 🔐 Authentication via Supabase: Secure session management and social/email login wrappers handled gracefully on the edge.
- 🚀 Server-Side Rendering (SSR): Engineered using Next.js 14 Server-side & Client-side boundaries to achieve extreme SEO friendliness and sub-second TTL routing.
- 🎨 Responsive & Glassmorphic UI: High-end minimalist design powered by Tailwind CSS and custom vanilla CSS modules.
- ⚡ Optimized Caching: Implementation of Promise Singleton Caching for deep backend calls, completely bypassing unnecessary DB I/O drops on navigation.
| Category | Technologies |
|---|---|
| Framework | Next.js (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS / PostCSS |
| Database & Auth | Supabase |
| Media Data | TMDB API |
| UI Components | Swiper.js, FontAwesome |
| Deployment | Vercel Platform |
If you want to run this application locally, follow these steps.
You will need Node.js (v18+) and a package manager (npm/yarn/pnpm). You also need accounts on Supabase and TMDB to issue API keys.
git clone https://github.com/kimkee/nextio.git
cd nextioCreate a .env.local file in the root directory and embed your API credentials:
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# TMDB Configuration
NEXT_PUBLIC_TMDB_API_KEY=your_tmdb_api_key# Install dependencies
npm install
# Run the local development server
npm run devOpen http://localhost:9017 with your browser to see the result.
To prevent UI "freezing" bugs seen in modern SPAs:
- Streaming UI: Routes implement
loading.tsx<Suspense>boundaries to unblock the Next.js router main thread, ensuring immediate navigation transitions. - Node.js Runtime Target: The default Edge Runtime was explicitly avoided on heavy client-bundled components to circumvent V8 Isolate cold-start penalties when importing large UI libraries (like Swiper). Core pages utilize Vercel's caching Node.js Serverless architecture for stable performance.
- API Deduplication: Database auth checking functions rely on programmatic promise-locks to prevent client components from shotgunning duplicate HTTP requests to Supabase concurrently.