VibeStack is a community-driven platform that bridges the gap between learning AI-assisted coding and showcasing real-world projects. It serves as a centralized hub where developers can:
- 📚 Learn – Access industry-grade setup guides, workflows, and best practices for AI coding tools like Cursor, Claude Code, and more
- 🔨 Build – Contribute and showcase projects built with vibe coding platforms
- 💡 Inspire – Discover, collaborate, and get inspired by others' work
AI coding tools are everywhere, but knowledge is fragmented. Developers waste time:
- Searching for scattered documentation
- Guessing best practices
- Working in isolation with no real-world examples
VibeStack solves this by providing a unified platform with curated guides, community projects, and shared learnings.
| Feature | Description |
|---|---|
| Platform Profiles | Comprehensive guides for Cursor, Claude Code, Gemini CLI, and more |
| Project Showcase | Upload and discover community projects with screenshots, tech stack, and insights |
| Resource Library | Curated blogs, tutorials, YouTube videos, and X/Twitter threads |
| MCP Directory | Browse Model Context Protocol servers and integrations |
| Sub-Agents Library | Role-specific AI agent prompts (React Architect, Python Expert, etc.) |
| Skills Repository | Modular AI capabilities like Anthropic's Skills |
| Curated Collections | Themed project collections (e.g., "Best Cursor Projects") |
- 🔐 Authentication – Secure sign-in with Clerk (GitHub, Google, Email)
- 🔍 Global Search – Fuzzy search with
Cmd+Kacross all content - ⬆️ Upvoting System – Community-driven project rankings
- 💬 Comments – Engage with project authors
- 🏷️ Filtering – Filter by platform, tech stack, category
- 📱 Responsive Design – Beautiful on all devices
- 🌙 Dark Mode – Easy on the eyes
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router |
| TypeScript | Type-safe development |
| Tailwind CSS 4 | Utility-first styling |
| Prisma | Type-safe ORM |
| PostgreSQL | Database (via Neon) |
| Clerk | Authentication & user management |
| Framer Motion | Animations |
| Fuse.js | Fuzzy search |
| Zod | Schema validation |
| Vercel | Deployment & hosting |
vibestack/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (main)/ # Main routes (resources, projects, platforms, etc.)
│ │ ├── api/ # API routes
│ │ │ ├── projects/ # Project CRUD endpoints
│ │ │ ├── resources/ # Resource endpoints
│ │ │ ├── search/ # Search API
│ │ │ └── webhooks/ # Clerk webhooks
│ │ ├── sign-in/ # Auth pages
│ │ ├── sign-up/
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Landing page
│ │ └── globals.css # Global styles
│ │
│ ├── components/ # React components
│ │ ├── ui/ # Base UI components (shadcn/ui)
│ │ ├── navbar.tsx # Navigation
│ │ ├── footer.tsx # Footer
│ │ ├── command-palette.tsx # Cmd+K search
│ │ ├── project-card.tsx # Project display
│ │ ├── resource-bento-card.tsx
│ │ └── ...
│ │
│ ├── lib/ # Utilities & config
│ │ ├── prisma.ts # Database client
│ │ ├── auth.ts # Auth helpers
│ │ ├── validators.ts # Zod schemas
│ │ └── utils.ts # Utility functions
│ │
│ └── proxy.ts # API proxy configuration
│
├── prisma/
│ ├── schema.prisma # Database schema
│ └── seed.ts # Seed data
│
├── content/ # Markdown content (guides, resources)
├── public/ # Static assets
└── package.json
-
Clone the repository
git clone https://github.com/princepal9120/vibestack.git cd vibestack -
Install dependencies
npm install # or pnpm install # or bun install
-
Set up environment variables
cp .env.example .env
-
Configure your
.envfile (see Environment Variables) -
Set up the database
# Generate Prisma client npx prisma generate # Run migrations npx prisma migrate dev # (Optional) Seed the database npm run db:seed
-
Start the development server
npm run dev
-
Open your browser
Visit http://localhost:3000 🎉
Create a .env file in the project root with the following variables:
# ======================
# Database (PostgreSQL with Neon)
# ======================
DATABASE_URL="postgresql://user:password@host-pooler.neon.tech/vibestack?sslmode=require"
DIRECT_URL="postgresql://user:password@host.neon.tech/vibestack?sslmode=require"
# ======================
# Clerk Authentication
# ======================
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."
CLERK_WEBHOOK_SECRET="whsec_..."
# Clerk URLs (optional)
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL="/"
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL="/"
# ======================
# Cloudinary (Image Uploads)
# ======================
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="your-cloud-name"
CLOUDINARY_API_KEY="your-api-key"
CLOUDINARY_API_SECRET="your-api-secret"
# ======================
# App Configuration
# ======================
NEXT_PUBLIC_APP_URL="http://localhost:3000"📖 Where to get these values
| Variable | Where to get it |
|---|---|
DATABASE_URL / DIRECT_URL |
Neon Dashboard → Create Project → Connection Details |
CLERK_* keys |
Clerk Dashboard → Create App → API Keys |
CLOUDINARY_* |
Cloudinary Dashboard → Settings → Access Keys |
1. Navigate to /platforms
2. Select a platform (e.g., "Cursor")
3. Explore setup guides, workflows, and cheat sheets
1. Sign in with GitHub/Google
2. Click "Showcase Your Project"
3. Fill in project details, tech stack, and screenshots
4. Write key insights about how you used AI tools
5. Publish and share with the community!
1. Press Cmd+K (Mac) or Ctrl+K (Windows)
2. Type to search across all content
3. Select a result to navigate instantly
We ❤️ contributions! VibeStack is built by the community, for the community.
# 1. Fork the repository
# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/vibestack.git
# 3. Create a feature branch
git checkout -b feature/amazing-feature
# 4. Make your changes and commit
git commit -m "feat: add amazing feature"
# 5. Push and open a PR
git push origin feature/amazing-feature- 📖 Read our CONTRIBUTING.md for detailed guidelines
- 🐛 Found a bug? Open an issue
- 💡 Have an idea? Request a feature
- 🏷️ Look for
good first issuelabels for beginner-friendly tasks
- TypeScript – Strong typing, avoid
any - Conventional Commits –
feat:,fix:,docs:, etc. - Component Structure – Functional components with hooks
- Styling – Tailwind CSS, mobile-first responsive
- Platform profiles & guides
- Project showcase & gallery
- Resource library with filtering
- User authentication
- Comments & upvoting
- Global search (Cmd+K)
- Email notifications
- Enhanced user profiles
- Admin content dashboard
- Advanced filtering options
- Advanced search (Meilisearch)
- User-created collections
- Leaderboards & badges
- Project of the week
- Follow users
- Nested comment replies
- API for third-party integrations
Have ideas for the roadmap?
We'd love to hear from you! Open a discussion or submit a feature request.
This project is open source and available under the MIT License.
MIT License
Copyright (c) 2026 VibeStack
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...
- Next.js – The React Framework
- Clerk – Authentication made simple
- Prisma – Next-gen ORM
- Tailwind CSS – Utility-first CSS
- shadcn/ui – Beautiful UI components
- All our amazing contributors ❤️
If VibeStack has helped you, please consider:
- ⭐ Starring the repository
- 🐦 Sharing on social media
- 💬 Telling your friends and colleagues
- 🤝 Contributing to the project
Built with ❤️ by the VibeStack community
GitHub · Issues · Discussions