Skip to content

shams909/DevBrain

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

31 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🧠 DevBrain - The Architect

DevBrain Banner

AI-Powered Mind Mapping & Project Planning Tool

React Django Python License

Features β€’ Demo β€’ Installation β€’ Architecture β€’ Usage


πŸ“– Table of Contents


🎯 What is DevBrain?

DevBrain is an intelligent mind mapping and project planning tool that combines visual thinking with AI assistance. It helps developers, teams, and students break down complex projects into manageable hierarchical structures while providing contextual AI guidance at every step.

Think of it as Obsidian meets Notion meets ChatGPT - all in one beautiful, glassmorphic interface.


πŸ”₯ The Problem We Solve

Traditional Project Planning Pain Points:

❌ Scattered Information - Notes in one app, tasks in another, ideas in a third
❌ Loss of Context - Switching between tools loses the big picture
❌ Manual Breakdown - Breaking projects into tasks is time-consuming
❌ No AI Integration - Generic AI tools lack project-specific context
❌ Poor Visualization - Text-heavy tools don't show relationships clearly

How DevBrain Solves This:

βœ… Unified Workspace - Everything in one place: ideas, tasks, hierarchy, and AI chat
βœ… Visual Thinking - See your entire project structure at a glance (Tree & Graph views)
βœ… AI That Understands Context - Chat with AI about specific nodes with knowledge base grounding
βœ… Automatic Persistence - All changes auto-save to database, no manual saving
βœ… Hierarchical Organization - Parent-child relationships make complex projects manageable


🎬 Demo

πŸ–ΌοΈ Screenshots

Tree View (Dark Mode)

Tree View Dark Hierarchical project structure with parent-child relationships clearly visualized

Graph View (Dark Mode)

Graph View Dark Interactive force-directed graph showing node connections

Graph View (Light Mode)

Graph View Light Clean light theme for daytime productivity

Tree View (Light Mode)

Tree View Light Structured view with intelligent auto-layout

AI Chat Panel

AI Chat Panel AI Chat Panel AI Chat Panel

Context-aware AI assistance for each node with task breakdown and smart suggestions

Create Node Modal

Create Node Modal Quick node creation with smart placement and status tracking

Keyboard Shortcuts

Keyboard Shortcuts Power user features for efficient navigation and workflow

πŸŽ₯ Demo Video

lv_0_20260104152635_1.mp4

Watch DevBrain in action - see how to create nodes, switch between views, and use AI chat assistance


πŸ’Ž Key Benefits

Benefit Description
πŸš€ Faster Planning Break down projects 3x faster with AI-assisted task decomposition
🧩 Better Organization Visual hierarchy shows dependencies and relationships clearly
πŸ’‘ Smarter Decisions AI provides context-aware suggestions based on uploaded knowledge
πŸ“Š Track Progress Real-time status tracking (Not Started β†’ In Progress β†’ Completed)
πŸ”„ Never Lose Data SQLite persistence ensures everything is saved automatically
🎨 Beautiful UX Glassmorphic design with smooth animations makes planning enjoyable

✨ Features

πŸ—ΊοΈ Dual Visualization Modes

Tree View - Hierarchical Layout
  • Dagre-based automatic positioning
  • Clear parent-child relationships
  • Zoom and pan controls
  • Perfect for structured planning
Project Root
β”œβ”€β”€ Frontend Development
β”‚   β”œβ”€β”€ UI Design
β”‚   β”œβ”€β”€ Component Library
β”‚   └── Integration Tests
β”œβ”€β”€ Backend Development
β”‚   β”œβ”€β”€ API Design
β”‚   β”œβ”€β”€ Database Schema
β”‚   └── Authentication
└── DevOps
    β”œβ”€β”€ CI/CD Pipeline
    └── Monitoring Setup
Graph View - Force-Directed Network
  • Physics-based interactive layout
  • Drag nodes to rearrange
  • Obsidian-style knowledge graph
  • Perfect for exploring connections

πŸ€– AI-Powered Chat (Gemini Integration)

  • Node-Specific Context: Chat about individual tasks/ideas
  • Knowledge Grounding: Upload PDFs, DOCX, TXT, MD files for AI reference
  • Persistent History: All conversations saved per node
  • Smart Suggestions: Get breakdowns, risk analysis, implementation steps

