Transform static screenshots into interactive product demos
Create engaging, clickable walkthroughs without video editing. Add hotspots, tooltips, and guided navigation flows in minutes.
- Upload Screenshots - Drag and drop images to create demo steps
- Smart Hotspots - Draw clickable areas with custom colors, borders, and actions
- Intelligent Tooltips - Add contextual help with smart positioning (no more cut-off text!)
- Navigation Flow - Link hotspots to create guided step-by-step experiences
- Auto-Navigation - Generate prev/next buttons automatically
- Linear-inspired Design - Clean, modern interface with high information density
- Airbnb-style Search - Unified search bar with smart filters and sorting
- Responsive - Works seamlessly on desktop, tablet, and mobile
- Dark Mode Ready - Coming soon
- Public/Private Demos - Control visibility with a single toggle
- Unique URLs - Share with clean, memorable slugs (
/demo/product-tour) - Embed Support - Coming soon
- Secure Auth - JWT-based authentication via Supabase
- Image Storage - Reliable uploads with UploadThing
- PostgreSQL Database - Fast, scalable data storage with Drizzle ORM
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| UI Components | shadcn/ui + Radix UI |
| Animations | Framer Motion |
| Auth | Supabase Auth + JWT |
| Database | PostgreSQL (via Supabase) |
| ORM | Drizzle ORM |
| File Storage | UploadThing |
| Forms | React Hook Form + Zod |
| Icons | Lucide React |
| State | Zustand |
| Deployment | Vercel |
Before you begin, ensure you have:
- Node.js 20.x or higher
- npm or pnpm (package manager)
- PostgreSQL database (Supabase recommended)
- Supabase project for auth and database
git clone <your-repo-url>
cd stepwisenpm install
# or
pnpm installCopy .env.example to .env and fill in your values:
cp .env.example .envRequired environment variables:
# Supabase
NEXT_PUBLIC_SUPABASE_PROJECT_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_PROJECT_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
# Database
DATABASE_URL=postgresql://postgres:password@db.your-project.supabase.co:5432/postgres
# JWT
JWT_SECRET=your_jwt_secret_key_min_32_chars🔐 Security Note: Never commit your
.envfile to version control!
Run database migrations:
npx drizzle-kit pushnpm run dev
# or
pnpm devOpen http://localhost:3000 in your browser. 🎉
stepwise/
├── app/ # Next.js 16 App Router pages
│ ├── (auth)/ # Authentication pages (login, register)
│ ├── (protected)/ # Protected routes (dashboard, demos)
│ ├── demo/ # Public demo viewer
│ └── page.tsx # Landing page
├── components/ # React components
│ ├── dashboard/ # Dashboard-specific components
│ ├── demo/ # Demo viewer components
│ ├── landing/ # Landing page components
│ └── ui/ # shadcn/ui components
├── actions/ # Server actions (API layer)
├── db/ # Database schema & migrations
├── context/ # React context providers
├── lib/ # Utility functions
├── types/ # TypeScript type definitions
└── public/ # Static assets
- Sign Up - Create an account at
/register - New Demo - Click "New demo" on the dashboard
- Add Steps - Upload screenshots for each step
- Draw Hotspots - Click "Draw Hotspot" and drag on your screenshots
- Add Tooltips - Describe what users should do at each hotspot
- Link Steps - Connect hotspots to navigate between steps
- Share - Toggle "Public" and share your demo URL!
Esc- Cancel hotspot drawingDelete- Remove selected hotspotEnter- Save hotspot edits
The app uses a vibrant Indigo (#4F46E5) as the primary brand color, with a refined neutral palette:
- Primary:
#4F46E5(Indigo) - Background:
#FAFAFA(Light gray) - Text Primary:
#0A0A0A(Near black) - Text Secondary:
#525252(Medium gray) - Border:
#E5E5E5(Light gray)
- Headings: Space Grotesk (600 weight)
- Body: Inter (400/500 weight)
- Code: SF Mono / Fira Code
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npx drizzle-kit push |
Push database schema changes |
npx drizzle-kit studio |
Open Drizzle Studio (DB GUI) |
- Push your code to GitHub
- Import your repository to Vercel
- Add environment variables in project settings
- Deploy! 🚀
Make sure to add all .env variables to your Vercel project settings under Settings → Environment Variables.
- Core demo builder with hotspots
- Smart tooltip positioning
- Airbnb-style search & filters
- Public/private demo sharing
- Responsive design (mobile, tablet, desktop)
- Drag-and-drop step reordering
- Embed code generation
- Analytics dashboard
- Dark mode
- Keyboard navigation
- Demo templates
- Team collaboration
- Custom branding
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License.
- Next.js - The React Framework
- shadcn/ui - Beautiful UI components
- Tailwind CSS - Utility-first CSS
- Framer Motion - Animation library
- Supabase - Backend as a service
- Drizzle ORM - TypeScript ORM
- UploadThing - File uploads made easy
- Lucide Icons - Beautiful icon library
Built with ❤️ using modern web technologies