🚀 CybrKit

Ship your SaaS in days, not months.

Quick Start • Features • Tech Stack • Deployment • Customization

---

📸 Screenshot

---

✨ Features

Everything you need to launch your SaaS product:

🔐 Authentication

• NextAuth.js with multiple providers
• Google OAuth integration
• GitHub OAuth integration
• Email magic link authentication
• Protected routes middleware
• Session management

💳 Payments

• Stripe subscription management
• Checkout session creation
• Customer portal integration
• Webhook handling for subscription events
• Three-tier pricing (Free/Pro/Enterprise)
• Subscription status tracking

🎨 UI/UX

• Modern dark theme design
• Purple/blue gradient accents
• Fully responsive (mobile + desktop)
• shadcn/ui component library
• Dark/light mode toggle
• Premium landing page
• Clean dashboard interface

🛠️ Developer Experience

• TypeScript throughout
• Prisma ORM with PostgreSQL
• Tailwind CSS styling
• ESLint + Prettier ready
• Production-ready structure
• Comprehensive documentation

📧 Communications

• Resend email integration
• Transactional email support
• Welcome emails
• Subscription notifications

---

🚀 Quick Start

Get your SaaS up and running in 4 simple steps:

1. Clone & Install

git clone https://github.com/M4ST3R-C0NTR0L/cybrkit.git
cd cybrkit
npm install

2. Configure Environment

cp .env.example .env.local

Edit .env.local with your credentials:

• Database URL (PostgreSQL)
• NextAuth secret
• OAuth credentials (Google/GitHub)
• Stripe API keys
• Resend API key

3. Setup Database

npx prisma generate
npx prisma db push

4. Run Development Server

npm run dev

Visit http://localhost:3000 to see your SaaS! 🎉

---

🛠️ Tech Stack

Category	Technology
Framework	Next.js 14 (App Router)
Language	TypeScript
Styling	Tailwind CSS
Components	shadcn/ui
Auth	NextAuth.js
Database	PostgreSQL
ORM	Prisma
Payments	Stripe
Email	Resend
Deployment	Vercel

---

📦 Project Structure

CybrKit/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/            # Auth routes (login/signup)
│   │   ├── (dashboard)/       # Dashboard routes
│   │   ├── api/               # API routes
│   │   ├── page.tsx           # Landing page
│   │   └── layout.tsx         # Root layout
│   ├── components/
│   │   ├── ui/                # shadcn/ui components
│   │   ├── landing/           # Landing page sections
│   │   ├── dashboard/         # Dashboard components
│   │   └── shared/            # Shared components
│   ├── lib/                   # Utility functions
│   └── types/                 # TypeScript types
├── prisma/
│   └── schema.prisma          # Database schema
└── public/                    # Static assets

---

🚀 Deployment

Deploy to Vercel (One-Click)

Manual Deployment

1. Push your code to GitHub
2. Import your repository on Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Environment Variables for Production

Variable	Description	Required
DATABASE_URL	PostgreSQL connection string	✅
NEXTAUTH_URL	Your production URL	✅
NEXTAUTH_SECRET	Random secret for JWT	✅
GOOGLE_CLIENT_ID	Google OAuth client ID	Optional
GOOGLE_CLIENT_SECRET	Google OAuth secret	Optional
GITHUB_CLIENT_ID	GitHub OAuth client ID	Optional
GITHUB_CLIENT_SECRET	GitHub OAuth secret	Optional
STRIPE_SECRET_KEY	Stripe secret key	✅
STRIPE_PUBLISHABLE_KEY	Stripe publishable key	✅
STRIPE_WEBHOOK_SECRET	Stripe webhook secret	✅
STRIPE_PRO_PRICE_ID	Stripe Pro plan price ID	✅
STRIPE_ENTERPRISE_PRICE_ID	Stripe Enterprise price ID	Optional
RESEND_API_KEY	Resend API key	Optional
EMAIL_FROM	Sender email address	Optional

---

🎨 Customization

Branding

1. Update src/app/page.tsx with your product name and description
2. Replace public/logo.svg with your logo
3. Update colors in tailwind.config.ts and src/app/globals.css
4. Modify pricing tiers in src/components/landing/pricing.tsx

Database

Edit prisma/schema.prisma to add your own models:

model Project {
  id        String   @id @default(cuid())
  name      String
  userId    String
  user      User     @relation(fields: [userId], references: [id])
  createdAt DateTime @default(now())
}

Then run:

npx prisma migrate dev --name add_project

Authentication Providers

Add more OAuth providers in src/lib/auth.ts:

import DiscordProvider from 'next-auth/providers/discord'

providers: [
  // ...existing providers
  DiscordProvider({
    clientId: process.env.DISCORD_CLIENT_ID!,
    clientSecret: process.env.DISCORD_CLIENT_SECRET!,
  }),
]

Email Templates

Customize emails in your API routes using Resend:

import { Resend } from 'resend'

const resend = new Resend(process.env.RESEND_API_KEY)

await resend.emails.send({
  from: process.env.EMAIL_FROM!,
  to: user.email,
  subject: 'Welcome to CybrKit!',
  html: '<p>Your custom email content</p>',
})

---

📈 Roadmap

• Team/organization support
• Role-based access control (RBAC)
• API key management
• Webhook management UI
• Admin dashboard
• Analytics integration
• Documentation site template
• Blog template
• Multi-language support
• Mobile app starter (React Native)

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please read our Contributing Guide for more details.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Next.js for the amazing framework
• shadcn/ui for the beautiful components
• Vercel for the deployment platform
• Stripe for payment processing

---

Built by Cybrflux

⭐ Star this repo if you found it helpful!