@@ -9,17 +9,17 @@ A browser-based video editing platform built with Next.js 14+, React, TailwindCS
99## ** 1. Technical Stack**
1010
1111### ** Core Technologies**
12- - ** Framework** : Next.js 14 + (App Router)
13- - ** UI Library** : React 18 +
12+ - ** Framework** : Next.js 16 + (App Router)
13+ - ** UI Library** : React 19 +
1414- ** Styling** : TailwindCSS + shadcn/ui components
1515- ** State Management** : Zustand (with middleware for persistence)
1616- ** Video Engine** : Remotion 4.x
1717- ** Storage** :
1818 - Primary: IndexedDB (via Dexie.js)
19- - Optional: Supabase ( PostgreSQL + Storage)
19+ - Optional: PostgreSQL
2020- ** File Handling** : Browser File System Access API (with fallbacks)
21- - ** Rendering** : Remotion Lambda (cloud) or local rendering
22- - ** Deployment** : Vercel
21+ - ** Rendering** : Remotion local rendering
22+ - ** Deployment** : Kamal + Docker
2323
2424### ** Supporting Libraries**
2525- ** Drag & Drop** : @dnd-kit/core , @dnd-kit/sortable
@@ -42,36 +42,36 @@ A browser-based video editing platform built with Next.js 14+, React, TailwindCS
4242│ Next.js App Router │
4343├─────────────────────────────────────────────────────┤
4444│ │
45- │ ┌──────────────┐ ┌──────────────┐ ┌──────────┐ │
46- │ │ Dashboard │ │ Editor │ │ Render │ │
47- │ │ Page │ │ Page │ │ Page │ │
48- │ └──────────────┘ └──────────────┘ └──────────┘ │
45+ │ ┌──────────────┐ ┌──────────────┐ ┌──────────┐ │
46+ │ │ Dashboard │ │ Editor │ │ Render │ │
47+ │ │ Page │ │ Page │ │ Page │ │
48+ │ └──────────────┘ └──────────────┘ └──────────┘ │
4949│ │
5050├─────────────────────────────────────────────────────┤
5151│ Zustand State Management │
52- │ ┌─────────────┐ ┌──────────────┐ ┌──────────────┐│
53- │ │ Project │ │ Timeline │ │ Playback ││
54- │ │ Store │ │ Store │ │ Store ││
55- │ └─────────────┘ └──────────────┘ └──────────────┘│
52+ │ ┌─────────────┐ ┌──────────────┐ ┌──────────────┐ │
53+ │ │ Project │ │ Timeline │ │ Playback │ │
54+ │ │ Store │ │ Store │ │ Store │ │
55+ │ └─────────────┘ └──────────────┘ └──────────────┘ │
5656├─────────────────────────────────────────────────────┤
5757│ Service Layer │
58- │ ┌─────────────┐ ┌──────────────┐ ┌──────────────┐│
59- │ │ Storage │ │ Asset │ │ Remotion ││
60- │ │ Service │ │ Manager │ │ Renderer ││
61- │ └─────────────┘ └──────────────┘ └──────────────┘│
58+ │ ┌─────────────┐ ┌──────────────┐ ┌──────────────┐ │
59+ │ │ Storage │ │ Asset │ │ Remotion │ │
60+ │ │ Service │ │ Manager │ │ Renderer │ │
61+ │ └─────────────┘ └──────────────┘ └──────────────┘ │
6262├─────────────────────────────────────────────────────┤
6363│ Data Persistence Layer │
64- │ ┌─────────────┐ ┌──────────────┐ ┌──────────────┐│
65- │ │ IndexedDB │ │ Supabase │ │ File System ││
66- │ │ (Dexie) │ │ (Optional) │ │ API ││
67- │ └─────────────┘ └──────────────┘ └──────────────┘│
64+ │ ┌─────────────┐ ┌──────────────┐ ┌──────────────┐ │
65+ │ │ IndexedDB │ │ Supabase │ │ File System │ │
66+ │ │ (Dexie) │ │ (Optional) │ │ API │ │
67+ │ └─────────────┘ └──────────────┘ └──────────────┘ │
6868└─────────────────────────────────────────────────────┘
6969```
7070
7171### ** 2.2 Folder Structure**
7272
7373```
74- movie-creator /
74+ MyApp.Client /
7575├── app/
7676│ ├── (auth)/ # Auth-related pages (future)
7777│ ├── (marketing)/ # Landing, pricing pages
@@ -1497,11 +1497,11 @@ This technical specification provides a comprehensive blueprint for building a p
14971497
14981498** Recommended Implementation Order:**
14991499
1500- 1 . ** Week 1-2: ** Project setup, folder structure, basic routing, Zustand stores
1501- 2 . ** Week 3-4: ** Dashboard UI, project CRUD, IndexedDB integration
1502- 3 . ** Week 5-8: ** Timeline UI (single track), drag & drop, basic element rendering
1503- 4 . ** Week 9-10: ** Remotion integration, preview canvas, playback controls
1504- 5 . ** Week 11-12: ** Browser-based rendering, export functionality
1505- 6 . ** Week 13+: ** Testing, bug fixes, polish, deploy MVP
1500+ 1 . Project setup, folder structure, basic routing, Zustand stores
1501+ 2 . Dashboard UI, project CRUD, IndexedDB integration
1502+ 3 . Timeline UI (single track), drag & drop, basic element rendering
1503+ 4 . Remotion integration, preview canvas, playback controls
1504+ 5 . Browser-based rendering, export functionality
1505+ 6 . Testing, bug fixes, polish, deploy MVP
15061506
15071507This specification can evolve as you build—prioritize MVP features first, then iterate based on user feedback.
0 commit comments