Example Interactions:

You: "Break this down into tasks"
AI: "Here's a task breakdown for 'Frontend Development':
     1. Set up React project with Vite
     2. Install UI libraries (React Flow, Framer Motion)
     3. Create component structure
     4. Implement state management with Zustand
     5. Build ChatPanel and NodeCard components..."

You: "What are the risks?"
AI: "Key risks for this node:
     ⚠️ Scope creep if features aren't prioritized
     ⚠️ React Flow learning curve may slow development
     ⚠️ State management complexity as app grows..."

πŸ“ Knowledge Base System

Upload your research, documentation, and notes:

  • πŸ“„ PDF - Research papers, design docs(upcoming)
  • πŸ“ DOCX - Word documents, specifications(upcoming)
  • πŸ“‹ TXT/MD - Plain text notes, markdown files

The AI automatically searches and references uploaded knowledge when answering questions.


🎯 Status Tracking & Progress

Visual indicators for every node:

  • πŸ”΄ Not Started - Gray, default state
  • 🟑 In Progress - Amber, animated edges
  • 🟒 Completed - Green, success state

Track progress across your entire project hierarchy at a glance.


⚑ Smart Features

Feature Shortcut Description
Command Palette Cmd/Ctrl + K Quick navigation, fuzzy search, create nodes
Auto-Save - Every change persists to database instantly
Connection Status - Real-time backend connection monitoring
Cascade Delete - Deleting parent removes all children
Quick Prompts - Pre-built AI questions for common tasks

🎨 UI/UX Excellence

  • Glassmorphism Design - iOS-inspired blur effects and transparency
  • Smooth Animations - Framer Motion for silky transitions
  • Dark Theme - Easy on the eyes for long coding sessions
  • Responsive Layout - Adapts to different screen sizes
  • Keyboard Shortcuts - Power user optimizations

πŸ› οΈ Tech Stack

Frontend

React 19.2          // UI Framework
Zustand             // State Management
React Flow          // Tree View & Node Editor
React Force Graph   // Graph Visualization
Framer Motion       // Animations
Dagre               // Layout Algorithm
Lucide React        // Icon Library
Vite                // Build Tool

Backend

Django 4.2          # Web Framework
Django REST         # API Framework
SQLite              # Database (easily upgradable to PostgreSQL)
Google Gemini API   # AI Integration
PyPDF2              # PDF Processing
python-docx         # DOCX Processing

Infrastructure

  • CORS Enabled - Seamless frontend-backend communication
  • RESTful API - Standard HTTP/JSON endpoints
  • ORM Models - Type-safe database queries
  • Auto Migrations - Database schema versioning

πŸ—οΈ Architecture

