🧠 DecryptMike SaaS Starter Kit

A production-ready SaaS Starter Kit with authentication, RBAC, Stripe billing, PostgreSQL, and a fully custom cyberpunk dashboard UI.

---

📸 Screenshots / GIF Preview

⛔️ Restricted Page

🔐 Sign In Page

✅ Dashboard (GIF Scroll Preview)

🔒 Unauthorized Page

📉 Stripe Success / Cancel Pages

---

📦 Features

• 🔒 NextAuth.js Authentication (GitHub OAuth)
• 📜 RBAC – Role-Based Access Control
• 💳 Stripe Billing – Checkout + Customer Portal
• 🧬 PostgreSQL + Prisma ORM
• 🌐 Vercel Ready – One-click deploy
• 💡 Cyberpunk UI with Matrix-style rain background
• 📊 Interactive Dashboard (Total Revenue, Sales, User Growth, Activity)

---

🛠️ Tech Stack

• Framework: Next.js 15 App Router (TypeScript)
• Styling: Tailwind CSS, custom UI
• Auth: NextAuth.js (JWT Strategy)
• DB: Supabase PostgreSQL + Prisma ORM
• Payments: Stripe Checkout & Portal
• Deployment: Vercel

---

🧰 Project Structure

src/
├── app/
│   ├── dashboard/               # Dashboard page + subpages
│   ├── signin/page.tsx         # Sign In Page
│   ├── unauthorized/page.tsx   # Access Denied Page
│   ├── api/
│   │   ├── auth/[...nextauth]/route.ts  # Auth Route
│   │   └── stripe/checkout/    # Stripe API Routes
├── components/ui/              # Custom UI components
├── lib/                        # Helpers (Prisma, Auth, etc)
├── styles/                     # Global styles
public/
│   └── decryptmike-logo.png    # Brand Logo

---

📄 Environment Variables

Required in .env.local:

GITHUB_ID=your_github_oauth_id
GITHUB_SECRET=your_github_oauth_secret
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=https://your-vercel-domain.vercel.app
NEXT_PUBLIC_APP_URL=https://your-vercel-domain.vercel.app
STRIPE_SECRET_KEY=your_stripe_secret
STRIPE_PUBLIC_KEY=your_stripe_public
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
DATABASE_URL=your_postgres_database_url

---

🔄 Setup Instructions

git clone https://github.com/DecryptMike/DecryptMike-SaaS-Starter-Kit.git
cd DecryptMike-SaaS-Starter-Kit
npm install
npx prisma generate
npx prisma db push
npm run dev

---

📸 Screenshot References

All screenshots + GIFs can be found inside your public/ folder or attached assets:

• /public/signin.png
• /public/dashboard-scroll.gif
• /public/unauthorized.png
• /public/success.png
• /public/cancelled.png

---

🧪 Getting Started Locally

First, clone the project and install dependencies:

git clone https://github.com/DecryptMike/DecryptMike-SaaS-Starter-Kit.git
cd DecryptMike-SaaS-Starter-Kit
npm install

Run your database migrations and generate the Prisma client:

npx prisma generate
npx prisma db push

Then start the dev server:

npm run dev

Visit http://localhost:3000 to view the app. Sign-in requires GitHub OAuth to be configured in .env.local.

Pro Tip: The landing page redirects to /signin, and only authenticated users can view /dashboard.

---

📌 Status

✅ Final build tested locally and pushed to GitHub and Vercel
❌ Currently debugging GitHub OAuth callback 404
🎯 Feature complete + ready for deployment

---

🎯 Why I Built It

This project was built to showcase real-world skills in full-stack development with a cybersecurity-focused SaaS kit. It’s designed for hiring managers, portfolio reviewers, and recruiters looking to assess:

• Proficiency with authentication, RBAC, and secure data storage

• Experience integrating Stripe billing into a Next.js application

• Design and layout customization with Tailwind CSS

• Deployment and CI/CD using Vercel

---

⚠️ Legal Disclaimer

This tool is intended for educational and authorized personal use only.

---

💻 Built by @DecryptMike

---