From be970248686c0af7d8506cba8c64bf507419da3d Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 22 Jun 2025 13:07:02 +0200
Subject: so much stuff???

---
 apps/web/src/app/api/auth/[...all]/route.ts        |   4 +
 apps/web/src/app/editor/page.tsx                   |  66 ++++++--
 apps/web/src/app/fonts/GeistMonoVF.woff            | Bin 67864 -> 0 bytes
 apps/web/src/app/fonts/GeistVF.woff                | Bin 66268 -> 0 bytes
 apps/web/src/app/globals.css                       |   6 +-
 apps/web/src/app/layout.tsx                        |  31 ++--
 apps/web/src/app/page.tsx                          |  12 +-
 apps/web/src/components/app-provider.tsx           |  42 +++++
 apps/web/src/components/editor-header.tsx          |  56 +++++++
 apps/web/src/components/editor/media-panel.tsx     | 133 ++++++++++++++++
 apps/web/src/components/editor/preview-panel.tsx   |  11 ++
 .../web/src/components/editor/properties-panel.tsx | 100 ++++++++++++
 apps/web/src/components/editor/timeline.tsx        | 173 +++++++++++++++++++++
 apps/web/src/components/header-base.tsx            |  41 +++++
 apps/web/src/components/header.tsx                 |  37 +++++
 apps/web/src/components/landing/hero.tsx           |  72 +++++++++
 apps/web/src/components/media-panel.tsx            |  39 -----
 apps/web/src/components/preview-panel.tsx          |  11 --
 apps/web/src/components/properties-panel.tsx       | 100 ------------
 apps/web/src/components/timeline.tsx               | 141 -----------------
 apps/web/src/lib/auth-client.ts                    |   4 +
 apps/web/src/lib/auth.ts                           |  23 +++
 apps/web/src/lib/db/index.tsx                      |  14 ++
 apps/web/src/lib/db/schema.ts                      |  61 ++++++++
 apps/web/src/stores/app-store.ts                   |  35 +++++
 apps/web/src/stores/media-store.ts                 |  35 +++++
 apps/web/src/stores/panel-store.ts                 |  79 ++++++++++
 apps/web/src/stores/project-store.ts               |  28 ++++
 apps/web/src/stores/timeline-store.ts              |  61 ++++++++
 apps/web/src/types/project.ts                      |   6 +
 30 files changed, 1096 insertions(+), 325 deletions(-)
 create mode 100644 apps/web/src/app/api/auth/[...all]/route.ts
 delete mode 100644 apps/web/src/app/fonts/GeistMonoVF.woff
 delete mode 100644 apps/web/src/app/fonts/GeistVF.woff
 create mode 100644 apps/web/src/components/app-provider.tsx
 create mode 100644 apps/web/src/components/editor-header.tsx
 create mode 100644 apps/web/src/components/editor/media-panel.tsx
 create mode 100644 apps/web/src/components/editor/preview-panel.tsx
 create mode 100644 apps/web/src/components/editor/properties-panel.tsx
 create mode 100644 apps/web/src/components/editor/timeline.tsx
 create mode 100644 apps/web/src/components/header-base.tsx
 create mode 100644 apps/web/src/components/header.tsx
 create mode 100644 apps/web/src/components/landing/hero.tsx
 delete mode 100644 apps/web/src/components/media-panel.tsx
 delete mode 100644 apps/web/src/components/preview-panel.tsx
 delete mode 100644 apps/web/src/components/properties-panel.tsx
 delete mode 100644 apps/web/src/components/timeline.tsx
 create mode 100644 apps/web/src/lib/auth-client.ts
 create mode 100644 apps/web/src/lib/auth.ts
 create mode 100644 apps/web/src/lib/db/index.tsx
 create mode 100644 apps/web/src/lib/db/schema.ts
 create mode 100644 apps/web/src/stores/app-store.ts
 create mode 100644 apps/web/src/stores/media-store.ts
 create mode 100644 apps/web/src/stores/panel-store.ts
 create mode 100644 apps/web/src/stores/project-store.ts
 create mode 100644 apps/web/src/stores/timeline-store.ts
 create mode 100644 apps/web/src/types/project.ts

(limited to 'apps/web/src')

diff --git a/apps/web/src/app/api/auth/[...all]/route.ts b/apps/web/src/app/api/auth/[...all]/route.ts
new file mode 100644
index 00000000..1fb57443
--- /dev/null
+++ b/apps/web/src/app/api/auth/[...all]/route.ts
@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { POST, GET } = toNextJsHandler(auth);
\ No newline at end of file
diff --git a/apps/web/src/app/editor/page.tsx b/apps/web/src/app/editor/page.tsx
index 51a448d9..f9f64ee6 100644
--- a/apps/web/src/app/editor/page.tsx
+++ b/apps/web/src/app/editor/page.tsx
@@ -1,36 +1,80 @@
+"use client";
+
+import { useEffect } from "react";
 import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizableHandle,
 } from "../../components/ui/resizable";
-import { MediaPanel } from "../../components/media-panel";
-import { PropertiesPanel } from "../../components/properties-panel";
-import { Timeline } from "../../components/timeline";
-import { PreviewPanel } from "../../components/preview-panel";
+import { MediaPanel } from "../../components/editor/media-panel";
+import { PropertiesPanel } from "../../components/editor/properties-panel";
+import { Timeline } from "../../components/editor/timeline";
+import { PreviewPanel } from "../../components/editor/preview-panel";
+import { EditorHeader } from "@/components/editor-header";
+import { usePanelStore } from "@/stores/panel-store";
+import { useProjectStore } from "@/stores/project-store";
 
 export default function Editor() {
+  const {
+    toolsPanel,
+    previewPanel,
+    propertiesPanel,
+    mainContent,
+    timeline,
+    setToolsPanel,
+    setPreviewPanel,
+    setPropertiesPanel,
+    setMainContent,
+    setTimeline,
+  } = usePanelStore();
+
+  const { activeProject, createNewProject } = useProjectStore();
+
+  // Initialize a new project if none exists
+  useEffect(() => {
+    if (!activeProject) {
+      createNewProject("Untitled Project");
+    }
+  }, [activeProject, createNewProject]);
+
   return (
     <div className="h-screen w-screen flex flex-col bg-background">
+      <EditorHeader />
       <ResizablePanelGroup direction="vertical">
-        <ResizablePanel defaultSize={50} minSize={30}>
+        <ResizablePanel
+          defaultSize={mainContent}
+          minSize={30}
+          onResize={setMainContent}
+        >
           {/* Main content area */}
           <ResizablePanelGroup direction="horizontal">
             {/* Tools Panel */}
-            <ResizablePanel defaultSize={20} minSize={15}>
+            <ResizablePanel
+              defaultSize={toolsPanel}
+              minSize={15}
+              onResize={setToolsPanel}
+            >
               <MediaPanel />
             </ResizablePanel>
 
             <ResizableHandle withHandle />
 
             {/* Preview Area */}
-            <ResizablePanel defaultSize={60}>
+            <ResizablePanel
+              defaultSize={previewPanel}
+              onResize={setPreviewPanel}
+            >
               <PreviewPanel />
             </ResizablePanel>
 
             <ResizableHandle withHandle />
 
             {/* Properties Panel */}
-            <ResizablePanel defaultSize={20} minSize={15}>
+            <ResizablePanel
+              defaultSize={propertiesPanel}
+              minSize={15}
+              onResize={setPropertiesPanel}
+            >
               <PropertiesPanel />
             </ResizablePanel>
           </ResizablePanelGroup>
@@ -39,7 +83,11 @@ export default function Editor() {
         <ResizableHandle withHandle />
 
         {/* Timeline */}
-        <ResizablePanel defaultSize={50} minSize={15}>
+        <ResizablePanel
+          defaultSize={timeline}
+          minSize={15}
+          onResize={setTimeline}
+        >
           <Timeline />
         </ResizablePanel>
       </ResizablePanelGroup>
diff --git a/apps/web/src/app/fonts/GeistMonoVF.woff b/apps/web/src/app/fonts/GeistMonoVF.woff
deleted file mode 100644
index f2ae185c..00000000
Binary files a/apps/web/src/app/fonts/GeistMonoVF.woff and /dev/null differ
diff --git a/apps/web/src/app/fonts/GeistVF.woff b/apps/web/src/app/fonts/GeistVF.woff
deleted file mode 100644
index 1b62daac..00000000
Binary files a/apps/web/src/app/fonts/GeistVF.woff and /dev/null differ
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 31bd3692..2169dbbc 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -32,7 +28,7 @@ body {
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.6rem;
+    --radius: 1rem;
     --sidebar-background: 0 0% 100%;
     --sidebar-foreground: 0 0% 3.9%;
     --sidebar-primary: 0 0% 9%;
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index d7dd18a5..6696e884 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,20 +1,15 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
+import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { Analytics } from "@vercel/analytics/react";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
 import { TooltipProvider } from "../components/ui/tooltip";
+import { AppProvider } from "@/components/app-provider";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
 });
 
 export const metadata: Metadata = {
@@ -29,15 +24,15 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`${inter.variable} font-sans antialiased`}>
         <ThemeProvider attribute="class" forcedTheme="dark" enableSystem>
-          <TooltipProvider>
-            {children}
-            <Analytics />
-            <Toaster />
-          </TooltipProvider>
+          <AppProvider>
+            <TooltipProvider>
+              {children}
+              <Analytics />
+              <Toaster />
+            </TooltipProvider>
+          </AppProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 9b8a74c6..57967b7a 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,3 +1,11 @@
+import { Hero } from "@/components/landing/hero";
+import { Header } from "@/components/header";
+
 export default function Home() {
-  return <div>Hello World</div>;
-}
\ No newline at end of file
+  return (
+    <div>
+      <Header />
+      <Hero />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/app-provider.tsx b/apps/web/src/components/app-provider.tsx
new file mode 100644
index 00000000..257fc8fa
--- /dev/null
+++ b/apps/web/src/components/app-provider.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect } from "react";
+import { Loader2 } from "lucide-react";
+import { useAppStore } from "@/stores/app-store";
+import { usePanelStore } from "@/stores/panel-store";
+
+interface AppProviderProps {
+  children: React.ReactNode;
+}
+
+export function AppProvider({ children }: AppProviderProps) {
+  const { isInitializing, isPanelsReady, initializeApp } = useAppStore();
+  const { setInitialized } = usePanelStore();
+
+  useEffect(() => {
+    const initialize = async () => {
+      // Initialize the app
+      await initializeApp();
+
+      // Initialize panel store for future resize events
+      setInitialized();
+    };
+
+    initialize();
+  }, [initializeApp, setInitialized]);
+
+  // Show loading screen while initializing
+  if (isInitializing || !isPanelsReady) {
+    return (
+      <div className="h-screen w-screen flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">Loading editor...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // App is ready, render children
+  return <>{children}</>;
+}
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
new file mode 100644
index 00000000..f59193d0
--- /dev/null
+++ b/apps/web/src/components/editor-header.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "./ui/button";
+import { ChevronLeft, Download } from "lucide-react";
+import { useProjectStore } from "@/stores/project-store";
+import { useMediaStore } from "@/stores/media-store";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { HeaderBase } from "./header-base";
+
+export function EditorHeader() {
+  const { activeProject } = useProjectStore();
+  const { mediaItems } = useMediaStore();
+  const { tracks } = useTimelineStore();
+
+  const handleExport = () => {
+    // TODO: Implement export functionality
+    console.log("Export project");
+  };
+
+  const leftContent = (
+    <Link
+      href="/"
+      className="font-medium tracking-tight flex items-center gap-2 hover:opacity-80 transition-opacity"
+    >
+      <ChevronLeft className="h-4 w-4" />
+      <span className="text-sm">{activeProject?.name || "Loading..."}</span>
+    </Link>
+  );
+
+  const centerContent = (
+    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+      <span>{mediaItems.length} media</span>
+      <span>•</span>
+      <span>{tracks.length} tracks</span>
+    </div>
+  );
+
+  const rightContent = (
+    <nav className="flex items-center gap-2">
+      <Button size="sm" onClick={handleExport}>
+        <Download className="h-4 w-4" />
+        <span className="text-sm">Export</span>
+      </Button>
+    </nav>
+  );
+
+  return (
+    <HeaderBase
+      leftContent={leftContent}
+      centerContent={centerContent}
+      rightContent={rightContent}
+      className="bg-background border-b"
+    />
+  );
+}
diff --git a/apps/web/src/components/editor/media-panel.tsx b/apps/web/src/components/editor/media-panel.tsx
new file mode 100644
index 00000000..1e5aa465
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { Button } from "../ui/button";
+import { AspectRatio } from "../ui/aspect-ratio";
+import { useMediaStore } from "@/stores/media-store";
+import { Plus, Image, Video, Music, Upload } from "lucide-react";
+import { useState, useRef } from "react";
+
+export function MediaPanel() {
+  const { mediaItems, addMediaItem } = useMediaStore();
+  const [isDragOver, setIsDragOver] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  const handleAddSampleMedia = () => {
+    // Just for testing - add a sample media item
+    addMediaItem({
+      name: `Sample ${mediaItems.length + 1}`,
+      type: "image",
+    });
+  };
+
+  const getMediaIcon = (type: string) => {
+    switch (type) {
+      case "video":
+        return <Video className="h-4 w-4" />;
+      case "audio":
+        return <Music className="h-4 w-4" />;
+      default:
+        return <Image className="h-4 w-4" />;
+    }
+  };
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounterRef.current += 1;
+    if (!isDragOver) {
+      setIsDragOver(true);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current === 0) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    dragCounterRef.current = 0;
+    // TODO: Handle file drop functionality
+  };
+
+  return (
+    <div
+      className={`h-full overflow-y-auto transition-colors duration-200 relative ${
+        isDragOver ? "bg-accent/30 border-accent" : ""
+      }`}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {/* Drag Overlay */}
+      {isDragOver && (
+        <div className="absolute inset-0 bg-accent/20 backdrop-blur-lg border-2 border-dashed border-accent rounded-lg flex items-center justify-center z-10 pointer-events-none">
+          <div className="text-center">
+            <Upload className="h-8 w-8 text-accent mx-auto mb-2" />
+            <p className="text-sm font-medium text-accent">Drop files here</p>
+            <p className="text-xs text-muted-foreground">
+              Images, videos, and audio files
+            </p>
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-4 p-2 h-full">
+        {/* Media Grid */}
+        {mediaItems.length === 0 ? (
+          <EmptyMedia onAddSample={handleAddSampleMedia} />
+        ) : (
+          <div className="grid grid-cols-2 gap-2">
+            {mediaItems.map((item) => (
+              <Button
+                key={item.id}
+                variant="outline"
+                className="flex flex-col gap-2 p-2 h-auto overflow-hidden"
+              >
+                <AspectRatio ratio={16 / 9} className="w-full">
+                  <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground">
+                    {getMediaIcon(item.type)}
+                    <span className="text-xs mt-1 truncate max-w-full px-1">
+                      {item.name}
+                    </span>
+                  </div>
+                </AspectRatio>
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function EmptyMedia({ onAddSample }: { onAddSample: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center h-full">
+      <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
+        <Image className="h-8 w-8 text-muted-foreground" />
+      </div>
+      <p className="text-sm text-muted-foreground">No media in project</p>
+      <p className="text-xs text-muted-foreground/70 mt-1">
+        Drag files or click to add media
+      </p>
+      <Button
+        variant="outline"
+        size="sm"
+        className="mt-4"
+        onClick={onAddSample}
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        Add Sample
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
new file mode 100644
index 00000000..4361e967
--- /dev/null
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -0,0 +1,11 @@
+export function PreviewPanel() {
+  return (
+    <div className="h-full flex items-center justify-center">
+      <div className="aspect-video bg-black/90 w-full max-w-4xl mx-4 rounded-lg shadow-lg relative group">
+        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50 group-hover:text-muted-foreground/80 transition-colors">
+          Drop media here or click to import
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx
new file mode 100644
index 00000000..280b6dad
--- /dev/null
+++ b/apps/web/src/components/editor/properties-panel.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Slider } from "../ui/slider";
+import { ScrollArea } from "../ui/scroll-area";
+import { Separator } from "../ui/separator";
+
+export function PropertiesPanel() {
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-6 p-5">
+        {/* Transform */}
+        <div className="space-y-4">
+          <h3 className="text-sm font-medium">Transform</h3>
+          <div className="space-y-2">
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <Label htmlFor="x">X Position</Label>
+                <Input id="x" type="number" defaultValue="0" />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="y">Y Position</Label>
+                <Input id="y" type="number" defaultValue="0" />
+              </div>
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="rotation">Rotation</Label>
+              <Slider
+                id="rotation"
+                max={360}
+                step={1}
+                defaultValue={[0]}
+                className="mt-2"
+              />
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* Effects */}
+        <div className="space-y-4">
+          <h3 className="text-sm font-medium">Effects</h3>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label htmlFor="opacity">Opacity</Label>
+              <Slider
+                id="opacity"
+                max={100}
+                step={1}
+                defaultValue={[100]}
+                className="mt-2"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="blur">Blur</Label>
+              <Slider
+                id="blur"
+                max={20}
+                step={0.5}
+                defaultValue={[0]}
+                className="mt-2"
+              />
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* Timing */}
+        <div className="space-y-4">
+          <h3 className="text-sm font-medium">Timing</h3>
+          <div className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="duration">Duration (seconds)</Label>
+              <Input
+                id="duration"
+                type="number"
+                min="0"
+                step="0.1"
+                defaultValue="5"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="delay">Delay (seconds)</Label>
+              <Input
+                id="delay"
+                type="number"
+                min="0"
+                step="0.1"
+                defaultValue="0"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
new file mode 100644
index 00000000..da44022e
--- /dev/null
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -0,0 +1,173 @@
+"use client";
+
+import { ScrollArea } from "../ui/scroll-area";
+import { Button } from "../ui/button";
+import {
+  Scissors,
+  ArrowLeftToLine,
+  ArrowRightToLine,
+  Trash2,
+  Snowflake,
+  Copy,
+  SplitSquareHorizontal,
+} from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "../ui/tooltip";
+import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
+
+export function Timeline() {
+  const { tracks, addTrack } = useTimelineStore();
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Toolbar */}
+      <div className="border-b flex items-center px-2 py-1 gap-1">
+        <TooltipProvider delayDuration={500}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Scissors className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Split clip (S)</TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <ArrowLeftToLine className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Split and keep left (A)</TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <ArrowRightToLine className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Split and keep right (D)</TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <SplitSquareHorizontal className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Separate audio (E)</TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Copy className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Duplicate clip (Ctrl+D)</TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Snowflake className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Freeze frame (F)</TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Delete clip (Delete)</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      {/* Tracks Area */}
+      <ScrollArea className="flex-1">
+        <div className="min-w-[800px]">
+          {/* Time Markers */}
+          <div className="py-2 pt-1 flex items-center">
+            {Array.from({ length: 16 }).map((_, i) => (
+              <div
+                key={i}
+                className="w-[50px] flex items-end justify-center text-xs text-muted-foreground"
+              >
+                {i}s
+              </div>
+            ))}
+          </div>
+
+          {/* Timeline Tracks */}
+          {tracks.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
+                <SplitSquareHorizontal className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <p className="text-sm text-muted-foreground">
+                No tracks in timeline
+              </p>
+              <p className="text-xs text-muted-foreground/70 mt-1">
+                Add a video or audio track to get started
+              </p>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-2.5">
+              {tracks.map((track) => (
+                <TimelineTrackComponent key={track.id} track={track} />
+              ))}
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+function TimelineTrackComponent({ track }: { track: TimelineTrack }) {
+  const getTrackColor = (type: string) => {
+    switch (type) {
+      case "video":
+        return "bg-blue-500/20 border-blue-500/30";
+      case "audio":
+        return "bg-green-500/20 border-green-500/30";
+      case "effects":
+        return "bg-purple-500/20 border-purple-500/30";
+      default:
+        return "bg-gray-500/20 border-gray-500/30";
+    }
+  };
+
+  return (
+    <div className="flex items-center px-2">
+      <div className="w-24 text-xs text-muted-foreground flex-shrink-0 mr-2">
+        {track.name}
+      </div>
+
+      <div className="flex-1 h-[60px]">
+        {track.clips.length === 0 ? (
+          <div className="h-full rounded-sm border-2 border-dashed border-muted/30 flex items-center justify-center text-xs text-muted-foreground">
+            Drop media here
+          </div>
+        ) : (
+          <div
+            className={`h-full rounded-sm border cursor-pointer transition-colors ${getTrackColor(track.type)} flex items-center px-2`}
+          >
+            <span className="text-xs text-foreground/80">
+              {track.clips.length} clip{track.clips.length !== 1 ? "s" : ""}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/header-base.tsx b/apps/web/src/components/header-base.tsx
new file mode 100644
index 00000000..5f7b2b8d
--- /dev/null
+++ b/apps/web/src/components/header-base.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { ReactNode } from "react";
+
+interface HeaderBaseProps {
+  leftContent?: ReactNode;
+  centerContent?: ReactNode;
+  rightContent?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function HeaderBase({
+  leftContent,
+  centerContent,
+  rightContent,
+  className,
+  children,
+}: HeaderBaseProps) {
+  // If children is provided, render it directly without the grid layout
+  if (children) {
+    return (
+      <header className={cn("px-6 h-16 flex items-center", className)}>
+        {children}
+      </header>
+    );
+  }
+
+  return (
+    <header
+      className={cn("px-6 h-16 flex justify-between items-center", className)}
+    >
+      {leftContent && <div className="flex items-center">{leftContent}</div>}
+      {centerContent && (
+        <div className="flex items-center">{centerContent}</div>
+      )}
+      {rightContent && <div className="flex items-center">{rightContent}</div>}
+    </header>
+  );
+}
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
new file mode 100644
index 00000000..a2ac5016
--- /dev/null
+++ b/apps/web/src/components/header.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "./ui/button";
+import { ArrowRight } from "lucide-react";
+import { HeaderBase } from "./header-base";
+
+export function Header() {
+  const leftContent = (
+    <Link href="/" className="font-medium tracking-tight">
+      AppCut
+    </Link>
+  );
+
+  const rightContent = (
+    <nav className="flex items-center">
+      <Link href="/editor">
+        <Button variant="ghost" className="text-sm">
+          Open editor
+        </Button>
+      </Link>
+      <Link href="https://github.com/mazeincoding/AppCut" target="_blank">
+        <Button variant="ghost" className="text-sm">
+          GitHub
+        </Button>
+      </Link>
+      <Link href="/editor">
+        <Button size="sm" className="text-sm ml-4">
+          Start editing
+          <ArrowRight className="h-4 w-4" />
+        </Button>
+      </Link>
+    </nav>
+  );
+
+  return <HeaderBase leftContent={leftContent} rightContent={rightContent} />;
+}
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
new file mode 100644
index 00000000..8821cb71
--- /dev/null
+++ b/apps/web/src/components/landing/hero.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { motion } from "motion/react";
+import { Button } from "../ui/button";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+
+export function Hero() {
+  return (
+    <div className="relative min-h-screen flex flex-col items-center justify-center text-center px-4">
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1 }}
+        className="max-w-3xl mx-auto"
+      >
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.8 }}
+          className="inline-block"
+        >
+          <h1 className="text-5xl sm:text-7xl font-bold tracking-tighter">
+            The open source
+          </h1>
+          <h1 className="text-5xl sm:text-7xl font-bold tracking-tighter mt-2">
+            CapCut alternative.
+          </h1>
+        </motion.div>
+
+        <motion.p
+          className="mt-12 text-lg sm:text-xl text-muted-foreground font-light tracking-wide max-w-xl mx-auto"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.4, duration: 0.8 }}
+        >
+          A simple but powerful video editor that gets the job done. In your
+          browser.
+        </motion.p>
+
+        <motion.div
+          className="mt-12 flex gap-8 justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.6, duration: 0.8 }}
+        >
+          <Link href="/editor">
+            <Button size="lg" className="px-6 h-11 text-base">
+              <span className="relative z-10">Start editing</span>
+              <ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
+            </Button>
+          </Link>
+        </motion.div>
+      </motion.div>
+
+      <motion.div
+        className="absolute bottom-12 left-0 right-0 text-center text-sm text-muted-foreground/60"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.8, duration: 0.8 }}
+      >
+        Currently in beta • Open source on{" "}
+        <Link
+          href="https://github.com/mazeincoding/AppCut"
+          className="text-foreground underline"
+        >
+          GitHub
+        </Link>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/media-panel.tsx b/apps/web/src/components/media-panel.tsx
deleted file mode 100644
index 10fc0fb5..00000000
--- a/apps/web/src/components/media-panel.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-
-import { Button } from "./ui/button";
-import { ScrollArea } from "./ui/scroll-area";
-import { AspectRatio } from "./ui/aspect-ratio";
-
-const mediaItems = [
-  { name: "Sample 1", type: "image" },
-  { name: "Sample 2", type: "image" },
-  { name: "Sample 3", type: "image" },
-  { name: "Sample 4", type: "image" },
-  { name: "Sample 5", type: "image" },
-  { name: "Sample 6", type: "image" },
-] as const;
-
-export function MediaPanel() {
-  return (
-    <ScrollArea className="h-full">
-      <div className="space-y-4 p-2">
-        {/* Media Grid */}
-        <div className="grid grid-cols-2 gap-2">
-          {mediaItems.map((item) => (
-            <Button
-              key={item.name}
-              variant="outline"
-              className="flex flex-col gap-2 p-0 h-auto overflow-hidden"
-            >
-              <AspectRatio ratio={16 / 9} className="w-full">
-                <div className="w-full h-full bg-muted/30 flex items-center justify-center text-muted-foreground text-xs">
-                  {item.name}
-                </div>
-              </AspectRatio>
-            </Button>
-          ))}
-        </div>
-      </div>
-    </ScrollArea>
-  );
-}
diff --git a/apps/web/src/components/preview-panel.tsx b/apps/web/src/components/preview-panel.tsx
deleted file mode 100644
index 4361e967..00000000
--- a/apps/web/src/components/preview-panel.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export function PreviewPanel() {
-  return (
-    <div className="h-full flex items-center justify-center">
-      <div className="aspect-video bg-black/90 w-full max-w-4xl mx-4 rounded-lg shadow-lg relative group">
-        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50 group-hover:text-muted-foreground/80 transition-colors">
-          Drop media here or click to import
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/components/properties-panel.tsx b/apps/web/src/components/properties-panel.tsx
deleted file mode 100644
index 612e2ef0..00000000
--- a/apps/web/src/components/properties-panel.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-"use client";
-
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import { Slider } from "./ui/slider";
-import { ScrollArea } from "./ui/scroll-area";
-import { Separator } from "./ui/separator";
-
-export function PropertiesPanel() {
-  return (
-    <ScrollArea className="h-full">
-      <div className="space-y-6 p-5">
-        {/* Transform */}
-        <div className="space-y-4">
-          <h3 className="text-sm font-medium">Transform</h3>
-          <div className="space-y-2">
-            <div className="grid grid-cols-2 gap-2">
-              <div className="space-y-1">
-                <Label htmlFor="x">X Position</Label>
-                <Input id="x" type="number" defaultValue="0" />
-              </div>
-              <div className="space-y-1">
-                <Label htmlFor="y">Y Position</Label>
-                <Input id="y" type="number" defaultValue="0" />
-              </div>
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="rotation">Rotation</Label>
-              <Slider
-                id="rotation"
-                max={360}
-                step={1}
-                defaultValue={[0]}
-                className="mt-2"
-              />
-            </div>
-          </div>
-        </div>
-
-        <Separator />
-
-        {/* Effects */}
-        <div className="space-y-4">
-          <h3 className="text-sm font-medium">Effects</h3>
-          <div className="space-y-4">
-            <div className="space-y-1">
-              <Label htmlFor="opacity">Opacity</Label>
-              <Slider
-                id="opacity"
-                max={100}
-                step={1}
-                defaultValue={[100]}
-                className="mt-2"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="blur">Blur</Label>
-              <Slider
-                id="blur"
-                max={20}
-                step={0.5}
-                defaultValue={[0]}
-                className="mt-2"
-              />
-            </div>
-          </div>
-        </div>
-
-        <Separator />
-
-        {/* Timing */}
-        <div className="space-y-4">
-          <h3 className="text-sm font-medium">Timing</h3>
-          <div className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="duration">Duration (seconds)</Label>
-              <Input
-                id="duration"
-                type="number"
-                min="0"
-                step="0.1"
-                defaultValue="5"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="delay">Delay (seconds)</Label>
-              <Input
-                id="delay"
-                type="number"
-                min="0"
-                step="0.1"
-                defaultValue="0"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </ScrollArea>
-  );
-}
diff --git a/apps/web/src/components/timeline.tsx b/apps/web/src/components/timeline.tsx
deleted file mode 100644
index cde982ae..00000000
--- a/apps/web/src/components/timeline.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client";
-
-import { ScrollArea } from "./ui/scroll-area";
-import { Button } from "./ui/button";
-import {
-  Scissors,
-  ArrowLeftToLine,
-  ArrowRightToLine,
-  Trash2,
-  Snowflake,
-  Copy,
-  SplitSquareHorizontal,
-} from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  TooltipProvider,
-} from "./ui/tooltip";
-
-export function Timeline() {
-  return (
-    <div className="h-full flex flex-col">
-      {/* Toolbar */}
-      <div className="border-b flex items-center px-2 py-1 gap-1">
-        <TooltipProvider delayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
-                <Scissors className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Split clip (S)</TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
-                <ArrowLeftToLine className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Split and keep left (A)</TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
-                <ArrowRightToLine className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Split and keep right (D)</TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
-                <SplitSquareHorizontal className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Separate audio (E)</TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
-                <Copy className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Duplicate clip (Ctrl+D)</TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
-                <Snowflake className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Freeze frame (F)</TooltipContent>
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon">
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Delete clip (Delete)</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-
-      {/* Tracks Area */}
-      <ScrollArea className="flex-1">
-        <div className="min-w-[800px]">
-          {/* Time Markers */}
-          <div className="py-2 pt-1 flex items-center">
-            {Array.from({ length: 16 }).map((_, i) => (
-              <div
-                key={i}
-                className="w-[50px] flex items-end justify-center text-xs text-muted-foreground"
-              >
-                {i}s
-              </div>
-            ))}
-          </div>
-
-          {/* Video Track */}
-          <div className="flex flex-col gap-2.5">
-            <div className="flex items-center px-2">
-              <div className="flex-1">
-                <TimelineClip />
-              </div>
-            </div>
-
-            {/* Audio Track */}
-            <div className="flex items-center px-2">
-              <div className="flex-1">
-                <TimelineClip />
-              </div>
-            </div>
-
-            {/* Effects Track */}
-            <div className="flex items-center px-2">
-              <div className="flex-1">
-                <TimelineClip />
-              </div>
-            </div>
-          </div>
-        </div>
-      </ScrollArea>
-    </div>
-  );
-}
-
-function TimelineClip() {
-  return (
-    <div className="flex-1 h-[3.8rem]">
-      <div className="h-full bg-blue-500/20 border border-blue-500/30 rounded-sm mx-3 cursor-pointer transition-colors" />
-    </div>
-  );
-}
diff --git a/apps/web/src/lib/auth-client.ts b/apps/web/src/lib/auth-client.ts
new file mode 100644
index 00000000..7c467e7e
--- /dev/null
+++ b/apps/web/src/lib/auth-client.ts
@@ -0,0 +1,4 @@
+import { createAuthClient } from "better-auth/react";
+export const authClient = createAuthClient({
+  baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL!,
+});
diff --git a/apps/web/src/lib/auth.ts b/apps/web/src/lib/auth.ts
new file mode 100644
index 00000000..84409b6d
--- /dev/null
+++ b/apps/web/src/lib/auth.ts
@@ -0,0 +1,23 @@
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { db } from "./db";
+
+export const auth = betterAuth({
+  database: drizzleAdapter(db, {
+    provider: "pg",
+    usePlural: true,
+  }),
+  secret: process.env.BETTER_AUTH_SECRET!,
+  user: {
+    deleteUser: {
+      enabled: true,
+    },
+  },
+  emailAndPassword: {
+    enabled: false,
+  },
+  appName: "AppCut",
+  trustedOrigins: ["http://localhost:3000"],
+});
+
+export type Auth = typeof auth;
diff --git a/apps/web/src/lib/db/index.tsx b/apps/web/src/lib/db/index.tsx
new file mode 100644
index 00000000..b66c6e39
--- /dev/null
+++ b/apps/web/src/lib/db/index.tsx
@@ -0,0 +1,14 @@
+import { drizzle } from "drizzle-orm/node-postgres";
+import { Pool } from "pg";
+import * as schema from "./schema";
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  max: 3,
+  idleTimeoutMillis: 10000,
+  connectionTimeoutMillis: 15000,
+  query_timeout: 20000,
+  statement_timeout: 20000,
+});
+
+export const db = drizzle(pool, { schema });
diff --git a/apps/web/src/lib/db/schema.ts b/apps/web/src/lib/db/schema.ts
new file mode 100644
index 00000000..02df5d4a
--- /dev/null
+++ b/apps/web/src/lib/db/schema.ts
@@ -0,0 +1,61 @@
+import { pgTable, text, timestamp, boolean } from "drizzle-orm/pg-core";
+
+export const users = pgTable("users", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  email: text("email").notNull().unique(),
+  emailVerified: boolean("email_verified")
+    .$defaultFn(() => false)
+    .notNull(),
+  image: text("image"),
+  createdAt: timestamp("created_at")
+    .$defaultFn(() => /* @__PURE__ */ new Date())
+    .notNull(),
+  updatedAt: timestamp("updated_at")
+    .$defaultFn(() => /* @__PURE__ */ new Date())
+    .notNull(),
+}).enableRLS();
+
+export const sessions = pgTable("sessions", {
+  id: text("id").primaryKey(),
+  expiresAt: timestamp("expires_at").notNull(),
+  token: text("token").notNull().unique(),
+  createdAt: timestamp("created_at").notNull(),
+  updatedAt: timestamp("updated_at").notNull(),
+  ipAddress: text("ip_address"),
+  userAgent: text("user_agent"),
+  userId: text("user_id")
+    .notNull()
+    .references(() => users.id, { onDelete: "cascade" }),
+}).enableRLS();
+
+export const accounts = pgTable("accounts", {
+  id: text("id").primaryKey(),
+  accountId: text("account_id").notNull(),
+  providerId: text("provider_id").notNull(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => users.id, { onDelete: "cascade" }),
+  accessToken: text("access_token"),
+  refreshToken: text("refresh_token"),
+  idToken: text("id_token"),
+  accessTokenExpiresAt: timestamp("access_token_expires_at"),
+  refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
+  scope: text("scope"),
+  password: text("password"),
+  createdAt: timestamp("created_at").notNull(),
+  updatedAt: timestamp("updated_at").notNull(),
+}).enableRLS();
+
+export const verifications = pgTable("verifications", {
+  id: text("id").primaryKey(),
+  identifier: text("identifier").notNull(),
+  value: text("value").notNull(),
+  expiresAt: timestamp("expires_at").notNull(),
+  createdAt: timestamp("created_at").$defaultFn(
+    () => /* @__PURE__ */ new Date()
+  ),
+  updatedAt: timestamp("updated_at").$defaultFn(
+    () => /* @__PURE__ */ new Date()
+  ),
+}).enableRLS();
diff --git a/apps/web/src/stores/app-store.ts b/apps/web/src/stores/app-store.ts
new file mode 100644
index 00000000..746fdc45
--- /dev/null
+++ b/apps/web/src/stores/app-store.ts
@@ -0,0 +1,35 @@
+import { create } from "zustand";
+
+interface AppState {
+  // Loading states
+  isInitializing: boolean;
+  isPanelsReady: boolean;
+
+  // Actions
+  setInitializing: (loading: boolean) => void;
+  setPanelsReady: (ready: boolean) => void;
+  initializeApp: () => Promise<void>;
+}
+
+export const useAppStore = create<AppState>((set, get) => ({
+  // Initial states
+  isInitializing: true,
+  isPanelsReady: false,
+
+  // Actions
+  setInitializing: (loading) => {
+    set({ isInitializing: loading });
+  },
+
+  setPanelsReady: (ready) => {
+    set({ isPanelsReady: ready });
+  },
+
+  initializeApp: async () => {
+    console.log("Initializing video editor...");
+    set({ isInitializing: true, isPanelsReady: false });
+
+    set({ isPanelsReady: true, isInitializing: false });
+    console.log("Video editor ready");
+  },
+}));
diff --git a/apps/web/src/stores/media-store.ts b/apps/web/src/stores/media-store.ts
new file mode 100644
index 00000000..25d11af8
--- /dev/null
+++ b/apps/web/src/stores/media-store.ts
@@ -0,0 +1,35 @@
+import { create } from "zustand";
+
+export interface MediaItem {
+  id: string;
+  name: string;
+  type: "image" | "video" | "audio";
+}
+
+interface MediaStore {
+  mediaItems: MediaItem[];
+
+  // Actions
+  addMediaItem: (item: Omit<MediaItem, "id">) => void;
+  removeMediaItem: (id: string) => void;
+}
+
+export const useMediaStore = create<MediaStore>((set, get) => ({
+  mediaItems: [],
+
+  addMediaItem: (item) => {
+    const newItem: MediaItem = {
+      ...item,
+      id: crypto.randomUUID(),
+    };
+    set((state) => ({
+      mediaItems: [...state.mediaItems, newItem],
+    }));
+  },
+
+  removeMediaItem: (id) => {
+    set((state) => ({
+      mediaItems: state.mediaItems.filter((item) => item.id !== id),
+    }));
+  },
+}));
diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
new file mode 100644
index 00000000..ea2dacb9
--- /dev/null
+++ b/apps/web/src/stores/panel-store.ts
@@ -0,0 +1,79 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface PanelState {
+  // Horizontal panel sizes
+  toolsPanel: number;
+  previewPanel: number;
+  propertiesPanel: number;
+
+  // Vertical panel sizes
+  mainContent: number;
+  timeline: number;
+
+  // Flag to prevent initial overwrites
+  isInitialized: boolean;
+
+  // Actions
+  setToolsPanel: (size: number) => void;
+  setPreviewPanel: (size: number) => void;
+  setPropertiesPanel: (size: number) => void;
+  setMainContent: (size: number) => void;
+  setTimeline: (size: number) => void;
+  setInitialized: () => void;
+}
+
+export const usePanelStore = create<PanelState>()(
+  persist(
+    (set, get) => ({
+      // Default sizes
+      toolsPanel: 20,
+      previewPanel: 60,
+      propertiesPanel: 20,
+      mainContent: 50,
+      timeline: 50,
+      isInitialized: false,
+
+      // Actions
+      setToolsPanel: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ toolsPanel: size });
+      },
+      setPreviewPanel: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ previewPanel: size });
+      },
+      setPropertiesPanel: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ propertiesPanel: size });
+      },
+      setMainContent: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ mainContent: size });
+      },
+      setTimeline: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ timeline: size });
+      },
+      setInitialized: () => {
+        console.log("Panel store initialized for resize events");
+        set({ isInitialized: true });
+      },
+    }),
+    {
+      name: "panel-sizes",
+      partialize: (state) => ({
+        toolsPanel: state.toolsPanel,
+        previewPanel: state.previewPanel,
+        propertiesPanel: state.propertiesPanel,
+        mainContent: state.mainContent,
+        timeline: state.timeline,
+      }),
+    }
+  )
+);
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
new file mode 100644
index 00000000..734c07e2
--- /dev/null
+++ b/apps/web/src/stores/project-store.ts
@@ -0,0 +1,28 @@
+import { TProject } from "@/types/project";
+import { create } from "zustand";
+
+interface ProjectStore {
+  activeProject: TProject | null;
+
+  // Actions
+  createNewProject: (name: string) => void;
+  closeProject: () => void;
+}
+
+export const useProjectStore = create<ProjectStore>((set) => ({
+  activeProject: null,
+
+  createNewProject: (name: string) => {
+    const newProject: TProject = {
+      id: crypto.randomUUID(),
+      name,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    set({ activeProject: newProject });
+  },
+
+  closeProject: () => {
+    set({ activeProject: null });
+  },
+}));
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
new file mode 100644
index 00000000..66fb085c
--- /dev/null
+++ b/apps/web/src/stores/timeline-store.ts
@@ -0,0 +1,61 @@
+import { create } from "zustand";
+
+export interface TimelineClip {
+  id: string;
+  mediaId: string;
+  name: string;
+  duration: number;
+}
+
+export interface TimelineTrack {
+  id: string;
+  name: string;
+  type: "video" | "audio" | "effects";
+  clips: TimelineClip[];
+}
+
+interface TimelineStore {
+  tracks: TimelineTrack[];
+
+  // Actions
+  addTrack: (type: "video" | "audio" | "effects") => void;
+  removeTrack: (trackId: string) => void;
+  addClipToTrack: (trackId: string, clip: Omit<TimelineClip, "id">) => void;
+}
+
+export const useTimelineStore = create<TimelineStore>((set) => ({
+  tracks: [],
+
+  addTrack: (type) => {
+    const newTrack: TimelineTrack = {
+      id: crypto.randomUUID(),
+      name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`,
+      type,
+      clips: [],
+    };
+    set((state) => ({
+      tracks: [...state.tracks, newTrack],
+    }));
+  },
+
+  removeTrack: (trackId) => {
+    set((state) => ({
+      tracks: state.tracks.filter((track) => track.id !== trackId),
+    }));
+  },
+
+  addClipToTrack: (trackId, clipData) => {
+    const newClip: TimelineClip = {
+      ...clipData,
+      id: crypto.randomUUID(),
+    };
+
+    set((state) => ({
+      tracks: state.tracks.map((track) =>
+        track.id === trackId
+          ? { ...track, clips: [...track.clips, newClip] }
+          : track
+      ),
+    }));
+  },
+}));
diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts
new file mode 100644
index 00000000..74886b24
--- /dev/null
+++ b/apps/web/src/types/project.ts
@@ -0,0 +1,6 @@
+export interface TProject {
+  id: string;
+  name: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
-- 
cgit v1.3.1