System Overview

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚                      USER BROWSER                                β”‚
β”‚                  http://localhost:5173                           β”‚
β”‚                                                                   β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”‚
β”‚  β”‚              React Frontend (Vite)                      β”‚    β”‚
β”‚  β”‚                                                          β”‚    β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”        β”‚    β”‚
β”‚  β”‚  β”‚ Navbar   β”‚  β”‚ TreeView  β”‚  β”‚ GraphView    β”‚        β”‚    β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜        β”‚    β”‚
β”‚  β”‚                                                          β”‚    β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”          β”‚    β”‚
β”‚  β”‚  β”‚  ChatPanel (AI Integration)              β”‚          β”‚    β”‚
β”‚  β”‚  β”‚  πŸ’¬ Context-aware conversations          β”‚          β”‚    β”‚
β”‚  β”‚  β”‚  πŸ“š Knowledge base grounding             β”‚          β”‚    β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜          β”‚    β”‚
β”‚  β”‚                                                          β”‚    β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”          β”‚    β”‚
β”‚  β”‚  β”‚  Zustand Store (Global State)            β”‚          β”‚    β”‚
β”‚  β”‚  β”‚  - nodes, edges, chatHistory             β”‚          β”‚    β”‚
β”‚  β”‚  β”‚  - currentView, selectedNodeId           β”‚          β”‚    β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜          β”‚    β”‚
β”‚  β”‚                      ↕ HTTP/JSON                        β”‚    β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”          β”‚    β”‚
β”‚  β”‚  β”‚  API Service (services/api.js)           β”‚          β”‚    β”‚
β”‚  β”‚  β”‚  - createNode(), chatWithAI()            β”‚          β”‚    β”‚
β”‚  β”‚  β”‚  - uploadKnowledge(), loadProject()      β”‚          β”‚    β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜          β”‚    β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                           ↕ CORS Enabled
                    http://localhost:8000/api
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚                    Django Backend Server                         β”‚
β”‚                                                                   β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”‚
β”‚  β”‚              URL Router (config/urls.py)               β”‚    β”‚
β”‚  β”‚  /api/projects/         β†’ ProjectViewSet              β”‚    β”‚
β”‚  β”‚  /api/nodes/            β†’ NodeViewSet                  β”‚    β”‚
β”‚  β”‚  /api/edges/            β†’ EdgeViewSet                  β”‚    β”‚
β”‚  β”‚  /api/knowledge/        β†’ KnowledgeBaseViewSet        β”‚    β”‚
β”‚  β”‚  /api/chat/node/{id}/   β†’ ChatNodeView                β”‚    β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β”‚
β”‚                           ↕                                      β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”‚
β”‚  β”‚         Business Logic (api/services.py)               β”‚    β”‚
β”‚  β”‚                                                          β”‚    β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”       β”‚    β”‚
β”‚  β”‚  β”‚ GeminiAIService  β”‚  β”‚ KnowledgeSearchServiceβ”‚       β”‚    β”‚
β”‚  β”‚  β”‚ - Build context  β”‚  β”‚ - Keyword matching    β”‚       β”‚    β”‚
β”‚  β”‚  β”‚ - Call API       β”‚  β”‚ - Score results       β”‚       β”‚    β”‚
β”‚  β”‚  β”‚ - Save messages  β”‚  β”‚ - Return top K        β”‚       β”‚    β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜       β”‚    β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β”‚
β”‚                           ↕                                      β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”‚
β”‚  β”‚         Django ORM Models (api/models.py)              β”‚    β”‚
β”‚  β”‚                                                          β”‚    β”‚
β”‚  β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”‚    β”‚
β”‚  β”‚  β”‚ Project β”‚  β”‚ Node β”‚  β”‚ Edge β”‚  β”‚ KnowledgeBase β”‚  β”‚    β”‚
β”‚  β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜  β”‚    β”‚
β”‚  β”‚       β”‚            β”‚         β”‚             β”‚            β”‚    β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β”‚
β”‚           β”‚            β”‚         β”‚             β”‚                β”‚
β”‚           β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜                β”‚
β”‚                         ↕                                        β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”‚
β”‚  β”‚              SQLite Database                            β”‚    β”‚
β”‚  β”‚  db.sqlite3 (easily upgradable to PostgreSQL)         β”‚    β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                           ↕
                  Google Gemini API
                  (AI Responses)

Data Model (Entity Relationship)

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚      Project         β”‚
β”‚ ─────────────────── β”‚
β”‚ + id: UUID           β”‚
β”‚ + name: String       β”‚
β”‚ + description: Text  β”‚
β”‚ + owner: ForeignKey  β”‚
β”‚ + created_at         β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
          β”‚ 1
          β”‚
          β”‚ has many
          ↓ *
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”        β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚       Node           β”‚ *    * β”‚       Edge           β”‚
β”‚ ─────────────────── │←──────→│ ─────────────────── β”‚
β”‚ + id: UUID           β”‚        β”‚ + id: UUID           β”‚
β”‚ + label: String      β”‚        β”‚ + source: FK(Node)   β”‚
β”‚ + description: Text  β”‚        β”‚ + target: FK(Node)   β”‚
β”‚ + status: Choice     β”‚        β”‚ + project: FK        β”‚
β”‚ + parent: FK(self)   β”‚        β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
β”‚ + position_x: Float  β”‚
β”‚ + position_y: Float  β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
          β”‚ 1
          β”‚
          β”‚ has many
          ↓ *
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚    ChatMessage       β”‚
β”‚ ─────────────────── β”‚
β”‚ + id: UUID           β”‚
β”‚ + node: FK(Node)     β”‚
β”‚ + role: Choice       β”‚      (user/assistant)
β”‚ + content: Text      β”‚
β”‚ + metadata: JSON     β”‚      (knowledge sources)
β”‚ + timestamp          β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚   KnowledgeBase      β”‚
β”‚ ─────────────────── β”‚
β”‚ + id: UUID           β”‚
β”‚ + project: FK        β”‚
β”‚ + title: String      β”‚
β”‚ + file_type: Choice  β”‚      (pdf/docx/txt/md)
β”‚ + content_preview    β”‚
β”‚ + full_text: Text    β”‚
β”‚ + uploaded_at        β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

