# 🎬 DTTube — Project Architecture & Route Flow (Next.js 14)

---

## 🧠 Project Overview

DTTube is a **video + music streaming platform** built using **Next.js 14 (App Router)**.

It supports:

- Video streaming (YouTube-like)
- Shorts (Reels-like)
- Music playback (Spotify-like)
- Multi-language support
- Light/Dark theme
- Unified media player (video + audio)
- Sidebar navigation with dynamic routing

---

## ⚙️ Tech Stack

- Framework: Next.js 14 (App Router)
- State Management: Context API / Zustand
- Styling: Tailwind CSS
- Media: HTML5 Video + Audio APIs
- i18n: Custom translation system (JSON-based)

---

## 📁 Project Structure

```
src/
 ├── app/
 │   ├── layout.tsx
 │   ├── page.tsx (Home)
 │
 │   ├── shorts/
 │   │   └── page.tsx
 │
 │   ├── music/
 │   │   └── page.tsx
 │
 │   ├── feeds/
 │   │   └── page.tsx
 │
 │   ├── subscriptions/
 │   │   └── page.tsx
 │
 │   ├── history/
 │   ├── rent/
 │   ├── watch-later/
 │   ├── liked/
 │   ├── wallet/
 │   ├── profile/
 │
 │   ├── video/[id]/page.tsx
 │   ├── player/
 │
 ├── components/
 │   ├── layout/
 │   ├── sidebar/
 │   ├── header/
 │   ├── player/
 │   ├── video/
 │
 ├── store/
 ├── hooks/
 ├── utils/
 ├── i18n/
 │   ├── en.json
 │   ├── hi.json
 │   ├── gu.json
 │   └── index.ts
```

---

## 🧭 Sidebar Navigation Flow

### Menu Items Order:

1. Home
2. Shorts
3. Music
4. Feeds
5. Subscriptions
6. History
7. Rent
8. Watch Later
9. Liked Videos
10. Wallet
11. Active User Panel
12. Change Language
13. Login / Logout

---

## 📌 Routing Flow

### 🏠 Home

```
/ → Home Page
```

- Tabs:
  - All
  - Trailers
  - Comedy
  - Social
  - Music
  - Romance
  - Workout
  - Entertainment

- Content:
  - Video Grid
  - Click → `/video/[id]`

---

### 🎥 Video Page

```
/video/[id]
```

- Plays selected video
- Shows:
  - Title
  - Description
  - Comments
  - Related Videos

---

### 📱 Shorts

```
/shorts
```

- Vertical scrolling videos
- Auto-play next
- Stops other media

---

### 🎵 Music

```
/music
```

- Audio listing
- Click → start audio player
- Stops video playback

---

### 📰 Feeds

```
/feeds
```

- Updates / posts / social content

---

### 📺 Subscriptions

```
/subscriptions
```

- Subscribed channels videos

---

### 🕒 History

```
/history
```

- Watched videos

---

### 💰 Wallet

```
/wallet
```

- Balance
- Transactions

---

### ❤️ Liked Videos

```
/liked
```

---

### ⏱ Watch Later

```
/watch-later
```

---

## 🎛 Header Layout

### Components:

1. ☰ Menu Toggle (Sidebar open/close)
2. 🧩 App Logo
3. 🔍 Search Bar
4. 🌙 Light/Dark Toggle
5. 🔔 Notifications
6. 👤 Profile Menu

---

## 🎬 Media Player Logic (IMPORTANT)

### Global Rule:

| Action        | Result                      |
| ------------- | --------------------------- |
| Play Video    | Stop Audio                  |
| Play Audio    | Stop Video                  |
| Open Shorts   | Stop All                    |
| Navigate Page | Maintain/Stop based on type |

---

### Central Player Store

```
store/playerStore.ts
```

State:

```
{
  currentMedia,
  type: 'video' | 'audio' | 'short',
  isPlaying,
}
```

---

## 🌙 Light / Dark Mode

- Use `class="dark"` strategy
- Store in localStorage

```
theme: 'light' | 'dark'
```

---

## 🌍 Multi-Language System

### Requirements:

1. All static text in one place
2. JSON-based language files
3. Global language switch

---

### 📁 Structure

```
i18n/
 ├── en.json
 ├── hi.json
 ├── gu.json
 └── index.ts
```

---

### Example

```json
// en.json
{
  "home": "Home",
  "shorts": "Shorts",
  "music": "Music"
}
```

---

### Usage

```
t("home")
```

---

### Language Change Flow

- Select language → save in localStorage
- Update global state
- Re-render entire app

---

## 🔁 Navigation Behavior (IMPORTANT)

### Scenario Handling

| Action         | Behavior             |
| -------------- | -------------------- |
| Video → Shorts | Stop video           |
| Shorts → Music | Stop shorts          |
| Music → Video  | Stop audio           |
| Sidebar click  | Control player state |

---

## 🚀 Core Features Summary

- YouTube + Spotify hybrid experience
- Central media controller
- Smooth navigation
- Fully responsive UI
- Multi-language support
- Dark/Light mode
- Persistent user experience

---

## 🧪 Future Enhancements

- Live streaming
- Comments system
- Download videos
- Background playback
- PWA support

---

## ✅ Final Notes

- Use App Router only (Next 14 standard)
- Avoid mixing pages router
- Keep player global (DO NOT mount per page)
- Optimize for performance (lazy load videos)

---

🔥 DTTube = Video + Shorts + Music + Social in one platform