☁️ Stratus ☁️

A Modern, Powerful Content Management System for the Cloud Era.

🎯 Problem & Inspiration

Traditional blogging platforms are either too complex for beginners or too restrictive for advanced users. Many lack modern features like real-time editing, role-based access control, and AI-powered content generation. Stratus bridges this gap by providing a sleek, intuitive CMS that combines the simplicity of Medium with the power of WordPress, all while leveraging cutting-edge technologies like Next.js 15, Prisma, and AI integration.

🧠 What It Does

📝 Rich Text Editor Powerful Quill-based editor with formatting options	🤖 AI Content Generation Generate blog content with AI assistance
🔐 Multi-Role Authentication Admin, User roles with NextAuth.js	📊 Admin Dashboard Comprehensive blog and user management
🎨 Beautiful UI Modern design with Tailwind CSS & Lightswind	🚀 Lightning Fast Built with Next.js 15 & Turbopack
🖼️ Image Management Supabase integration for media storage	📄 Draft System Save and manage blog drafts
🔍 Category Filtering Organize and filter blogs by categories	📱 Responsive Design Perfect on all devices
🌐 SEO Optimized Dynamic OG images and meta tags	⚡ Rate Limiting Upstash Redis for API protection

⚙️ Tech Stack

Frontend

⚛️ Next.js 15 • 🎨 Tailwind CSS 4 • 💫 Lightswind Components • 🌙 Next Themes
✨ Radix UI • 📝 React Quill • 🎯 React Hook Form • 🔔 Sonner Toasts

Backend & Database

🔥 Next.js API Routes • 🗄️ Prisma ORM • 🐘 PostgreSQL • 🔐 NextAuth.js
🚀 Supabase Storage • 📦 MongoDB (Alternative) • ⚡ Upstash Redis

Features & Integrations

🤖 AI Content Generation • 🔒 JWT Authentication • 🎯 Role-Based Access
📊 Admin Dashboard • 🖼️ Dynamic OG Images • 🛡️ Rate Limiting • 🔥 Firebase Config

🎓 Target Users

• 📝 Bloggers & Writers – Create and publish content with ease using a modern editor
• 👨‍💼 Content Managers – Manage multiple authors, posts, and categories from a central dashboard
• 🏢 Businesses – Build corporate blogs with team collaboration features
• 🎓 Educators – Share knowledge and create educational content
• 💻 Developers – Self-host and customize with full access to source code
• 🚀 Startups – Launch blogs quickly with built-in SEO and performance optimization

🏗️ How It's Built

Stratus is architected as a modern full-stack Next.js application: Architecture 🎨 Next.js 15: App Router with React Server Components ⚡ Turbopack: Blazing fast bundler for development 🗄️ Prisma: Type-safe database ORM with migrations 🔐 NextAuth.js: Secure authentication with multiple providers 🎭 Role-Based Access: Admin and User roles with middleware Key Features Server Actions: Modern data mutations without API routes Dynamic Routing: SEO-friendly blog URLs with slugs Image Optimization: Automatic image processing and CDN Real-Time Updates: Optimistic UI updates Type Safety: Full TypeScript support with Zod validation Scalable Design: Ready for horizontal scaling

✨ Core Features

📝 Rich Content Creation

• Advanced Quill editor with formatting toolbar
• Image upload and embedding
• Code syntax highlighting
• Link insertion and management
• Auto-save drafts
• Preview before publishing

🤖 AI-Powered Tools

• AI content generation assistance
• Smart title suggestions
• SEO optimization recommendations
• Content improvement suggestions
• Automated meta descriptions

🔐 Authentication & Authorization

• NextAuth.js integration
• Google OAuth sign-in
• Email/password authentication
• Role-based access control (Admin/User)
• Protected routes with middleware
• Session management

📊 Admin Dashboard

• User management interface
• Blog post moderation
• Analytics and statistics
• Category management
• Bulk operations
• Activity logs

🎨 Design & UI

• Modern, clean interface
• Dark/Light theme toggle
• Responsive on all devices
• Smooth animations with Lightswind
• Accessible components (Radix UI)
• Custom sidebar navigation

🖼️ Media Management

• Supabase storage integration
• Image upload and optimization
• Thumbnail generation
• Media library
• CDN delivery
• Automatic compression

🔍 Content Discovery

• Category-based filtering
• Search functionality
• Pagination support
• Related posts
• Popular posts section
• Tag system

