Next.js Clone Coding Project

A modern movie discovery web application built as a Next.js clone coding practice, focusing on strict type safety and immersive UI.

# Project Overview

Next.js Clone Coding Project began as a clone coding project from "Nomad Coders Next.js for Beginners". It has been reimagined and significantly improved using Antigravity, refining the original work with modern aesthetics, strict TypeScript integration, and optimized performance.

Technology Stack

Next.js 16

App Router & Turbopack

React 19

Server Components

Tailwind 4

Modern CSS Styling

TypeScript

Strict Type Safety

TMDB API

Real-time Data

Key Features

🏠 Home Page

Trending Contents Grid
Dynamic Immersive Background
3D Card Flip Animation

🎬 Content Details

Immersive Hero Header
Tabs: Videos, Credits, Providers, Similar
External Links (IMDB, Homepage)

Project Structure

next-again/
├── app/
│   ├── (home)/              # Home route group
│   │   ├── page.tsx         # Main landing page
│   │   └── loading.tsx      # Home skeleton loader
│   ├── (content)/content/[id]/ # Dynamic movie detail routes
│   │   ├── page.tsx         # Defaults to 'video' tab
│   │   ├── credits/         # Credits tab route
│   │   ├── providers/       # Providers tab route
│   │   ├── similar/         # Similar movies tab route
│   │   ├── layout.tsx       # Shared layout (Header, Nav) for details
│   │   └── error.tsx        # Error boundary
│   ├── about/               # About page
│   ├── layout.tsx           # Root layout (Html, Body, ScrollToTop)
│   ├── globals.css          # Global styles & Tailwind
│   └── not-found.tsx        # 404 Page
├── components/
│   ├── content-card.tsx     # Movie Card component
│   ├── content-info.tsx     # Movie Info component
│   ├── skeleton.tsx         # Loading UI components
│   ├── tab-content.tsx      # Tab Logic
│   └── tabs/                # Individual Tab Components
├── lib/
│   ├── getApiData.ts        # Generic API Fetcher
│   └── metadata.ts          # Shared Metadata Helper
└── types/
    └── tmdb.ts              # Strict TypeScript Interfaces

Recent Improvements

RefactorStrict Type Safety implementation with Generic API fetchers.
FeatureCentralized Metadata logic to reduce code duplication.
UXSmart Scroll-to-Top logic avoiding tab-switching jumps.

Development & Collaboration

Sky(skysurfr)

Product Lead / Designer

Concept & Strategic Vision
UI/UX Design Direction
Core Feature Requirements

Antigravity (AI)

Lead Developer

Full Stack Implementation
Type Safety & Refactoring
Technical Optimization