CogniCode is an institutional-grade SaaS platform that seamlessly bridges the gap between intelligent AI-assisted software engineering and production-ready DevOps deployment pipelines. Featuring a high-performance browser-based IDE and a secure, containerized cloud execution engine, CogniCode unifies coding, real-time code analysis, security auditing, and live server deployment into a single, high-fidelity workspace.
CogniCode is built on a modern, high-performance stack separating containerized execution logic, state management, and real-time event streaming.
- Core Framework: React (Vite-powered, ES Modules)
- State Management: Redux Toolkit & React Redux (global auth, project status, and socket sessions)
- Code Editor: Monaco Editor (
@monaco-editor/react) for full IntelliSense, autocomplete, syntax coloring, and formatting - Visual Graph Engine: ReactFlow & Dagre Graph (for dynamic codebase and dependency flow charts)
- Diagram Rendering: Mermaid.js (translating schema text into Entity-Relationship diagrams)
- Animations: Framer Motion (smooth transition panels, micro-animations, and loaders)
- WebSockets: Socket.io-client (subscribing to live streaming Docker build and execution logs)
- Styling: SCSS/Sass & TailwindCSS (implementing our premium, high-contrast Dark Theme)
- Runtime: Node.js
- Framework: Express (Express v5 for routing & middleware)
- Database: MongoDB (Mongoose ORM) for user, project, and session persistence
- Caching & Memory Store: Redis (tracking active containers, blacklisting tokens, and managing sessions)
- Real-time Engine: Socket.io (streaming live container stdout/stderr terminal output to client tabs)
- Security & Auth: Passport.js (Google & GitHub OAuth 2.0), BcryptJS, JWT, Helmet (secured headers), and express-validator
- Storage Provider: ImageKit.io (handling secure media and user profile uploads)
- Transactional Email: Brevo (handling onboarding verification and secure password resets)
- Parsing / AST Suite: Babel Parser (generating AST mappings of user code to check for OWASP flaws)
- Engines: Google Generative AI (Gemini Flash/Pro), Groq SDK (Llama models), Cohere AI, and OpenRouter API wrappers
- Orchestration: Docker & Docker Compose (isolated workspaces and dependency caching)
- Cloud Platform: AWS ECS (Fargate containers), Application Load Balancers (ALB), Route 53 wildcard domains
CogniCode organizes the full software lifecycle into three distinct, powerful suites:
- Bulk Collaborator Invites: Add colleagues to multiple repositories at once from the Dashboard, managing roles (Viewer, Editor, Admin) with autocomplete memory.
- Shared Workspace: Access collaborative project files, check owners, and sync code edits across team projects in a dedicated "Shared with Me" panel.
- AI Project Diagnostics: Click the debug bug-icon in the navbar to let AI analyze search queries and recommend projects or troubleshoot search intents.
- Intent-Driven Coding: Write natural language instructions to refactor, write, or optimize code. The editor renders side-by-side diff comparisons (
react-diff-viewer-continued) for review. - Interactive Codebase Graph: Generate an interactive ReactFlow dependency map of your codebase. Click on any file node to let the AI explain its responsibilities and flow.
- Database Schema Designer: Type your database relationships in plain English (e.g., "E-commerce cart with items and quantity"), and watch the AI generate Mongoose/Prisma code alongside a live Mermaid ER diagram.
- One-Click Security Auditing: Perform deep AST (Abstract Syntax Tree) scans to catch SQL Injections, XSS, or hardcoded secrets, then fix them instantly with a single click.
- Decision Memory: Save the reasons behind architectural choices. Hovering over annotated files displays a tooltip explaining why specific packages or patterns were chosen.
- Time-Travel Debugger: Paste stack traces or container crash logs, and the AI will scan your dependency tree to diagnose the root cause and write the patch.
- Automated TDD Agent: Instantly generate comprehensive unit and integration test files for your functions.
- Isolated Cloud Sandboxes: One-click containerized deployment. CogniCode generates custom
Dockerfilesand configurations on-the-fly if they are missing. - Live Streaming Logs: Watch build, compilation, and runtime server logs stream in real-time over Socket.io.
- Timeline Rollbacks: Browse deployment history on a visual timeline. Revert to any previous stable container version with zero downtime.
- Environment Secrets Manager: Securely input and encrypt API keys and tokens, which are injected safely into container environments at runtime.
CogniCode features deep integration with Monaco Editor, providing standard desktop IDE keybindings directly in your web browser:
| Keybinding | Action | Scope |
|---|---|---|
Ctrl + S / Cmd + S |
Save current active file | Editor |
Shift + Alt + F |
Auto-format current code | Editor (JS, JSX, TS, TSX) |
Ctrl + F / Cmd + F |
Open find bar | Editor |
Ctrl + H / Cmd + H |
Open search and replace | Editor |
Ctrl + / / Cmd + / |
Toggle line comment | Editor |
Ctrl + Space |
Trigger IntelliSense autocomplete | Editor |
Ctrl + Shift + L |
Select all occurrences of current selection | Editor |
Alt + Up/Down Arrow |
Move selected line(s) up or down | Editor |
Ctrl + G |
Jump to specific line number | Editor |
Enter |
Confirm file/folder creation | File Explorer Input |
Escape |
Cancel file creation / Close modals | Global |
Building CogniCode required solving complex state syncing issues, container isolation, and production hardening.
graph TD
A[Phase 1: Database & Schema Planning] --> B[Phase 2: Backend REST & WebSockets API]
B --> C[Phase 3: Frontend Monaco Editor Workspace]
C --> D[Phase 4: AST Parsers & AI Integration]
D --> E[Phase 5: AWS Cloud Infrastructure & Hardening]
- Designed schemas supporting multi-role collaboration (Viewer, Editor, Admin) and the relationship maps linking users, projects, and deployment histories.
- Designed the "Decision Memory" schema indexing files, line ranges, and metadata for fast context injection into LLM prompts.
- Implemented Express 5 for modular API routing, incorporating JWT authentication, rates-limiting security, and Passport.js handlers for OAuth (Google & GitHub).
- Established Socket.io namespaces to pipe live stdout/stderr streams from local Docker executors to the client frontend.
- Created a premium, high-contrast Dark Theme design system.
- Wrapped Monaco Editor in React, linking it to the sidebar File Explorer to support multi-tab states, file creation, saving, and deletion.
- Integrated Babel's AST parser to parse JavaScript files and construct code maps for ReactFlow.
- Engineered prompt templates for Groq and Gemini, feeding them the workspace tree context to guarantee precise code generation and debugging.
- Deployed containerized services to AWS ECS.
- Resolving Express 5 Wildcards: Caught and resolved a
PathErrorcrash caused by the new strict wildcard path rules in Express 5. Re-routed catch-alls to/*path. - Fail-Safe Startup Implementation: Discovered that container startups were crashing and triggering ECS rollbacks when MongoDB or Redis connections were sluggish. Wrapped the DB/Redis pools in try-catch loops, allowing the
/healthchecks to pass while backing services established connections. - ALB & CORS Tuning: Hooked up an Application Load Balancer (ALB) on port 80 routing to target groups on port 3000. Resolved browser cookie rejection by setting
sameSite: "lax"and conditionally settingsecure: falsewhen operating over HTTP load balancers. - SMTP Provider Configuration: Worked around Brevo's IP authorization locks. Since ECS containers spin up on dynamic IPs, whitelisting was deactivated to allow emails to successfully send.
- Express 5 Path Conventions: Express 5 relies on a strict version of
path-to-regexp. Catch-all routes must be explicitly named (e.g. changing*to/*path), otherwise the server throws a fatalPathErroron boot. - Container Resiliency & Health Check Tuning: Cloud orchestrators (like AWS ECS) require services to be highly responsive to health check probes. A fail-fast approach that crashes the server on database timeout will trigger cascading deployment rollbacks. A fail-safe startup pattern, backed by async retries, keeps containers alive and allows healthy status codes on
/healthduring initial boots. - Cookie Attributes Over Insecure Load Balancers: Setting
secure: trueandsameSite: "none"is crucial for production HTTPS, but when testing over an HTTP Application Load Balancer, the browser will silent-drop credentials. Conditionally adjusting cookie flags based on protocol is necessary to maintain developer login sessions. - Dynamic IP Whitelisting Hazards: External email/SMTP APIs (like Brevo) which rely on IP whitelisting will fail in a serverless container environment like AWS Fargate. Containers are assigned dynamic IP addresses on launch, making API-level whitelisting impractical; authorization must be managed strictly using API tokens.
- HTTPS Enforcement: Install an SSL certificate (AWS Certificate Manager) on the ALB listener to serve the app over HTTPS, allowing secure token cookies to be strictly enforced.
- Real-time Collaborative Editing: Integrate Yjs (CRDT) and Socket.io to allow multi-user collaborative editing inside the same file in real-time.
- Autoscaling Policies: Implement target-tracking scaling policies on AWS ECS based on CPU and memory utilization to manage heavy AI generation requests.
- Pre-warmed Sandbox Containers: Create a reserve pool of pre-warmed sandbox containers to accelerate deployment times from minutes to seconds.
- Multi-Language AST Engine: Extend the security analyzer to support Python, Go, and Rust by introducing Tree-sitter parsers on the backend.
Ensure you have the following installed on your machine:
- Node.js (v20 or higher)
- MongoDB (Local or Atlas URL)
- Redis (Local instance or cloud connection)
- Docker Desktop (Required for DevOps container sandbox)
git clone https://github.com/your-username/cognicode.git
cd cognicodeCreate a .env file in the backend/ directory:
PORT=3000
MONGO_URI=mongodb://localhost:27017/cognicode
JWT_SECRET=your_jwt_secret_key
REDIS_URL=redis://localhost:6379
BASE_URL=http://localhost:3000
FRONTEND_URL=http://localhost:5173
# AI APIs
GEMINI_API_KEY=your_gemini_key
GROQ_API_KEY=your_groq_key
# Image & Email Providers
IMAGEKIT_URL_ENDPOINT=your_imagekit_endpoint
IMAGEKIT_PUBLIC_KEY=your_imagekit_public
IMAGEKIT_PRIVATE_KEY=your_imagekit_private
BREVO_SENDER_EMAIL=your_verified_sender_email
BREVO_API_KEY=your_brevo_api_key
# OAuth Credentials
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secretThis runs the database, Redis cache, frontend, and backend in an orchestrated docker environment.
docker-compose up --buildOpen http://localhost:5173 in your browser.
- Start the Backend Server:
cd backend npm install npm run dev - Start the Frontend Client:
The client will boot on http://localhost:5173 and proxy
cd ../frontend npm install npm run dev/apicalls automatically to port3000.