🌐 SEO & Sharing

• Dynamic OG image generation
• Meta tags optimization
• Sitemap generation
• RSS feed support
• Schema.org markup
• Social media preview

🚨 Security & Performance

• Rate limiting with Upstash Redis
• CSRF protection
• XSS prevention
• SQL injection protection
• Edge caching
• Image optimization

📂 Project Structure

cmsproject/
├── 📱 src/
│   ├── app/                       # Next.js App Router
│   │   ├── (admin)/              # Admin routes
│   │   │   ├── posts/            # Post management
│   │   │   └── user/             # User management
│   │   ├── (auth)/               # Auth pages
│   │   │   └── sign-in/          # Sign in page
│   │   ├── (user)/               # User routes
│   │   │   └── userPost/         # User's posts
│   │   ├── actions/              # Server actions
│   │   ├── api/                  # API routes
│   │   │   ├── auth/             # NextAuth config
│   │   │   ├── og/               # OG image generation
│   │   │   └── v1/               # API v1 endpoints
│   │   ├── blog/                 # Blog pages
│   │   │   └── [slug]/           # Dynamic blog routes
│   │   ├── blogs/                # All blogs page
│   │   ├── dashboard/            # Dashboard
│   │   └── draft/                # Draft management
│   │
│   ├── components/               # React components
│   │   ├── admin/                # Admin components
│   │   ├── lightswind/           # Lightswind UI components
│   │   ├── providers/            # Context providers
│   │   ├── ui/                   # Shadcn UI components
│   │   └── user/                 # User components
│   │
│   ├── hooks/                    # Custom React hooks
│   ├── lib/                      # Utility libraries
│   │   ├── auth.js               # Auth utilities
│   │   ├── prisma.js             # Prisma client
│   │   └── supabase.js           # Supabase client
│   │
│   ├── static/                   # Static configs
│   │   ├── config.js             # App config
│   │   └── firebaseConfig.js     # Firebase config
│   │
│   ├── utils/                    # Helper functions
│   │   ├── ai-content.js         # AI utilities
│   │   ├── dateFormat.js         # Date formatting
│   │   ├── isAdmin.js            # Role checks
│   │   └── rateLimits.js         # Rate limiting
│   │
│   └── middleware.js             # Next.js middleware
│
├── 📦 prisma/
│   └── schema.prisma             # Database schema
│
├── 🎨 public/
│   └── thumbnails/               # Blog thumbnails
│
├── 📜 scripts/                   # Utility scripts
│
└── 🔧 Config Files
    ├── next.config.mjs           # Next.js config
    ├── tailwind.config.js        # Tailwind config
    ├── postcss.config.mjs        # PostCSS config
    └── components.json           # Shadcn config

🚀 Quick Start Guide

Prerequisites

Node.js v18+
PostgreSQL (or MongoDB)
npm, yarn, or pnpm
Supabase account (for image storage)

1️⃣ Clone the Repository

git clone <your-repo-url>
cd cmsproject

2️⃣ Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3️⃣ Environment Setup

Create a .env file in the root directory:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/stratus"

# NextAuth
NEXTAUTH_SECRET="your-nextauth-secret"
NEXTAUTH_URL="http://localhost:3000"

# OAuth Providers
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# Supabase
NEXT_PUBLIC_SUPABASE_URL="your-supabase-url"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-supabase-anon-key"

# Upstash Redis (Rate Limiting)
UPSTASH_REDIS_REST_URL="your-upstash-url"
UPSTASH_REDIS_REST_TOKEN="your-upstash-token"

# AI (Optional)
OPENAI_API_KEY="your-openai-key"

4️⃣ Database Setup

# Generate Prisma client
npx prisma generate

# Run migrations
npx prisma migrate dev

# Seed database (optional)
npx prisma db seed

5️⃣ Run Development Server

npm run dev
# App runs on http://localhost:3000

6️⃣ Build for Production

npm run build
npm start

📸 Screenshots

🏠 Landing Page	📚 Blogs Page
📝 Blog Creation	📄 Blog Post

🗺️ Roadmap

• ✅ Phase 1: Core CMS functionality with blog creation and management
• ✅ Phase 2: User authentication and role-based access
• ✅ Phase 3: Admin dashboard and user management
• ✅ Phase 4: AI content generation integration
• ✅ Phase 5: Image storage with Supabase
• 🔄 Phase 6: Comments and reactions system
• 🔄 Phase 7: Email notifications and newsletters
• 📅 Phase 8: Advanced analytics and insights
• 📅 Phase 9: Multi-language support
• 📅 Phase 10: Mobile app (React Native)

