A Next.js starter template for building full-stack apps with auth, database, storage, and more! π
This is a dev environment where you can build your app locally before you're ready to ship it to production.
We packed all these awesome goodies so you can focus on vibing, not configuring!
Gorgeous Shadcn/UI components that make your app look like a million bucks! π
Clerk auth that's so easy, you'll set it up before your coffee gets cold! β
Keep the party going with Convex! Our database setup lets you vibe with real-time data and automatic scaling. π₯
AWS S3 storage that's ready to handle all your party pics! πΈ
SendGrid to make sure your messages slide into inboxes, not spam! π¨
Stripe integration so smooth, money just slides right in! πΈ
Use AI to generate text, structured data, and images.
Playwright testing with visual regression and CI/CD integration! π§ͺ
Built-in visit tracking and route analytics with Convex! π
Follow these simple steps and you'll be vibing in no time! πΊπ
Run the command and follow the prompts...
Create a .env file in the root of your project and add these magic spells:
π App URLs
NEXT_PUBLIC_APP_URL=
β¨ Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
# Replace with your Clerk user ID after signing in
ADMIN_USER_IDS=
CONVEX_DEPLOYMENT=
πΎ AWS S3 & CloudFront
AWS_KEY=
AWS_SECRET=
AWS_REGION=
AWS_BUCKET_PUBLIC=
CLOUDFRONT_DOMAIN=
π¨ Contact Form & Mailing List
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
RECAPTCHA_SECRET_KEY=
SENDGRID_API_KEY=
SENDGRID_SENDER=
CONTACT_EMAIL=
UNSUBSCRIBE_SECRET=
π³ Stripe Payments
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
π§ͺ Testing
TEST_USER_EMAIL=
TEST_USER_PASSWORD=
TEST_USER_ID=
Import components from a v0 project
{`npx shadcn@latest add "https://v0.dev/chat/b/asdfghjkl1234567890"`}
Visit{" "} v0.dev {" "} to generate components and import them into your project by selecting the "Add to Codebase" option.
Import shadcn/ui compatible components from the community.
{`pnpm dlx shadcn@latest add "https://21st.dev/r/designali-in/gradient-text"`}
Find libraries and components like{" "} 21st.dev ,{" "} Magic UI {" "} &{" "} bundui {" "} on{" "} awesome-shadcn-ui
Example Cursor prompts
# Use shadcn/ui compatible components
Vibe-code Friendly NPM Scripts
# Go straight to production without even writing a commit message.
pnpm go
Requires{" "} aicommits {" "} to be installed on your local dev environment.
# Ship it to production with full CI checks.
pnpm ship
Runs linting, runs tests, backs up the database then pushes db changes to production - all in one command! π
Plug-and-play full stack components that integrate with best-in-class services! Just add your API keys and you're good to go!
We've got the hottest services ready to make your app the life of the party! π₯
Built on a foundation of{" "} Shadcn/UI {" "} with{" "} TailwindCSS , you will be able to prompt Cursor and other LLMs to produce great UI/UX designs with components that are accessible and easy to use.
Add more components auto-magically with{" "} v0 {" "} or other AI tools.
Deploy your code quickly with scripts like pnpm go or{" "}
pnpm ship that automatically run tests, write commit messages and get your changes into
production so you can keep vibing.
Tools to keep your code quality high and your vibes even higher! π
Use AI to generate text, structured data and images.
Text Generation with Streaming
{"const { generate, isLoading } = useGenerateText()"}
{`// Generate text with streaming
const handleGenerate = async () => {
await generate({
prompt: "Write a story about...",
onStream: (text) => {
// Handle streaming text updates
}
})
}`}
Structured Data Generation
{"const { generate, isLoading } = useGenerateObject()"}
{`// Generate structured data
const handleGenerate = async () => {
const result = await generate({
prompt: "Generate a profile for...",
schema: {
name: z.string(),
age: z.number(),
bio: z.string(),
interests: z.array(z.string())
}
})
}`}
String Array Generation
{"const { generate, isLoading } = useGenerateStrings()"}
{`// Generate array of strings
const handleGenerate = async () => {
const strings = await generate({
prompt: "Generate 5 creative names for...",
count: 5
})
}`}
Image Generation
{"const { generate, isLoading } = useGenerateImage()"}
{`// Generate an image
const handleGenerate = async () => {
const imageUrl = await generate({
prompt: "A beautiful landscape with...",
width: 1024,
height: 1024
})
}`}
Keep the party going without crashes! Our Playwright testing setup lets you vibe with confidence. Even AI can't break your app when you've got tests! π§ͺ
Open the test console
pnpm pw
Run the whole test suite
pnpm test
Vibe-code friendly NPM scripts π
Go straight to production without even writing a commit message.
pnpm go
Ship it to production with full CI checks.
pnpm ship
Sign up for our mailing list and stay up to date with the latest features, updates, and community vibes! π
See what's coming next and share your ideas.