DesignHandoff is a comprehensive collaborative platform that bridges the gap between designers and developers, streamlining the handoff process for digital products. Built with modern technologies and real-time collaboration features, it solves the common pain points in design-to-development workflows.
Problem Solved: Eliminates the tedious back-and-forth between designers and developers by automating specification extraction and enabling real-time collaboration.
- Project Organization - Create, manage, and organize design projects
- File Upload & Visualization - Support for multiple design file formats
- Smart File Organization - Categories, folders, and tagging system
- Advanced Search & Filtering - Find files and projects quickly
- Automated Spec Extraction - Color palettes, typography, measurements
- Asset Extraction - One-click asset export in multiple formats (PNG, SVG, WebP)
- CSS Code Generation - Automatic CSS properties from design specs
- Measurement Tools - Interactive rulers and spacing guides
- Secure Authentication - GitHub/Google OAuth integration
- Team Management - Invite members, assign roles, manage permissions
- Real-time Comments - Live collaborative feedback with instant updates
- Email Notifications - Team invitations and project updates
- Live Collaboration - Real-time updates across all team members
- Dark/Light Mode - Professional theme switching
- Responsive Design - Works seamlessly on all devices
- Loading States - Professional skeleton loading and micro-interactions
- Modern UI - Built with RetroUI component library
- Framework: Next.js 15.3.2 with App Router
- Language: TypeScript 5
- UI Library: React 19
- Styling: Tailwind CSS v4
- Components: RetroUI.dev
- State Management: Zustand
- Data Fetching: TanStack Query
- Forms: React Hook Form + Zod
- Theme: next-themes
- Backend: Supabase (PostgreSQL + Real-time + Auth + Storage)
- Authentication: OAuth (GitHub, Google) + Email/Password
- Real-time: WebSocket subscriptions for live collaboration
- Storage: Supabase Storage for file management
- Security: Row Level Security (RLS) policies
- Package Manager: pnpm
- Linting: ESLint + Prettier
- Deployment: Vercel
- Performance: Vercel Speed Insights
- Create a project and upload design files
- Explore the design spec extraction tools
- Test real-time collaboration features
- Try the asset extraction interface
- Switch between light and dark themes
- Node.js 18+
- pnpm
- Clone the repository
git clone https://github.com/yourusername/designhandoff.git
cd designhandoff- Install dependencies
pnpm install- Set up environment variables
cp .env.example .env.localThen edit .env.local with your Supabase credentials.
- Run the development server
pnpm dev- Open http://localhost:3000 with your browser to see the result.
This project is configured for easy deployment on Vercel.
Create a .env.local file in the root directory with the following variables:
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# Site URL for OAuth callbacks
# For local development: http://localhost:3000
# For production: https://yourdomain.com
NEXT_PUBLIC_SITE_URL=http://localhost:3000For OAuth authentication to work correctly:
-
GitHub OAuth App:
- Authorization callback URL:
your_domain/auth/callback - For local:
http://localhost:3000/auth/callback - For production:
https://yourdomain.com/auth/callback
- Authorization callback URL:
-
Google OAuth App:
- Authorized redirect URIs:
your_domain/auth/callback - For local:
http://localhost:3000/auth/callback - For production:
https://yourdomain.com/auth/callback
- Authorized redirect URIs:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
When deploying to production:
- Update
NEXT_PUBLIC_SITE_URLin your production environment variables - Update OAuth callback URLs in your GitHub and Google OAuth apps
- Deploy your application
The auth system will automatically use the correct callback URLs based on the environment.