🧠 What I Learned

• 🏗️ Next.js 15: Mastering App Router, Server Components, and Server Actions
• ⚡ Turbopack: Leveraging the next-generation bundler for faster development
• 🗄️ Prisma ORM: Designing complex database schemas with relationships
• 🔐 Authentication: Implementing secure auth flows with NextAuth.js
• 🎨 Modern UI: Building accessible components with Radix UI and Tailwind
• 🖼️ Cloud Storage: Integrating Supabase for scalable media management
• 🤖 AI Integration: Incorporating AI-powered features for content generation
• 🛡️ Security: Implementing rate limiting, CSRF protection, and input validation
• 📊 Performance: Optimizing images, caching, and database queries
• 🌐 SEO: Dynamic OG image generation and meta tag optimization

---

🧩 Challenges Faced

• ⚠️ Next.js 15 Migration: Adapting to new App Router patterns and server components
• 🔍 Type Safety: Ensuring end-to-end type safety from database to UI
• 💾 Image Handling: Implementing efficient image upload and storage with Supabase
• 🧠 State Management: Managing complex state across server and client components
• ⏰ Real-Time Updates: Keeping UI synchronized with database changes
• 📊 Performance: Optimizing for Core Web Vitals and SEO
• 🔄 Draft System: Building a robust draft and publish workflow
• 🌐 OG Images: Generating dynamic social media images at the edge
• 🛡️ Rate Limiting: Implementing Upstash Redis for API protection
• 🎨 UI Polish: Creating a cohesive design system with Lightswind components

👨‍💻 Developer

Deep Mehta Sole Developer & Creator Full Stack Developer passionate about building modern web applications

📊 Project Statistics

Feature	Status	Details
📁 Database Models	✅ Complete	User, Post, Category, Session
🛣️ API Routes	✅ Complete	Auth, Blogs, Users, OG Images
⚛️ React Components	✅ Complete	50+ reusable components
📄 Pages	✅ Complete	15+ pages
🔐 Auth Providers	✅ Complete	Google OAuth, Credentials
👥 User Roles	✅ Complete	Admin, User
🎨 UI Components	✅ Complete	Lightswind + Custom
🤖 AI Features	✅ Integrated	Content generation

💡 Technical Highlights

Performance Optimizations

• ⚡ Server-side rendering for instant page loads
• 🖼️ Automatic image optimization with Next.js Image
• 📦 Code splitting and lazy loading
• 🔄 Incremental Static Regeneration (ISR)
• 💨 Edge middleware for fast authentication checks

Security Features

• 🔒 HTTPS only in production
• 🛡️ Rate limiting on all API routes
• 🔐 Secure password hashing with bcrypt
• 🚫 SQL injection prevention with Prisma
• 🧼 Input sanitization and validation
• 🍪 HTTP-only cookies for sessions

Developer Experience

• 📝 Full TypeScript support
• 🎯 Zod schema validation
• 🔧 ESLint and Prettier configured
• 📚 Component documentation
• 🧪 Ready for testing setup
• 🚀 Easy deployment to Vercel/Netlify

🌟 Why Stratus?

• 🚀 Modern Stack: Built with the latest technologies (Next.js 15, Turbopack, Tailwind 4)
• ⚡ Lightning Fast: Optimized for performance with edge functions and caching
• 🎨 Beautiful UI: Clean, modern design that users love
• 🔐 Secure: Industry-standard security practices
• 📱 Responsive: Perfect experience on any device
• 🤖 AI-Powered: Smart content generation and suggestions
• 🛠️ Customizable: Easy to extend and modify
• 📖 Well-Documented: Clear code and comprehensive docs

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Netlify

# Build command
npm run build

# Publish directory
.next

Docker

# Dockerfile included in project
docker build -t stratus .
docker run -p 3000:3000 stratus

📄 License

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

---

🙏 Acknowledgments

• Thanks to the Next.js team for an amazing framework
• Vercel for excellent hosting and developer experience
• Prisma for the best ORM experience
• The open-source community for incredible tools and libraries

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.

---

⭐ Show Your Support

Give a ⭐️ if you like this project!

---

☁️ "Stratus - Where content meets the cloud."

_{Built with ❤️ by Deep Mehta
Crafted with passion for modern web development}