API Flow Diagram

Frontend Action β†’ API Call β†’ Backend Processing β†’ Database β†’ Response
──────────────────────────────────────────────────────────────────────

πŸ“Œ CREATE NODE:
   User clicks "New Node" 
   β†’ POST /api/nodes/
   β†’ NodeViewSet.create()
   β†’ Save to DB
   β†’ Return node JSON
   β†’ Update Zustand store
   β†’ UI rerenders

πŸ’¬ CHAT WITH AI:
   User sends message
   β†’ POST /api/chat/node/{id}/
   β†’ GeminiAIService.generate_response()
   β†’ KnowledgeSearchService.search_relevant_knowledge()
   β†’ Build context prompt
   β†’ Call Gemini API
   β†’ Save message to DB
   β†’ Return AI response
   β†’ Update chat history
   β†’ UI displays message

πŸ“‚ UPLOAD KNOWLEDGE:
   User uploads PDF
   β†’ POST /api/knowledge/
   β†’ KnowledgeBaseViewSet.create()
   β†’ Extract text (PyPDF2)
   β†’ Save to DB with full_text
   β†’ Return knowledge base entry
   β†’ Available for AI context

πŸš€ Installation

Prerequisites

  • Node.js 18+ and npm
  • Python 3.9+
  • Git

1️⃣ Clone the Repository

git clone https://github.com/shams909/devbrain-the-architect.git
cd devbrain-the-architect

2️⃣ Backend Setup

cd backend/backend

# Create virtual environment
python -m venv venv

# Activate virtual environment
# Windows:
venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Run migrations
python manage.py makemigrations
python manage.py migrate

# Create superuser (optional, for admin panel)
python manage.py createsuperuser

# Start Django server
python manage.py runserver

Backend runs at: http://localhost:8000

3️⃣ Frontend Setup

# Open new terminal
cd frontend

# Install dependencies
npm install

# Start Vite dev server
npm run dev

Frontend runs at: http://localhost:5173

4️⃣ Configure Gemini API (Optional)

Get your API key from Google AI Studio

Edit backend/backend/config/settings.py:

GEMINI_API_KEY = "your-api-key-here"  # Replace with your actual key
GEMINI_MODEL = "gemini-pro"

Note: Without API key, the system uses intelligent fallback responses.


πŸ“š Usage Guide

Creating Your First Mind Map

  1. Start Both Servers

    • Backend: python manage.py runserver
    • Frontend: npm run dev
  2. Open the App

    • Navigate to http://localhost:5173
    • App auto-creates a project on first load
  3. Create a Root Node

    • Click "New Node" button
    • Fill in details:
      • Label: "My Project"
      • Description: "Main project overview"
      • Status: Not Started
      • Parent: None (this makes it a root node)
    • Click "Create"
  4. Add Child Nodes

    • Click "New Node" again
    • Fill in details:
      • Label: "Frontend Development"
      • Parent: Select "My Project"
    • Repeat for more children
  5. Chat with AI

    • Click on any node
    • Chat panel opens on right
    • Try: "Break this down into tasks"
    • AI responds with context-aware suggestions
  6. Upload Knowledge

    • Upload PDFs, docs, notes
    • AI will reference them in responses
    • Shows "πŸ“š Using knowledge: [filename]" in chat
  7. Switch Views

    • Click Tree/Graph toggle in navbar
    • Or press Cmd/Ctrl + K β†’ "Switch to Graph View"
  8. Track Progress

    • Edit nodes to update status
    • Watch visual indicators change
    • See progress across entire hierarchy

