agile-workspace

byNitin Singh Tanwar

You are a senior staff engineer and elite SaaS product designer. Build a COMPLETE PRODUCTION-READY AI Developer Workspace platform for 2026. IMPORTANT: This is NOT a demo project. This is NOT frontend-only. This must be a REAL full-stack SaaS application with clean architecture, scalable code, responsive UI, animations, AI integration, authentication, and production-ready features. The final result should feel like: Linear + Notion + Vercel + Framer + Raycast + ChatGPT combined. ==================================================== MAIN GOAL ==================================================== Create an AI-powered developer workspace platform where developers can: - Save notes - Manage code snippets - Track DSA progress - Use AI coding tools - Analyze GitHub repositories - Manage projects/tasks - View analytics - Use AI-powered coding assistance The UI must feel: - futuristic - cinematic - premium - smooth - immersive - modern - responsive - highly interactive ==================================================== IMPORTANT STACK REQUIREMENTS ==================================================== USE ONLY THESE TECHNOLOGIES: Frontend: - Next.js 15.5 (App Router) - React 19 - TypeScript - Tailwind CSS v4 - Shadcn UI - Framer Motion Backend: - Next.js Route Handlers - Server Actions Database: - PostgreSQL ORM: - Prisma Authentication: - Clerk OR Auth.js (NextAuth v5) State Management: - Zustand - TanStack Query Forms: - React Hook Form - Zod AI: - OpenAI SDK - Vercel AI SDK 3D: - Three.js - React Three Fiber Deployment: - Vercel Package Manager: - pnpm ==================================================== IMPORTANT DEVELOPMENT RULES ==================================================== DO NOT: ❌ generate fake UI ❌ generate placeholder backend ❌ create broken APIs ❌ use outdated Pages Router ❌ use Redux ❌ use Material UI ❌ overcomplicate architecture ❌ create unnecessary microservices ❌ use Express.js initially ❌ generate low-quality code DO: ✅ create clean scalable architecture ✅ use App Router correctly ✅ use Server Components where appropriate ✅ use Client Components only when needed ✅ create reusable components ✅ optimize performance ✅ follow modern React patterns ✅ create production-grade folder structure ==================================================== PROJECT STRUCTURE ==================================================== Use this structure: app/ components/ components/ui/ components/dashboard/ components/3d/ lib/ lib/actions/ lib/db/ lib/auth/ lib/ai/ lib/utils/ hooks/ store/ types/ prisma/ public/ styles/ ==================================================== AUTHENTICATION SYSTEM ==================================================== Implement complete authentication using Clerk or Auth.js. Features: - login - signup - logout - protected routes - session management - middleware protection - GitHub OAuth - Google OAuth - role-based access Create: - auth pages - middleware - protected dashboard routes - user profile menu ==================================================== DATABASE SYSTEM ==================================================== Use PostgreSQL + Prisma. Create proper schema for: users profiles notes snippets projects tasks analytics ai_history Create: - Prisma schema - migrations - seed data - relations - indexes ==================================================== PHASE 1 FEATURES (MVP) ==================================================== Build these FIRST: 1. Authentication 2. Dashboard layout 3. Notes CRUD 4. Code snippets CRUD 5. AI Chat 6. Analytics dashboard 7. Responsive UI 8. Animations 9. Dark/light mode DO NOT build realtime collaboration yet. ==================================================== NOTES SYSTEM ==================================================== Features: - create notes - update notes - delete notes - search notes - tags - archive/trash - markdown support - beautiful editor Use: - TipTap editor ==================================================== CODE SNIPPETS SYSTEM ==================================================== Features: - syntax highlighting - Monaco editor - copy code - language selection - favorites - collections - public sharing ==================================================== AI FEATURES ==================================================== Build ONLY these AI tools initially: 1. AI Chat Assistant 2. AI Code Explainer 3. AI Code Reviewer Use: - OpenAI API - streaming responses - Vercel AI SDK Create: - beautiful AI chat interface - typing animations - markdown rendering - code highlighting - chat history ==================================================== ANALYTICS DASHBOARD ==================================================== Create: - productivity charts - activity graphs - animated statistics - heatmaps - recent activity Use: - Recharts ==================================================== UI/UX STYLE ==================================================== Design inspiration: - Linear - Framer - Apple - Vercel - Raycast Design system: - dark futuristic UI - glassmorphism - soft gradients - glow effects - floating UI - premium spacing - cinematic animations - bento grids - blur effects Typography: - Inter - Geist ==================================================== ANIMATIONS ==================================================== Use Framer Motion everywhere. Add: - smooth page transitions - stagger animations - hover effects - magnetic buttons - animated sidebar - loading skeletons - scroll animations - animated cards - floating elements - gradient animations NO STATIC UI. ==================================================== 3D ELEMENTS ==================================================== Use Three.js ONLY in: - hero section - dashboard background - loading scenes Create: - floating holographic objects - animated particles - futuristic grids - subtle mouse interactions IMPORTANT: Keep 3D optimized and lightweight. ==================================================== RESPONSIVENESS ==================================================== Must work perfectly on: - mobile - tablet - desktop - ultrawide Create: - responsive navbar - mobile sidebar - touch-friendly interactions - optimized layouts ==================================================== DASHBOARD PAGES ==================================================== Create: /dashboard /dashboard/notes /dashboard/snippets /dashboard/ai /dashboard/analytics /dashboard/settings ==================================================== API ARCHITECTURE ==================================================== Use: - Route Handlers - Server Actions Implement: - validation - error handling - loading states - toast notifications Create APIs for: - auth - notes - snippets - ai chat - analytics ==================================================== STATE MANAGEMENT ==================================================== Use: - Zustand for global UI state - TanStack Query for API state ==================================================== THEME SYSTEM ==================================================== Implement: - dark/light mode - persistent theme - smooth transitions Use: - next-themes ==================================================== PERFORMANCE OPTIMIZATION ==================================================== Implement: - lazy loading - dynamic imports - image optimization - code splitting - Suspense - skeleton loading - optimized animations ==================================================== SECURITY ==================================================== Implement: - rate limiting - input validation - Zod validation - secure auth - protected routes - environment variable validation ==================================================== README REQUIREMENTS ==================================================== Generate a professional README including: - setup instructions - environment variables - installation - deployment - folder structure - features - screenshots section ==================================================== FINAL QUALITY REQUIREMENTS ==================================================== The final result MUST feel like: “A billion-dollar AI SaaS platform built by elite engineers.” The application must: - look premium - feel smooth - have beautiful UX - contain clean architecture - be production-ready - be scalable - be recruiter-impressive IMPORTANT: Build step-by-step. Do NOT skip backend implementation. Do NOT generate fake data structures. Everything must be functional and connected properly.