Skip to content

adeel-usmani/8x-hiring-template

BranchesTags
Β 
Β 

Repository files navigation

Babičeva AI - Video Generation Platform

A full-stack AI video generation platform built with Next.js, React, Supabase, and Tailwind CSS. This is a recreation of babiceva.ai for the 8x FullStack Internship assignment.

🎯 What I Built

Core Features Implemented

  • βœ… Homepage with hero section, navigation, and example gallery
  • βœ… User authentication (email/password signup and login)
  • βœ… Video Generation tool mock page
  • βœ… Subscription management:
    • Free and Pro tiers
    • Fake checkout flow that writes to database
    • Feature gating based on subscription tier
  • βœ… Profile page with account management
  • βœ… Protected routes (redirects to login if not authenticated)
  • βœ… Sign out functionality

Tech Stack

  • Frontend: Next.js 16, React 19, TypeScript
  • Backend: Supabase (local instance via Docker)
  • Styling: Inline styles (for consistency across the project)
  • Auth: Supabase Auth
  • Database: PostgreSQL via Supabase

πŸš€ Setup Instructions

Prerequisites

  • Node.js 18+
  • pnpm
  • Docker (for local Supabase)
  • WSL2 (if on Windows)

Installation

  1. Clone and install dependencies
git clone <your-repo-url>
cd 8x-hiring-template
pnpm install
  1. Start Supabase local instance
supabase start

This will output connection details. Copy the Publishable key.

  1. Configure environment variables

Create .env.local:

NEXT_PUBLIC_SUPABASE_URL="http://WSL_IP:54521"
NEXT_PUBLIC_SUPABASE_ANON_KEY="<publishable-key-from-supabase>"
SUPABASE_SERVICE_ROLE_KEY="<secret-key-from-supabase>"

Important for WSL2 users: Replace YOUR_WSL_IP with your actual WSL IP address (find it with hostname -I | awk '{print $1}'). Using localhost or 127.0.0.1 won't work due to WSL2 networking.

  1. Initialize database
supabase db reset
  1. Start development server
pnpm dev

Visit http://localhost:3000

πŸ› Issues Encountered & Solutions

1. WSL2 Networking Issue

Problem: Browser couldn't connect to Supabase running on 127.0.0.1:54521 - got ERR_CONNECTION_REFUSED.

Root Cause: WSL2 networking isolation - Windows browser can't reach services on 127.0.0.1 inside WSL2.

Solution: Used WSL2 IP address instead of localhost in .env.local. Found IP with hostname -I.

2. Supabase Client Configuration

Problem: Multiple errors about missing Supabase URL/keys.

Root Cause: Inconsistent environment variable names - client was looking for NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY but Supabase docs use NEXT_PUBLIC_SUPABASE_ANON_KEY.

Solution:

  • Updated lib/supabase/client.ts to use NEXT_PUBLIC_SUPABASE_ANON_KEY
  • Updated lib/supabase/server.ts to match
  • Ensured .env.local uses correct variable names

3. Hydration Errors

Problem: React hydration mismatch warnings due to browser extensions adding attributes to <body>.

Solution: Added suppressHydrationWarning to both <html> and <body> tags in app/layout.tsx.

4. Router.push in Render

Problem: "Cannot update a component while rendering a different component" error in checkout page.

Root Cause: Calling router.push() directly during render phase for auth checks.

Solution: Wrapped auth redirect logic in useEffect hook.

5. Styling Consistency

Problem: Mixed Tailwind classes and inline styles causing inconsistent rendering.

Decision: Standardized on inline styles throughout the app for consistency and to avoid Tailwind configuration issues in the template.

🎨 Design Decisions

Component Architecture

  • Separation of Concerns: Server components for data fetching (profile page), client components for interactivity
  • Context Providers: Used existing AuthContext and SubscriptionContext for global state
  • Inline Styles: Chose inline styles over Tailwind for consistency and reliability

State Management

  • Auth state managed via Supabase Auth + React Context
  • Subscription tier stored in database, fetched via Context
  • Local component state for UI interactions (loading, errors, form inputs)

Mock AI Generation

  • Simulated 3-second processing delay with setTimeout
  • Returns placeholder images from Unsplash
  • Shows proper loading states and error handling

Database Schema