Keyboard Shortcuts

Shortcut Action
Cmd/Ctrl + K Open command palette
Escape Close modals/panels
Enter Send chat message
Click node Open chat panel

πŸ”Œ API Documentation

Base URL

http://localhost:8000/api

Endpoints

Projects

GET    /api/projects/          # List all projects
POST   /api/projects/          # Create project
GET    /api/projects/{id}/     # Get project details
PATCH  /api/projects/{id}/     # Update project
DELETE /api/projects/{id}/     # Delete project

Example Request:

POST /api/projects/
{
  "name": "My Hackathon Project",
  "description": "AI-powered task manager"
}

Nodes

GET    /api/nodes/                # List all nodes
POST   /api/nodes/                # Create node
GET    /api/nodes/{id}/           # Get node details
PATCH  /api/nodes/{id}/           # Update node
DELETE /api/nodes/{id}/           # Delete node (cascade)
GET    /api/nodes/?project={id}   # Filter by project

Example Request:

POST /api/nodes/
{
  "project": "project-uuid",
  "label": "Build API",
  "description": "RESTful API with Django",
  "status": "in-progress",
  "parent": "parent-node-uuid",
  "position_x": 100,
  "position_y": 200
}

Chat

POST /api/chat/node/{id}/   # Send message to AI

Example Request:

POST /api/chat/node/node-uuid/
{
  "message": "Break this down into tasks",
  "use_knowledge": true
}

Example Response:

{
  "response": "Here's a task breakdown:\n1. Set up Django\n2. Create models...",
  "metadata": {
    "knowledge_sources": ["project-plan.pdf", "api-spec.md"],
    "model": "gemini-pro"
  }
}

Knowledge Base

GET    /api/knowledge/              # List all knowledge
POST   /api/knowledge/              # Upload file
DELETE /api/knowledge/{id}/         # Delete knowledge
GET    /api/knowledge/?project={id} # Filter by project

Example Request (multipart/form-data):

POST /api/knowledge/
Content-Type: multipart/form-data

project: project-uuid
file: [binary file data]

🎯 Real-World Use Cases

1. Hackathon Planning

πŸ† Hackathon Project
β”œβ”€β”€ πŸ‘₯ Team Formation (Completed)
β”œβ”€β”€ πŸ’‘ Idea Brainstorming (In Progress)
β”‚   β”œβ”€β”€ Problem Research
β”‚   └── Solution Design
β”œβ”€β”€ πŸ’» Development (Not Started)
β”‚   β”œβ”€β”€ Frontend (React + Vite)
β”‚   β”œβ”€β”€ Backend (Django API)
β”‚   └── Integration Testing
β”œβ”€β”€ 🎨 Design & UX
└── πŸ“Š Presentation Prep

AI Chat Example:

You: "What should I prioritize for a 48-hour hackathon?"
AI: "Focus on these priorities: 1) MVP features only (80% of effort), 2) Working demo over perfection, 3) Presentation story (20% of time). Skip: complex auth, scalability optimizations."


2. Software Project Breakdown

πŸ“± Mobile App Development
β”œβ”€β”€ 🎨 UI/UX Design
β”‚   β”œβ”€β”€ Wireframes
β”‚   β”œβ”€β”€ Mockups
β”‚   └── User Flow
β”œβ”€β”€ βš™οΈ Backend Development
β”‚   β”œβ”€β”€ Database Schema
β”‚   β”œβ”€β”€ REST API
β”‚   └── Authentication
β”œβ”€β”€ πŸ“± Mobile App (upcoming)
β”‚   β”œβ”€β”€ Login Screen
β”‚   β”œβ”€β”€ Home Feed
β”‚   └── Profile Page
└── πŸš€ Deployment
    β”œβ”€β”€ CI/CD Pipeline
    └── App Store Submission

3. Research Project Organization

