GitBuster

AI-Powered GitHub Repository Analyzer & Chat Assistant

Features • Demo • Getting Started • Tech Stack • Structure • Contributing

---

About

GitBuster is an intelligent GitHub repository analyzer that leverages AI to help developers understand codebases faster. Simply paste a GitHub repository URL, and GitBuster will analyze the entire codebase, providing interactive visualizations, dependency graphs, and an AI-powered chat interface to answer questions about the code.

Perfect for:

• Code Review: Quickly understand new repositories
• Learning: Explore open-source projects with AI guidance
• Onboarding: Help new team members navigate large codebases
• Development: Get instant answers about project structure and implementation

Features

Core Features

• AI Chat Assistant: Ask questions about any part of the codebase and get intelligent responses
• Repository Visualization: Interactive 3D visualization of repository structure using D3.js
• Dependency Graph: Visualize project dependencies and their relationships
• Folder Structure Explorer: Browse files and folders with search functionality
• Code Highlighting: Syntax-highlighted code blocks with copy-to-clipboard
• Quick Actions: Pre-built prompts for common analysis tasks

🎨 User Experience

• Dark/Light Mode: Seamless theme switching with next-themes
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Smooth Animations: Framer Motion powered transitions
• Loading States: Beautiful loading animations during analysis
• Error Handling: Graceful error messages and fallbacks

🔒 Additional Features

• Privacy First: Clear terms of service and privacy policy
• Health Check: Monitor backend service status
• FAQ Section: Comprehensive answers to common questions
• Cookie Policy: Transparent data usage information

Getting Started

Prerequisites

• Node.js 18.x or higher
• npm or yarn or pnpm
• Git

Installation

1. Clone the repository

   git clone https://github.com/ateendra24/gitbuster.git
   cd gitbuster

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Add your environment variables here
   NEXT_PUBLIC_API_URL=your_backend_api_url

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open your browser

   Navigate to http://localhost:3000

Build for Production

npm run build
npm run start

Tech Stack

Frontend Framework

• Next.js 15.3 - React framework with App Router
• React 19 - UI library
• TypeScript 5 - Type safety

Styling & UI

• Tailwind CSS 4 - Utility-first CSS
• shadcn/ui - Component library
• Radix UI - Headless UI primitives
• Framer Motion - Animation library
• Lucide React - Icon library

Data Visualization

• D3.js - Data visualization
• React Syntax Highlighter - Code highlighting

State & Data Fetching

• Axios - HTTP client
• React Use - React hooks library

Development Tools

• ESLint - Code linting
• TypeScript ESLint - TypeScript linting
• PostCSS - CSS processing

Project Structure

front/
├── src/
│   ├── app/                      # Next.js App Router pages
│   │   ├── (routes)/             # Route groups
│   │   │   ├── [username]/[repo]/ # Dynamic repo page
│   │   │   ├── about/            # About page
│   │   │   ├── faq/              # FAQ page
│   │   │   ├── health/           # Health check page
│   │   │   ├── privacy/          # Privacy policy
│   │   │   ├── terms/            # Terms of service
│   │   │   └── cookies/          # Cookie policy
│   │   ├── home/                 # Home page
│   │   ├── layout.tsx            # Root layout
│   │   ├── page.tsx              # Landing page
│   │   └── globals.css           # Global styles
│   │
│   ├── components/               # Reusable components
│   │   ├── ui/                   # shadcn/ui components
│   │   ├── magicui/              # Custom UI components
│   │   ├── layout/               # Layout components
│   │   │   ├── BaseNavbar.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── Navbar.tsx
│   │   │   └── RepoPageNavbar.tsx
│   │   ├── icons/                # Icon components
│   │   ├── pages/                # Page-specific components
│   │   └── Wrappers/             # Layout wrappers
│   │
│   ├── containers/               # Page containers
│   │   ├── aboutpage/            # About page sections
│   │   ├── homepage/             # Home page sections
│   │   ├── repopage/             # Repository page sections
│   │   ├── faq-page/             # FAQ sections
│   │   └── [policy-pages]/       # Policy page sections
│   │
│   ├── config/                   # Configuration files
│   │   └── siteConfig.js         # Site configuration
│   │
│   ├── lib/                      # Utility functions
│   │   └── utils.ts              # Helper utilities
│   │
│   ├── hooks/                    # Custom React hooks
│   │   └── use-mobile.ts         # Mobile detection hook
│   │
│   └── types/                    # TypeScript type definitions
│       └── repo.ts               # Repository types
│
├── public/                       # Static assets
├── pages/                        # API routes
│   └── api/
│       ├── chat.js               # Chat API endpoint
│       ├── health.js             # Health check endpoint
│       └── process-repo.js       # Repository processing endpoint
│
├── components.json               # shadcn/ui configuration
├── next.config.ts                # Next.js configuration
├── tailwind.config.ts            # Tailwind CSS configuration
├── tsconfig.json                 # TypeScript configuration
└── package.json                  # Dependencies

Architecture

Feature-Based Organization

The project follows a feature-based architecture where components are organized by their purpose:

• /app: Next.js 15 App Router with file-based routing
• /components: Shared, reusable UI components
• /containers: Page-level containers that compose components
• /features: Feature-specific logic and components (planned)
• /lib: Utility functions and helpers
• /hooks: Custom React hooks for shared logic
• /types: TypeScript type definitions

Key Design Patterns

• Component Composition: Small, focused components composed into larger features
• Separation of Concerns: UI, business logic, and data fetching separated
• Type Safety: Comprehensive TypeScript coverage
• Responsive Design: Mobile-first approach with Tailwind CSS
• Accessibility: ARIA labels and keyboard navigation support

Key Components

Repository Analysis

• RepoVisualizer: 3D visualization of repository structure
• DependencyGraph: Interactive dependency relationship graph
• FolderStructure: File browser with search functionality
• Details: Repository metadata and statistics

Chat Interface

• Chat: AI-powered chat interface
• CodeBlock: Syntax-highlighted code display
• QuickActions: Pre-built analysis prompts
• SummaryInterface: Repository summary display

Layout

• BaseNavbar: Main navigation with theme toggle
• RepoPageNavbar: Repository-specific navigation
• Footer: Site footer with links
• PageWrapper: Consistent page layout wrapper

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

Development Guidelines

• Follow the existing code style and structure
• Write meaningful commit messages
• Add TypeScript types for new code
• Test thoroughly before submitting
• Update documentation as needed

License

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

Author

Ateendra

• Twitter: @ateendra24
• GitHub: @ateendra24
• LinkedIn: ateendra24

Acknowledgments

• Next.js for the amazing framework
• Vercel for hosting and deployment
• shadcn/ui for beautiful components
• D3.js for powerful visualizations
• All open-source contributors

Contact & Support

• Feedback: Submit feedback
• Issues: GitHub Issues
• Discussions: GitHub Discussions

---

Made by Ateendra

Star this repo if you find it helpful