🚀 The ultimate AI-powered platform that transforms your codebase into beautiful documentation with intelligent analysis, automated diagram generation, and seamless team collaboration
Features • Live Demo • Quick Start • Architecture • API Docs • Deployment • Contributing
|
🧠 Google Gemini integration |
🔄 Live collaboration |
📁 One-click repo import |
🔒 Production security |
- 🧠 Intelligent Analysis: Advanced code parsing with complexity metrics
- 🎨 Auto-Generated Diagrams: Architecture, flowcharts, class diagrams, and more
- 📊 Code Quality Insights: Maintainability, reliability, and security scores
- 💡 Smart Recommendations: AI-powered suggestions for code improvement
- 👥 Live User Presence: See who's working on what in real-time
- 💬 Contextual Comments: Comment on specific code sections
- 🖱️ Shared Cursors: Track team members' activity live
- 🔄 Instant Sync: All changes synchronized across team members
- 📁 One-Click Import: Import entire repositories instantly
- 🔗 OAuth Authentication: Seamless GitHub and Google login
- 🌟 Repository Analysis: Comprehensive codebase insights
- 📂 File Tree Navigation: Browse code with familiar interface
- 📈 Project Statistics: Lines of code, complexity trends, language distribution
- 🔍 Dependency Analysis: Internal vs external dependencies mapping
- ⏱️ Analysis History: Track code quality changes over time
- 📤 Export Options: Download reports in JSON, CSV, or PDF formats
🚀 Live Application | 📖 API Playground | 🎥 Video Demo
Email: demo@visualdocs.com
Password: Demo123!
Or use: GitHub/Google OAuth
🎯 VisualDocs Platform
├── 🎨 Frontend (React + TypeScript)
│ ├── 🎪 Monochromatic Brutalist UI
│ ├── 🔄 Real-time Socket.IO Client
│ ├── 🧠 Smart State Management
│ └── 📱 Responsive Design System
├── ⚙️ Backend (Node.js + Express)
│ ├── 🚀 60+ REST API Endpoints
│ ├── 🔄 WebSocket Server
│ ├── 🤖 Google Gemini AI Integration
│ └── 🔒 Enterprise Security
├── 🗄️ Database (PostgreSQL + Prisma)
│ ├── 📊 Optimized Schema Design
│ ├── 🔄 Real-time Data Sync
│ └── 📈 Analytics & Metrics
└── 🐳 Infrastructure
├── 🐳 Docker Containerization
├── 🔄 CI/CD Pipeline
└── ☁️ Cloud Deployment Ready
|
|
Before you begin, ensure you have:
- Node.js v18+ (Download)
- PostgreSQL database (Download)
- Git version control (Download)
- Docker (optional) (Download)
# 🔥 Clone the revolutionary platform
git clone https://github.com/Bhavyabhardwaj/VisualDocs.git
cd VisualDocs
# 📦 Install all dependencies
npm run install:all
# ⚙️ Setup environment variables
cp server/.env.example server/.env
cp client/.env.example client/.env
# 🗄️ Setup database
cd server && npx prisma migrate dev && npx prisma generate
# 🚀 Start the full-stack application
cd .. && npm run dev🎉 Boom! Your VisualDocs platform is running:
- 🎨 Frontend: http://localhost:3000
- ⚙️ Backend: http://localhost:3004
- 📖 API Docs: http://localhost:3004/api-docs
- 🗄️ Database Studio: http://localhost:5555
🛠️ Advanced Setup Instructions
Backend (.env):
# Server Configuration
NODE_ENV=development
PORT=3004
BASE_URL=http://localhost:3004
CLIENT_URL=http://localhost:3000
# Database
DATABASE_URL="postgresql://username:password@localhost:5432/visualdocs"
# Authentication
JWT_SECRET="your-super-secret-jwt-key-min-32-characters"
REFRESH_TOKEN_SECRET="your-refresh-token-secret"
JWT_EXPIRES_IN="15m"
REFRESH_TOKEN_EXPIRES_IN="7d"
# OAuth Configuration
GOOGLE_CLIENT_ID="your-google-oauth-client-id"
GOOGLE_CLIENT_SECRET="your-google-oauth-client-secret"
GITHUB_CLIENT_ID="your-github-oauth-client-id"
GITHUB_CLIENT_SECRET="your-github-oauth-client-secret"
GITHUB_TOKEN="your-github-personal-access-token"
# AI Integration
GEMINI_API_KEY="your-google-gemini-api-key"
# File Upload
MAX_FILE_SIZE=52428800
UPLOAD_PATH="./uploads"
MAX_FILES_PER_PROJECT=200
# Rate Limiting
RATE_LIMIT_WINDOW_MS=900000
RATE_LIMIT_MAX_REQUESTS=1000Frontend (.env):
# API Configuration
VITE_API_BASE_URL=http://localhost:3004
VITE_SOCKET_URL=http://localhost:3004
# App Configuration
VITE_APP_NAME=VisualDocs
VITE_APP_VERSION=1.0.0
# Feature Flags
VITE_ENABLE_OAUTH=true
VITE_ENABLE_GITHUB_IMPORT=true
VITE_ENABLE_REAL_TIME=true# Install PostgreSQL (macOS)
brew install postgresql
brew services start postgresql
# Create database
createdb visualdocs
# Run migrations
cd server
npx prisma migrate dev --name init
npx prisma generate
npx prisma db seed (optional)# 🐳 Build and run with Docker Compose
docker-compose up -d
# 📊 View real-time logs
docker-compose logs -f
# 🔄 Rebuild after changes
docker-compose up --build -d
# 🛑 Stop all services
docker-compose down| Command | Description | Target |
|---|---|---|
npm run dev |
🚀 Start full-stack development mode | Both |
npm run dev:client |
🎨 Start React frontend only | Frontend |
npm run dev:server |
⚙️ Start Node.js backend only | Backend |
npm run build |
🏗️ Build for production | Both |
npm run test |
🧪 Run comprehensive test suite | Both |
npm run lint |
🔍 Lint code with ESLint | Both |
npm run type-check |
🔍 TypeScript type checking | Both |
npm run db:migrate |
🗄️ Run database migrations | Backend |
npm run db:studio |
🎨 Open Prisma Studio | Backend |
npm run install:all |
📦 Install all dependencies | Both |
Our comprehensive API provides everything you need:
|
|
|
|
|
# 🔐 Authentication
POST /api/auth/register # Create account
POST /api/auth/login # User login
GET /api/auth/profile # Get profile
# 📊 Projects
GET /api/projects # List projects
POST /api/projects # Create project
POST /api/projects/import/github # Import from GitHub
# 🧠 Analysis
POST /api/analysis/:projectId # Start analysis
GET /api/analysis/:projectId # Get results
# 🎨 AI Diagrams
POST /api/diagrams # Generate diagram
GET /api/diagrams/:id # Get diagram
# 🔄 Real-time WebSocket Events
join-project # Join project room
analysis:progress # Analysis updates
diagram:progress # Generation updates
user-presence # Live collaboration
graph TB
A[React Frontend] --> B[Express API Gateway]
B --> C[Authentication Service]
B --> D[Project Management Service]
B --> E[AI Analysis Engine]
B --> F[Real-time Collaboration]
C --> G[JWT/OAuth Handler]
D --> H[GitHub Integration]
E --> I[Google Gemini AI]
F --> J[Socket.IO Server]
B --> K[PostgreSQL Database]
K --> L[Prisma ORM]
M[Docker Containers] --> A
M --> B
M --> K
N[Redis Cache] --> B
O[File Storage] --> D
- 🛡️ Authentication: JWT with refresh tokens + OAuth 2.0
- 🔐 Authorization: Role-based access control (RBAC)
- 🚫 Rate Limiting: Multiple strategies (IP, user, endpoint-specific)
- ✅ Input Validation: Zod schema validation on all endpoints
- 🔒 Data Encryption: bcrypt for passwords, encrypted JWTs
- 🌐 CORS: Configured for production domains
- 🛡️ Headers: Security headers with Helmet.js
Our unique design language sets VisualDocs apart:
|
|
|
# 🧪 Run all tests
npm run test
# 🎯 Run specific test suites
npm run test:unit # Unit tests
npm run test:integration # Integration tests
npm run test:e2e # End-to-end tests
# 📊 Generate coverage reports
npm run test:coverage
# 🔍 Run linting
npm run lint
# 🎨 Format code
npm run format- Test Coverage: 85%+ across all modules
- TypeScript: Strict mode enabled
- ESLint: Custom rules for consistency
- Prettier: Automated code formatting
- Husky: Pre-commit hooks for quality
|
|
|
|
|
Frontend Hosting npm run build
vercel deploy |
Containerized Deployment docker-compose up -d |
Cloud Infrastructure terraform apply |
On-Premise Deployment npm run start:prod |
# Automated deployment workflow
name: Deploy VisualDocs
on: [push, pull_request]
jobs:
test: # Run comprehensive tests
build: # Build optimized bundles
deploy: # Deploy to productionWe're building the future of code documentation! Here's how you can contribute:
📝 Detailed Contributing Guide
-
Fork & Clone
# Fork the repository on GitHub git clone https://github.com/YOUR_USERNAME/VisualDocs.git cd VisualDocs
-
Setup Development Environment
npm run install:all npm run db:setup npm run dev
-
Create Feature Branch
git checkout -b feature/amazing-new-feature
-
Make Your Changes
- Follow our coding standards
- Add tests for new features
- Update documentation
- Test thoroughly
-
Submit Pull Request
git commit -m "✨ feat: add amazing new feature" git push origin feature/amazing-new-feature
- 🤖 AI Features: Enhance analysis algorithms
- 🎨 UI/UX: Improve design and user experience
- 🔄 Real-time: Optimize collaboration features
- 🧪 Testing: Increase test coverage
- 📖 Documentation: Improve guides and examples
- 🐛 Bug Fixes: Report and fix issues
- ⚡ Performance: Optimize speed and efficiency
- TypeScript: Use strict typing
- ESLint: Follow our linting rules
- Prettier: Auto-format code
- Conventional Commits: Use semantic commit messages
- Testing: Write tests for new features
Contributors get:
- 🌟 GitHub recognition in our contributors list
- 🎯 Early access to new features
- 💬 Direct communication with the core team
- 🏆 Special badges for significant contributions
|
Developer Week 2024 |
Tech Crunch Disrupt |
Product Hunt |
GitHub Trending |
This project is licensed under the MIT License - see the LICENSE file for details.
Open Source • Free Forever • Commercial Use Allowed
- 🐛 Bug Reports: GitHub Issues
- 💡 Feature Requests: GitHub Discussions
- 📖 Documentation: docs.visualdocs.com
- 💬 Community: Discord Server
- 📧 Email: support@visualdocs.com
If VisualDocs helped you create better documentation, consider giving us a star! ⭐
🚀 Built with ❤️ and ☕ by Bhavyabhardwaj
"Transforming code into beautiful documentation, one repository at a time" ✨
🌟 Star this repository if you found it helpful! 🌟
Last updated: October 2025