Used existing subscriptions table with:

  • user_id (foreign key to auth.users)
  • tier (text: 'free' or 'pro')
  • updated_at (timestamp)

πŸ”„ Full User Flow

  1. Sign Up β†’ Create account with email/password
  2. Login β†’ Authenticate and access protected routes
  3. Video Generation (Free):
    • Access tool at /tools/video-generation
    • See "Remove Watermark" feature locked with πŸ”’ icon
    • Generate mock video with watermark
  4. Upgrade Flow:
    • Click "Upgrade to Pro" link
    • View pricing at /upgrade
    • Click "Upgrade to Pro" button
    • Fill fake checkout form at /checkout
    • Subscription tier updated to 'pro' in database
  5. Video Generation (Pro):
    • Return to video tool
    • "Remove Watermark" now unlocked βœ“
    • Generate video without watermark
  6. Profile:
    • View subscription status
    • Sign out or delete account

🚧 What I'd Improve With More Time

1. Real AI Integration

  • Connect to actual AI APIs (OpenAI, Google Veo)
  • Implement proper video generation queue
  • Add video storage and retrieval

2. Complete Tool Suite

  • Build Image Generator tool
  • Build AI Dress Changer, Car Changer, Person Replacer tools
  • File upload functionality with drag & drop

3. Enhanced User Experience

  • Add success notifications (toast messages)
  • Implement generation history page
  • Add video download functionality
  • Progressive loading for large results

4. Error Handling

  • More granular error messages
  • Retry logic for failed API calls
  • Better offline handling

5. Testing

  • Unit tests for components
  • Integration tests for auth flow
  • E2E tests for checkout process

6. Performance Optimization

  • Image optimization with Next.js Image component
  • Lazy loading for gallery
  • Debounced search/filters

7. Accessibility

  • ARIA labels for interactive elements
  • Keyboard navigation support
  • Screen reader optimization

8. Mobile Responsiveness

  • Currently desktop-first
  • Add responsive breakpoints
  • Mobile-optimized navigation

9. Advanced Features

  • Video editing capabilities
  • Batch generation
  • Custom model fine-tuning
  • Team collaboration features

10. Production Readiness

  • Environment-specific configurations
  • Proper logging and monitoring
  • Rate limiting
  • CORS configuration
  • SSL/TLS setup

πŸ“Š Project Structure

app/
β”œβ”€β”€ page.tsx                      # Homepage
β”œβ”€β”€ layout.tsx                    # Root layout with providers
β”œβ”€β”€ globals.css                   # Global styles
β”œβ”€β”€ auth/
β”‚   β”œβ”€β”€ login/page.tsx           # Login page
β”‚   └── signup/page.tsx          # Signup page
β”œβ”€β”€ tools/
β”‚   └── video-generation/page.tsx # Video generation tool
β”œβ”€β”€ upgrade/page.tsx              # Pricing page
β”œβ”€β”€ checkout/page.tsx             # Checkout flow
β”œβ”€β”€ profile/
β”‚   β”œβ”€β”€ page.tsx                 # Profile (server component)
β”‚   └── profile-client.tsx       # Profile UI (client component)
└── api/
    β”œβ”€β”€ auth/signout/route.ts    # Sign out API
    └── account/delete/route.ts  # Delete account API

components/
└── navigation.tsx                # Main navigation component

contexts/
β”œβ”€β”€ auth-context.tsx              # Auth state management
└── subscription-context.tsx      # Subscription state

lib/
└── supabase/
    β”œβ”€β”€ client.ts                 # Browser Supabase client
    └── server.ts                 # Server Supabase client

πŸŽ₯ Demo Video

[Loom video link will be added here]

πŸ“ Notes

  • Authentication: Fully functional with Supabase Auth
  • Database: All writes to subscriptions table working
  • Payments: Fake checkout flow (no real Stripe integration)
  • AI Generation: Mocked with placeholder images
  • WSL2 Setup: Documented workaround for networking issue

πŸ‘€ Author

Built by [Your Name] for 8x FullStack Internship Assessment

Time Spent: ~8 hours

  • Setup & debugging: 2 hours
  • UI implementation: 3 hours
  • Auth & database: 2 hours
  • Documentation: 1 hour

About

No description, website, or topics provided.

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 98.2%
  • PLpgSQL 1.4%
  • Other 0.4%