πŸ“š Research Paper: AI Ethics
β”œβ”€β”€ πŸ“– Literature Review (In Progress)
β”‚   β”œβ”€β”€ Data Privacy Papers
β”‚   β”œβ”€β”€ Bias in AI Studies
β”‚   └── Regulation Frameworks
β”œβ”€β”€ πŸ”¬ Methodology
β”‚   β”œβ”€β”€ Survey Design
β”‚   └── Interview Protocol
β”œβ”€β”€ πŸ“Š Data Analysis
└── ✍️ Writing
    β”œβ”€β”€ Introduction
    β”œβ”€β”€ Results Section
    └── Conclusion

Knowledge Base:

  • Upload 20+ research papers (PDFs)
  • AI references them when discussing literature review
  • Get citation suggestions: "What papers support this claim?"

🌟 Why Choose DevBrain?

vs. Traditional Mind Maps (XMind, MindMeister)

βœ… AI Integration - Get smart suggestions, not just visual organization
βœ… Code-Friendly - Built for developers, with keyboard shortcuts and dark theme
βœ… Knowledge Base - Upload context files for grounded AI responses

vs. Project Management Tools (Jira, Trello)

βœ… Visual Thinking - See the big picture with graph/tree views
βœ… Faster Setup - No complex workflows, just ideas β†’ hierarchy β†’ tasks
βœ… AI Assistance - Break down epics/stories automatically

vs. Generic AI Chatbots (ChatGPT)

βœ… Project Context - AI knows your entire project structure
βœ… Node-Specific - Conversations tied to individual tasks/ideas
βœ… Persistent History - All chats saved and searchable


πŸ›£οΈ Roadmap

🚧 In Progress

  • Collaborative editing (multiple users)
  • Export to Markdown/JSON
  • Custom themes and color schemes

πŸ’‘ Planned Features

  • Real-time sync with WebSockets
  • Mobile app (React Native)
  • Integration with GitHub/Jira
  • Voice input for chat
  • Gantt chart view
  • Time tracking per node
  • AI-generated diagrams from nodes
  • Support PDF, research papers and different types of files

🀝 Contributing

We welcome contributions! Here's how you can help:

Ways to Contribute

  1. πŸ› Report Bugs

    • Open an issue with reproduction steps
    • Include screenshots if applicable
  2. πŸ’‘ Suggest Features

    • Describe the use case
    • Explain how it improves the workflow
  3. πŸ“ Improve Documentation

    • Fix typos, clarify instructions
    • Add examples or tutorials
  4. πŸ’» Submit Code

    • Fork the repo
    • Create a feature branch
    • Submit a pull request

Development Setup

# Fork and clone your fork
git clone https://github.com/YOUR-USERNAME/devbrain-the-architect.git
cd devbrain-the-architect

# Create feature branch
git checkout -b feature/amazing-feature

# Make changes and commit
git commit -m "Add amazing feature"

# Push to your fork
git push origin feature/amazing-feature

# Open Pull Request on GitHub

Code Style

  • Frontend: Use ESLint config (already set up)
  • Backend: Follow PEP 8 (Python style guide)
  • Commits: Use conventional commits (feat:, fix:, docs:)

πŸ“„ License

This project is licensed under the MIT License.

MIT License

Copyright (c) 2026 DevBrain Team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

πŸ™ Acknowledgments

  • React Flow - Powerful node-based UI library
  • Google Gemini - AI model for contextual responses
  • Django - Robust Python web framework
  • Framer Motion - Beautiful animations library
  • Zustand - Simple state management

πŸ“ž Support & Contact


🎨 Screenshots

Tree View - Hierarchical Mind Map

Visual hierarchy with parent-child connections, status indicators,
and smooth zoom/pan controls

Graph View - Force-Directed Network

Interactive network graph with physics simulation,
drag-and-drop nodes, and relationship visualization

AI Chat Panel

Context-aware conversations with knowledge base integration,
quick prompts, and persistent chat history

Command Palette

Quick navigation and fuzzy search for power users,
keyboard-first workflow

Thanks to my team members time and effort. I appreciate you all guys.πŸ–€

Star ⭐ this repo if you find it helpful!

⬆ Back to Top

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •