A production-ready Next.js 15 boilerplate designed for hackathons and rapid prototyping. Get from idea to deployed app in minutes, not hours.
Built for CTRL+ALT+CREATE Live Seattle - the creative coding event where ideas come to life.
- Next.js 15 with App Router and React 19
- TypeScript with strict mode for type safety
- Tailwind CSS 4 with custom design tokens
- shadcn/ui components library (19 pre-configured components)
- Pre-configured responsive layout with sidebar navigation
- Dark/light mode with system preference detection
- 19 shadcn/ui components ready to use
- Custom theme with CSS variables for easy customization
- 5 example pages showcasing components and features
- ESLint and Prettier configured
- React Hook Form with Zod validation
- Hot reload optimized for fast development
- VS Code settings and recommended extensions
- Health Check - Verify API availability
- Supabase Integration - Full CRUD operations with database
- Email Sending - Transactional emails via Resend
- Pre-built templates and examples
- One-click deployment to Vercel
- SEO optimized with metadata API
- Responsive design (mobile-first)
- Accessibility features built-in
- Node.js 18+
- npm, yarn, or pnpm
-
Clone and install dependencies:
git clone https://github.com/zainjoyce/ctrlaltcreate-starter.git cd ctrlaltcreate-starter npm install -
Start development server:
npm run dev
-
Open your browser: Navigate to http://localhost:3000
That's it! You're ready to start building.
ctrlaltcreate-starter/
├── app/ # Next.js App Router pages
│ ├── api/ # API routes
│ │ ├── data/ # Supabase CRUD operations
│ │ ├── email/ # Email sending with Resend
│ │ └── health/ # Health check endpoint
│ ├── components/ # Component showcase page
│ ├── docs/ # Documentation page
│ ├── forms/ # Form examples page
│ ├── getting-started/ # Setup guide page
│ ├── settings/ # Settings page
│ ├── styling/ # Design system page
│ ├── favicon.ico # App favicon
│ ├── globals.css # Global styles & theme
│ └── layout.tsx # Root layout with providers
├── components/ # Shared React components
│ ├── layout/ # Layout components (nav, sidebar)
│ └── ui/ # shadcn/ui components (19+ components)
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
│ ├── supabase.ts # Supabase client utilities
│ └── utils.ts # Helper functions
├── public/ # Static assets
├── docs/ # Documentation files
├── components.json # shadcn/ui configuration
├── eslint.config.mjs # ESLint configuration
├── next.config.ts # Next.js configuration
├── postcss.config.mjs # PostCSS configuration
├── tsconfig.json # TypeScript configuration
└── vercel.json # Vercel deployment configuration
- Homepage (
/) - Landing page with features overview - Getting Started (
/getting-started) - Step-by-step setup guide - Components (
/components) - Interactive component showcase - Forms (
/forms) - Form examples with validation - Styling (
/styling) - Design system and theme documentation - Settings (
/settings) - Settings page example - Documentation (
/docs) - Comprehensive developer guide
- Button - Multiple variants and sizes
- Input - Text inputs with validation
- Textarea - Multi-line text input
- Label - Form labels with accessibility
- Form - React Hook Form integration
- Card - Content containers
- Sidebar - Collapsible navigation
- Separator - Visual dividers
- Badge - Status indicators
- Alert - Important notifications
- Toast - Temporary notifications (Sonner)
- Dialog - Modal dialogs
- Dropdown Menu - Action menus
- Breadcrumb - Page navigation
- Navigation Menu - Main navigation
- Tabs - Content switching
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form'
const schema = z.object({
email: z.string().email('Invalid email address'),
name: z.string().min(2, 'Name must be at least 2 characters'),
})
export function ContactForm() {
const form = useForm({
resolver: zodResolver(schema),
defaultValues: { email: '', name: '' },
})
function onSubmit(data) {
console.log(data)
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<FormField
control={form.control}
name='name'
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder='Your name' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type='submit'>Submit</Button>
</form>
</Form>
)
}import { SidebarInset } from '@/components/ui/sidebar'
import { MainNav } from '@/components/layout/main-nav'
export default function MyPage() {
return (
<SidebarInset>
<MainNav
breadcrumbs={[{ title: 'Home', href: '/' }, { title: 'Current Page' }]}
/>
<div className='flex flex-1 flex-col gap-4 p-4 pt-0'>
{/* Your page content */}
</div>
</SidebarInset>
)
}Edit app/globals.css to customize the color palette:
:root {
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
/* Add your custom colors */
}Use the shadcn/ui CLI to add more components:
npx shadcn@latest add [component-name]This starter includes pre-configured API routes for common hackathon needs. All routes include TypeScript types, validation, and comprehensive error handling.
Simple endpoint for verifying API availability and debugging.
# Check API status
GET http://localhost:3000/api/healthFull CRUD operations with Supabase. Perfect for storing user data, posts, or any database records.
Setup:
- Create a Supabase project (free tier available)
- Add credentials to
.env.local:NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
- Create tables in Supabase dashboard
Usage:
# Fetch all records
GET /api/data
# Create new record
POST /api/data
Body: { "title": "My Post", "content": "Hello", "user_id": "..." }
# Update record
PUT /api/data
Body: { "id": "...", "title": "Updated" }
# Delete record
DELETE /api/data
Body: { "id": "..." }Send transactional emails with pre-built templates. Great for welcome emails, notifications, and alerts.
Setup:
- Sign up for Resend (free tier: 3,000 emails/month)
- Get your API key from dashboard
- Add to
.env.local:RESEND_API_KEY=re_your_api_key [email protected] # Use resend.dev for testing
Built-in Templates:
welcome- Welcome new usersnotification- General notificationsreset-password- Password reset linkscustom- Your own HTML
Usage:
# Send welcome email
POST /api/email/send
Body: {
"to": "[email protected]",
"subject": "Welcome!",
"template": "welcome",
"data": { "name": "John", "url": "https://yourapp.com" }
}
# Check configuration
GET /api/email/sendFor more details, see the inline documentation in each route file or visit the /docs page in your running app.
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy with one click!
- Netlify: Drag and drop your
outfolder after runningnpm run build - Railway: Connect your GitHub repository
- Digital Ocean: Use App Platform with auto-deploy
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint errors
npm run format # Format code with Prettier
npm run type-check # Run TypeScript compiler- 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 - see the LICENSE file for details.
- Next.js - The React Framework
- shadcn/ui - Re-usable components
- Tailwind CSS - Utility-first CSS framework
- Lucide - Beautiful & consistent icons
Zain Joyce - @zainjoyce
Project Link: https://github.com/zainjoyce/ctrlaltcreate-starter
Happy Building! 🛠️