Project Templates

Choose a template to get started

SaaS Web App

Create a modern web application with Next.js, React, and TypeScript

I want to build a web-based platform for [e.g., small business owners] to [e.g., track inventory and sales]. This application simplifies daily operations and provides actionable insights to help users grow their business.

Project Name:
[e.g., "InventoryTracker Pro"]

Target Audience:
[e.g., small to mid-sized retail businesses, online store owners]

Core Features:
1. [Secure user accounts with admin and user roles]
2. [Real-time sales analytics dashboard with charts and graphs]
3. [Automated low-inventory alerts via email or SMS]
4. [Built-in reporting tools to export data in CSV format]
5. [Integration with popular payment gateways like Stripe]
6. [Basic AI-driven product recommendations (optional)]

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14, TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & Storage: Supabase (database, auth, storage)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet for generating content or handling user queries

Design Preferences:
A clean, minimalistic interface with easy-to-read fonts, neutral colors, and clear navigation menus.
Modern Landing Page

Build a modern landing page with Next.js and Tailwind CSS

I want to build a landing page for [e.g., a new marketing tool or a productivity app]. This page introduces the product's core value, highlights key benefits, and guides visitors towards trying or buying the product.

Project Name:
[e.g., "ProGrow"]

Target Audience:
[e.g., small business owners, freelancers, startup founders]

Sections (Replace with your own content):
1. [Top Navigation: Home, About, Features, Pricing, Contact]
2. [Hero Section: A clear headline that states what the product does (e.g., "Grow Your Business Faster"), a short subheading (e.g., "Powerful analytics to boost sales"), and a prominent call-to-action button (e.g., "Get Started")]
3. [Key Benefits Section: Brief bullet points or icons highlighting top benefits (e.g., "Easy Setup," "24/7 Support," "Real-time Insights")]
4. [Testimonials Section: Customer quotes and photos to build trust]
5. [Pricing Section: Simple pricing tiers with a short description of each plan's features]
6. [Footer: Links to About, Terms, Privacy Policy, and Social Media icons]

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14, TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & Storage: Supabase (if any backend needed for forms, data capture)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet for auto-generating marketing copy or headlines

Design Preferences:
A modern, clean layout with generous white space, a consistent color scheme, and high-quality imagery.
Mobile App

Build a cross-platform mobile app with React Native

I want to build a mobile app for [e.g., parents] to [e.g., manage daily tasks and reminders]. The app keeps track of important events, sends helpful notifications, and offers simple tools for staying organized.

Project Name:
[e.g., "DailyEase"]

Target Audience:
[e.g., busy parents, working professionals]

Core Features:
1. [User profiles with custom to-do lists]
2. [Push notifications for reminders and due dates]
3. [Calendar integration for syncing events]
4. [Simple note-taking for quick ideas or grocery lists]
5. [Cloud backup to access data on multiple devices]
6. [Optional AI suggestions for productivity tips]

Tech Stack (Recommended Defaults):
• If iOS only: SwiftUI
• If iOS & Android: React Native (TypeScript)
• Backend & Storage: Supabase (for user data, auth, storage)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet for intelligent recommendations

Design Preferences:
A friendly, approachable look with soft colors, clear icons, and straightforward navigation. Large buttons and easy-to-read text for quick interaction.
Website (Multi-Page)

Create a professional multi-page website with modern design

I want to build a multi-page website aimed at [e.g., showcasing a corporate brand, providing company information, and offering a contact channel]. The goal is to present clear, structured information with an engaging design that reflects professionalism.

Project Name:
[e.g., "AcmeCorp Site"]

Target Audience:
[e.g., potential customers, partners, or job seekers who want to learn about the company]

Core Pages/Sections:
1. Home Page – Hero banner, brief company introduction, main call-to-action
2. About – Company history, mission, team members
3. Services – Overview of services offered, key benefits, pricing or case studies
4. Blog/News (optional) – Company updates, industry insights, thought leadership content
5. Contact – Contact form, location map, social media links
6. Footer – Quick links, copyright, legal information

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14, TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & Storage: Supabase (if the site needs user data, forms, or other dynamic content)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet for generating blog posts or marketing copy

Design Preferences:
A clean, modern layout with consistent branding, easy navigation, and strong visual hierarchy (e.g., large hero image, clear typography, and intuitive menu).
CRM System

Build a customer relationship management system

I want to build a CRM tool for [e.g., sales teams in growing tech startups] to [e.g., manage leads, track deals, and communicate with clients efficiently]. This tool centralizes customer data, streamlines sales workflows, and provides reporting features.

Project Name:
[e.g., "ClientFlow CRM"]

Target Audience:
[e.g., sales reps, account managers, small to medium-sized teams]

Core Features:
1. [Contact management with lead and customer profiles]
2. [Pipeline tracking to monitor deal stages]
3. [Automated follow-up reminders and notifications]
4. [Integration with email services for direct outreach]
5. [Reporting dashboard with charts and metrics]
6. [Optional AI-driven lead scoring or automated outreach templates]

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14, TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & Storage: Supabase (database, auth, storage)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet for generating sales emails or analyzing lead data

Design Preferences:
A professional, data-focused interface with organized layouts, easy filters, and a color scheme that makes charts and data points stand out.
Browser Extension

Create a browser extension with JavaScript/TypeScript

I want to build a browser extension for [e.g., remote workers] to [e.g., organize open tabs]. This plugin helps reduce clutter, improve browsing efficiency, and remember important tabs for later reference.

Project Name:
[e.g., "TabPal"]

Target Audience:
[e.g., professionals who juggle multiple tabs daily]

Core Features:
1. [Group and save sets of tabs for future use]
2. [Lightweight note-taking area within the browser toolbar]
3. [One-click cleanup to close or archive unused tabs]
4. [Sync tab groups across devices when signed in]
5. [Built-in search to quickly find previously saved pages]
6. [Optional AI-driven suggestions for related content or note summaries]

Tech Stack (Recommended Defaults):
• Frontend: JavaScript or TypeScript, Manifest V3
• Backend & Storage: Supabase or local storage if minimal backend is required
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet for suggesting related pages or summarizing notes

Design Preferences:
A minimal, distraction-free interface with simple icons and neutral colors. Quick, responsive actions that don't slow down the browser.
API Development

Set up a RESTful API with Node.js and Express

I want to build a RESTful API for [e.g., a mobile app or web application] to [e.g., manage data, authenticate users, and provide backend logic]. This API handles requests from different clients and ensures secure, scalable data processing.

Project Name:
[e.g., "TrackData API"]

Target Audience:
[e.g., developers integrating the API into mobile apps, internal tools, or third-party services]

Core Endpoints:
1. Authentication – Sign up, login, logout, token refresh
2. Resource Management – CRUD operations for main entities (e.g., users, items, posts)
3. Search or Filtering – Query-based endpoints for custom searching or filtering
4. Analytics or Reporting (optional) – Endpoint(s) to retrieve aggregated data or insights
5. Notifications (optional) – Webhooks or push notifications to notify clients of updates
6. Admin/Management – Admin-only routes for user management, moderation, or metrics

Tech Stack (Recommended Defaults):
• Runtime/Framework: Node.js (TypeScript), Express or Fastify
• Database: Supabase (PostgreSQL) or another SQL/NoSQL solution if needed

Preferences:
Well-documented endpoints using an OpenAPI/Swagger spec, clear versioning (v1, v2), and robust error handling with meaningful status codes.
Internal Tools

Build internal tools and admin dashboards

I want to build an internal web-based tool for [e.g., company staff] to [e.g., manage data, oversee operations, and perform administrative tasks]. This dashboard centralizes critical data, providing employees with a convenient, secure interface.

Project Name:
[e.g., "AdminHub"]

Target Audience:
[e.g., internal teams, department managers, customer support staff]

Core Features:
1. [Authentication and role-based access control]
2. [Data tables with filtering, sorting, and pagination]
3. [Analytics and reporting section (charts, graphs, key metrics)]
4. [User management (create, edit, deactivate user accounts)]
5. [Notifications or alerts for system updates or flagged items]
6. [Optional AI-driven insights or automated tasks (e.g., auto-assign tickets)]

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14, TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & Storage: Supabase (database, auth, storage)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet to generate reports, summarize logs, or assist with support tickets

Design Preferences:
A functional, data-focused layout with clear tables, filter controls, and an intuitive navigation bar. Possibly a dark mode option for users who spend significant time in the dashboard.
Job Board Platform

Create a job board platform with search and filtering

I want to build a platform for [e.g., tech companies] to [e.g., post job listings] and for [e.g., developers] to [e.g., find new opportunities]. This site streamlines the job search process and helps employers connect with the right candidates.

Project Name:
[e.g., "TalentConnect"]

Target Audience:
[e.g., employers and job seekers in the tech industry]

Core Features:
1. [Job listings with filters (location, skill, experience)]
2. [User accounts for applicants (CV uploads, application tracking)]
3. [Company profiles highlighting culture and benefits]
4. [Saved jobs and job alerts via email]
5. [Application management for employers (view, shortlist, respond)]
6. [Optional AI-driven resume analysis or job match suggestions]

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14, TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & Storage: Supabase (database, auth, storage)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet to auto-suggest job descriptions or filter candidates

Design Preferences:
A professional, user-friendly design with clear navigation, search boxes, and readable job listings. Neutral colors, simple icons, and responsive layouts for mobile access.
Real Estate Website

Build a real estate platform with property listings

I want to build a platform for [e.g., home buyers and sellers] to [e.g., browse, list, and compare properties]. This website helps users find homes, apartments, or commercial spaces by providing detailed listings, images, and pricing info.

Project Name:
[e.g., "HomeScout"]

Target Audience:
[e.g., first-time home buyers, real estate investors, property renters]

Core Features:
1. [Property listings with photos, descriptions, and prices]
2. [Advanced search filters (location, size, price range)]
3. [User accounts to save favorite listings or receive alerts]
4. [Interactive map integration to view properties by location]
5. [Contact forms to reach sellers or agents]
6. [Optional AI-driven recommendations for properties based on user preferences]

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14, TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & Storage: Supabase (database, auth, storage)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet for generating property descriptions or chat-based property searches

Design Preferences:
A visually appealing, easy-to-navigate layout that prominently displays property images, with clear filters and sorting options. A calm color palette that doesn't distract from the listings.
Portfolio Website

Create a personal portfolio to showcase your work

I want to build a personal portfolio website for [e.g., a graphic designer] to [e.g., showcase their work, skills, and contact details]. This site provides a professional online presence to attract potential clients or employers.

Project Name:
[e.g., "Jane Doe Portfolio"]

Target Audience:
[e.g., potential clients, recruiters, industry peers]

Core Sections:
1. [Hero section with a professional headshot and tagline]
2. [Featured work gallery with images or case studies]
3. [About section highlighting skills, experience, and background]
4. [Services or expertise list if applicable]
5. [Testimonials from past clients or colleagues]
6. [Contact form or direct email link]

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14, TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & Storage: Supabase (if needed for form submissions or data)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet for generating compelling copy or summarizing project case studies

Design Preferences:
A visually appealing, personal brand-focused design with a simple color scheme, clear imagery, and easy navigation.
Chatbot

Build an AI-powered chatbot for customer support

I want to build a chatbot application for [e.g., a customer support portal] to [e.g., automatically answer common questions and guide users to the right resources]. This tool reduces human intervention for basic inquiries and speeds up response times.

Project Name:
[e.g., "SmartHelp Bot"]

Target Audience:
[e.g., customers seeking quick support, prospective buyers needing product info]

Core Features:
1. [Multi-channel support (website chat widget, mobile app, etc.)]
2. [Natural language understanding for user queries]
3. [Scripted fallback responses for unclear questions]
4. [FAQ database or knowledge base integration]
5. [Contextual memory of past questions in a session]
6. [Optional AI-driven analytics on user queries to identify trends]

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14 (if a web widget), TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & AI: GPT-4o or Claude 3.5 Sonnet for conversational logic; Supabase for storing user queries or FAQ data
• Optional Integration: Additional NLU frameworks or dialogue management tools if needed

Design Preferences:
A concise chat interface with minimal clutter, easy "hand-off to a human" button, and brand-consistent color scheme for the chat widget or assistant.
Personal Blog

Create a blog with content management system

I want to build a blog for [e.g., a travel enthusiast] to [e.g., share travel stories, photos, and tips]. This site highlights posts by date, category, or popularity, making it easy for readers to discover interesting content.

Project Name:
[e.g., "Wander Notes"]

Target Audience:
[e.g., travel enthusiasts, backpackers, vacation planners]

Core Features:
1. [Post creation and editing with a simple text editor]
2. [Categories and tags for easy content organization]
3. [Featured posts or "Most Popular" section on the homepage]
4. [Commenting system for reader engagement]
5. [Basic newsletter signup for updates]
6. [Optional AI-driven content suggestions or keyword analysis]

Tech Stack (Recommended Defaults):
• Frontend: Next.js 14, TypeScript, Tailwind CSS, shadcn/UI, Radix UI, Lucide Icons
• Backend & Storage: Supabase (for storing posts, user data if comments or signups exist)
• Optional AI Integration: GPT-4o or Claude 3.5 Sonnet for generating blog title ideas or improving copy

Design Preferences:
A clean, content-focused layout with readable fonts, engaging visuals, and easy navigation through posts.