fix: merge conflicts & updated more URLs following our new path

.cursorignore

@@ -0,0 +1 @@
+!apps/web/.env.example

.github/CONTRIBUTING.md

@@ -13,30 +13,101 @@ Thank you for your interest in contributing to OpenCut! This document provides g
 ## Development Setup
 
 ### Prerequisites
+
 - Node.js 18+
 - Bun (latest version)
 - Docker (for local database)
 
 ### Local Development
-1. Copy `.env.example` to `.env.local` and configure your environment variables
+
-2. Start the database: `docker-compose up -d` (run from project root)
+1. Start the database and Redis services:
-3. Navigate to the web app: `cd apps/web`
+
-4. Run database migrations: `bun run db:migrate`
+   ```bash
-5. Start the development server: `bun run dev`
+   # From project root
+   docker-compose up -d
+   ```
+
+2. Navigate to the web app directory:
+
+   ```bash
+   cd apps/web
+   ```
+
+3. Copy `.env.example` to `.env.local`:
+
+   ```bash
+   # Unix/Linux/Mac
+   cp .env.example .env.local
+
+   # Windows Command Prompt
+   copy .env.example .env.local
+
+   # Windows PowerShell
+   Copy-Item .env.example .env.local
+   ```
+
+4. Configure required environment variables in `.env.local`:
+
+   **Required Variables:**
+
+   ```bash
+   # Database (matches docker-compose.yaml)
+   DATABASE_URL="postgresql://opencut:opencutthegoat@localhost:5432/opencut"
+
+   # Generate a secure secret for Better Auth
+   BETTER_AUTH_SECRET="your-generated-secret-here"
+   BETTER_AUTH_URL="http://localhost:3000"
+
+   # Redis (matches docker-compose.yaml)
+   UPSTASH_REDIS_REST_URL="http://localhost:8079"
+   UPSTASH_REDIS_REST_TOKEN="example_token"
+
+   # Development
+   NODE_ENV="development"
+   ```
+
+   **Generate BETTER_AUTH_SECRET:**
+
+   ```bash
+   # Unix/Linux/Mac
+   openssl rand -base64 32
+
+   # Windows PowerShell (simple method)
+   [System.Web.Security.Membership]::GeneratePassword(32, 0)
+
+   # Cross-platform (using Node.js)
+   node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
+
+   # Or use an online generator: https://generate-secret.vercel.app/32
+   ```
+
+   **Optional Variables (for Google OAuth):**
+
+   ```bash
+   # Only needed if you want to test Google login
+   GOOGLE_CLIENT_ID="your-google-client-id"
+   GOOGLE_CLIENT_SECRET="your-google-client-secret"
+   ```
+
+5. Run database migrations: `bun run db:migrate`
+6. Start the development server: `bun run dev`
 
 ## How to Contribute
 
 ### Reporting Bugs
+
 - Use the bug report template
 - Include steps to reproduce
 - Provide screenshots if applicable
 
 ### Suggesting Features
+
 - Use the feature request template
 - Explain the use case
 - Consider implementation details
 
 ### Code Contributions
+
 1. Create a new branch: `git checkout -b feature/your-feature-name`
 2. Make your changes
 3. Navigate to the web app directory: `cd apps/web`

README.md

@@ -26,29 +26,82 @@ A free, open-source video editor for web, desktop, and mobile.
 
 ## Getting Started
 
-1. **Clone the repository:**
+### Prerequisites
+
+Before you begin, ensure you have the following installed on your system:
+
+- [Bun](https://bun.sh/docs/installation)
+- [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/)
+- [Node.js](https://nodejs.org/en/) (for `npm` alternative)
+
+### Setup
+
+1.  **Clone the repository**
     ```bash
     git clone <repo-url>
     cd OpenCut
     ```
-2. **Install dependencies:**
+
+2.  **Start backend services**
+    From the project root, start the PostgreSQL and Redis services:
+    ```bash
+    docker-compose up -d
+    ```
+
+3.  **Set up environment variables**
+    Navigate into the web app's directory and create a `.env` file from the example:
     ```bash
     cd apps/web
-   npm install
+    cp .env.example .env
-   # or, with Bun
-   bun install
     ```
-3. **Run the development server:**
+    *The default values in the `.env` file should work for local development.*
+
+4.  **Install dependencies**
+    Install the project dependencies using `bun` (recommended) or `npm`.
     ```bash
-   npm run dev
+    # With bun
-   # or, with Bun
+    bun install
-   bun run dev
+
+    # Or with npm
+    npm install
     ```
-4. **Open in browser:**
+
-   Visit [http://localhost:3000](http://localhost:3000)
+5.  **Run database migrations**
+    Apply the database schema to your local database:
+    ```bash
+    # With bun
+    bun run db:push:local
+
+    # Or with npm
+    npm run db:push:local
+    ```
+
+6.  **Start the development server**
+    ```bash
+    # With bun
+    bun run dev
+
+    # Or with npm
+    npm run dev
+    ```
+
+The application will be available at [http://localhost:3000](http://localhost:3000).
+
+=======
+
 
 ## Contributing
 
+Visit [CONTRIBUTING.md](.github/CONTRIBUTING.md)
+=======
+We welcome contributions! Please see our [Contributing Guide](.github/CONTRIBUTING.md) for detailed setup instructions and development guidelines.
+
+Quick start for contributors:
+
+- Fork the repo and clone locally
+- Follow the setup instructions in CONTRIBUTING.md
+- Create a feature branch and submit a PR
+
 ## License
 
-MIT [Details](LICENSE)
+[MIT LICENSE](LICENSE)

apps/web/Dockerfile

@@ -0,0 +1,36 @@
+FROM oven/bun:latest AS base
+
+# Install dependencies
+FROM base AS deps
+WORKDIR /app
+COPY package.json bun.lock ./
+RUN bun install --frozen-lockfile
+
+# Build the application
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN bun run build
+
+# Production image
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["bun", "server.js"]

apps/web/bun.lock

@@ -41,6 +41,7 @@
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
         "vaul": "^1.1.1",
+        "zod": "^3.25.67",
         "zustand": "^5.0.2",
       },
       "devDependencies": {

apps/web/package.json

@@ -51,6 +51,7 @@
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.1",
+    "zod": "^3.25.67",
     "zustand": "^5.0.2"
   },
   "devDependencies": {

apps/web/src/components/auth-form.tsx

@@ -0,0 +1,398 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { signUp, signIn } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import Link from "next/link";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { GoogleIcon } from "@/components/icons";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+// Zod schemas
+const loginSchema = z.object({
+  email: z.string().email("Please enter a valid email address"),
+  password: z.string().min(1, "Password is required"),
+});
+
+const signupSchema = z.object({
+  name: z.string().min(2, "Name must be at least 2 characters"),
+  email: z.string().email("Please enter a valid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+type SignupFormData = z.infer<typeof signupSchema>;
+
+interface AuthFormProps {
+  mode: "login" | "signup";
+}
+
+const authConfig = {
+  login: {
+    title: "Welcome back",
+    description: "Sign in to your account to continue",
+    buttonText: "Sign in",
+    linkText: "Don't have an account?",
+    linkHref: "/signup",
+    linkLabel: "Sign up",
+    successRedirect: "/editor",
+  },
+  signup: {
+    title: "Create your account",
+    description: "Get started with your free account today",
+    buttonText: "Create account",
+    linkText: "Already have an account?",
+    linkHref: "/login",
+    linkLabel: "Sign in",
+    successRedirect: "/login",
+  },
+} as const;
+
+interface AuthFormContentProps {
+  error: string | null;
+  setError: (error: string | null) => void;
+  isGoogleLoading: boolean;
+  config: typeof authConfig.login | typeof authConfig.signup;
+  router: ReturnType<typeof useRouter>;
+}
+
+function LoginFormContent({
+  error,
+  setError,
+  isGoogleLoading,
+  config,
+  router,
+}: AuthFormContentProps) {
+  const form = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { email: "", password: "" },
+  });
+
+  const { isSubmitting } = form.formState;
+  const isAnyLoading = isSubmitting || isGoogleLoading;
+
+  const onSubmit = async (data: LoginFormData) => {
+    setError(null);
+
+    try {
+      const { error } = await signIn.email({
+        email: data.email,
+        password: data.password,
+      });
+
+      if (error) {
+        setError(error.message || "An unexpected error occurred.");
+        return;
+      }
+
+      router.push(config.successRedirect);
+    } catch (error) {
+      setError("An unexpected error occurred. Please try again.");
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input
+                  type="email"
+                  placeholder="m@example.com"
+                  disabled={isAnyLoading}
+                  className="h-11"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input
+                  type="password"
+                  disabled={isAnyLoading}
+                  className="h-11"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button
+          type="submit"
+          disabled={isAnyLoading}
+          className="w-full h-11"
+          size="lg"
+        >
+          {isSubmitting ? (
+            <Loader2 className="animate-spin" />
+          ) : (
+            config.buttonText
+          )}
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+function SignupFormContent({
+  error,
+  setError,
+  isGoogleLoading,
+  config,
+  router,
+}: AuthFormContentProps) {
+  const form = useForm<SignupFormData>({
+    resolver: zodResolver(signupSchema),
+    defaultValues: { email: "", password: "", name: "" },
+  });
+
+  const { isSubmitting } = form.formState;
+  const isAnyLoading = isSubmitting || isGoogleLoading;
+
+  const onSubmit = async (data: SignupFormData) => {
+    setError(null);
+
+    try {
+      const { error } = await signUp.email({
+        name: data.name,
+        email: data.email,
+        password: data.password,
+      });
+
+      if (error) {
+        setError(error.message || "An unexpected error occurred.");
+        return;
+      }
+
+      router.push(config.successRedirect);
+    } catch (error) {
+      setError("An unexpected error occurred. Please try again.");
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Full Name</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="John Doe"
+                  disabled={isAnyLoading}
+                  className="h-11"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input
+                  type="email"
+                  placeholder="m@example.com"
+                  disabled={isAnyLoading}
+                  className="h-11"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input
+                  type="password"
+                  placeholder="Create a strong password"
+                  disabled={isAnyLoading}
+                  className="h-11"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button
+          type="submit"
+          disabled={isAnyLoading}
+          className="w-full h-11"
+          size="lg"
+        >
+          {isSubmitting ? (
+            <Loader2 className="animate-spin" />
+          ) : (
+            config.buttonText
+          )}
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+export function AuthForm({ mode }: AuthFormProps) {
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+  const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+  const config = authConfig[mode];
+
+  const handleGoogleAuth = async () => {
+    setError(null);
+    setIsGoogleLoading(true);
+
+    try {
+      await signIn.social({
+        provider: "google",
+      });
+
+      router.push(config.successRedirect);
+    } catch (error) {
+      setError(
+        `Failed to ${mode === "login" ? "sign in" : "sign up"} with Google. Please try again.`
+      );
+      setIsGoogleLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex h-screen items-center justify-center relative">
+      <Button
+        variant="ghost"
+        onClick={() => router.back()}
+        className="absolute top-6 left-6"
+      >
+        <ArrowLeft className="h-5 w-5" /> Back
+      </Button>
+
+      <Card className="w-[400px] shadow-lg border-0">
+        <CardHeader className="text-center pb-4">
+          <CardTitle className="text-2xl font-semibold">
+            {config.title}
+          </CardTitle>
+          <CardDescription className="text-base">
+            {config.description}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <div className="flex flex-col space-y-6">
+            {error && (
+              <Alert variant="destructive">
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <Button
+              onClick={handleGoogleAuth}
+              variant="outline"
+              size="lg"
+              disabled={isGoogleLoading}
+            >
+              {isGoogleLoading ? (
+                <Loader2 className="animate-spin" />
+              ) : (
+                <GoogleIcon />
+              )}
+              Continue with Google
+            </Button>
+
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <Separator className="w-full" />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-background px-2 text-muted-foreground">
+                  Or continue with
+                </span>
+              </div>
+            </div>
+
+            {mode === "login" ? (
+              <LoginFormContent
+                error={error}
+                setError={setError}
+                isGoogleLoading={isGoogleLoading}
+                config={config}
+                router={router}
+              />
+            ) : (
+              <SignupFormContent
+                error={error}
+                setError={setError}
+                isGoogleLoading={isGoogleLoading}
+                config={config}
+                router={router}
+              />
+            )}
+          </div>
+
+          <div className="mt-6 text-center text-sm">
+            {config.linkText}{" "}
+            <Link
+              href={config.linkHref}
+              className="font-medium text-primary underline-offset-4 hover:underline"
+            >
+              {config.linkLabel}
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/src/components/editor/properties-panel.tsx

@@ -38,7 +38,6 @@ export function PropertiesPanel() {
     ? mediaItems.find((item) => item.id === firstVideoClip.mediaId)
     : null;
 
-  // Get the first image clip for preview (simplified)
   const firstImageClip = tracks
     .flatMap((track) => track.clips)
     .find((clip) => {

apps/web/src/components/editor/timeline.tsx

@@ -557,8 +557,26 @@ export function Timeline() {
 
                 {/* Playhead in ruler */}
                 <div
-                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-10"
+                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 cursor-ew-resize z-1000" // Remove pointer-events-none to allow dragging
                   style={{ left: `${currentTime * 50 * zoomLevel}px` }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const handleMouseMove = (e: MouseEvent) => {
+                      const timeline = timelineRef.current; // Get timeline element ref to track the position
+                      if (!timeline) return; // If no timeline element, exit
+                      const rect = timeline.getBoundingClientRect(); // Get the bounding rect of the timeline element
+                      const mouseX = Math.max(0, e.clientX - rect.left); // Calculate the mouse position relative to the timeline element 
+                      const newTime = mouseX / (50 * zoomLevel); // Calculate the time based on the mouse position
+                      seek(newTime); // Set the current time 
+                    };
+                    const handleMouseUp = () => {
+                      window.removeEventListener("mousemove", handleMouseMove); // Remove the mousemove event listener
+                      window.removeEventListener("mouseup", handleMouseUp); // Remove the mouseup event listener
+                    };
+                    window.addEventListener("mousemove", handleMouseMove); // Add the mousemove event listener
+                    window.addEventListener("mouseup", handleMouseUp); // Add the mouseup event listener
+                  }}
                 >
                   <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />
                 </div>
@@ -670,7 +688,7 @@ export function Timeline() {
 
                     {/* Playhead for tracks area */}
                     <div
-                      className="absolute top-0 w-0.5 bg-red-500 pointer-events-none z-20"
+                      className="absolute top-0 w-0.5 bg-red-500 cursor-ew-resize z-20"
                       style={{
                         left: `${currentTime * 50 * zoomLevel}px`,
                         height: `${tracks.length * 60}px`,

apps/web/src/components/landing/hero.tsx

@@ -84,12 +84,12 @@ export function Hero({ signupCount }: HeroProps) {
             The open source
           </h1>
           <h1 className="text-5xl sm:text-7xl font-bold tracking-tighter mt-2">
-            CapCut alternative.
+            video editor
           </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"
+          className="mt-10 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 }}

docker-compose.yaml

@@ -18,7 +18,8 @@ services:
       start_period: 10s
 
   redis:
-    image: redis
+    image: redis:7-alpine
+    restart: unless-stopped
     ports:
       - "6379:6379"
     healthcheck:
@@ -36,12 +37,46 @@ services:
       SRH_MODE: env
       SRH_TOKEN: example_token
       SRH_CONNECTION_STRING: "redis://redis:6379"
+    depends_on:
+      redis:
+        condition: service_healthy
     healthcheck:
       test: ["CMD-SHELL", "wget --spider -q http://127.0.0.1:80 || exit 1"]
       interval: 30s
       timeout: 10s
       retries: 5
       start_period: 10s
+  web:
+    build:
+      context: ./apps/web
+      dockerfile: ./apps/web/Dockerfile
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - DATABASE_URL=postgresql://opencut:opencutthegoat@db:5432/opencut
+      - BETTER_AUTH_URL=http://localhost:3000
+      - BETTER_AUTH_SECRET=your-production-secret-key-here
+      - UPSTASH_REDIS_REST_URL=http://serverless-redis-http:80
+      - UPSTASH_REDIS_REST_TOKEN=example_token
+      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
+      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
+    depends_on:
+      db:
+        condition: service_healthy
+      serverless-redis-http:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD-SHELL", "curl -f http://localhost:3000/api/health || exit 1"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+      start_period: 30s
   
 volumes:  
   postgres_data:
+
+networks:  
+  default:  
+    name: opencut-network