Repotopia

Visualize and chat with your Bitbucket codebase

Comment

Repotopia: Making Codebases Accessible to Everyone

Inspiration

Modern software development faces a significant challenge: codebases are becoming increasingly complex and difficult to navigate. When our team joined a new project recently, we spent weeks just trying to understand the codebase structure. We realized this isn't just a developer problem - stakeholders across organizations struggle to understand and discuss codebases effectively. Our solution? Combine powerful visualization with an intelligent AI chatbot that can explain code in anyone's language. This inspired us to create Repotopia, a tool that transforms how teams interact with and understand their code repositories through visual navigation and AI-powered conversations.

What it does

Repotopia is a Bitbucket Forge app that revolutionizes code understanding in two ways: through interactive visualization and intelligent AI conversations. At its core, it visualizes repository codebases as interactive, clickable trees where each node represents either a file or directory. But what makes it truly powerful is its built-in AI chatbot that can explain any file in language that matches your role and expertise level. Users can:

  • Navigate through the codebase visually without needing to clone repositories
  • Click on directories to expand and explore their contents
  • Chat with an AI assistant about any file, getting explanations that match their technical expertise
  • Select different roles (developer, CEO, CFO, etc.) to get role-appropriate insights and explanations
  • Understand complex codebases quickly through dynamic visualization and AI-powered conversations

How we built it

We leveraged several key technologies to bring Repotopia to life:

  • Atlassian Forge as our serverless app development platform
  • ReactFlow for creating interactive, dynamic visualizations
  • OpenAI's API for generating role-specific insights and explanations
  • React and TypeScript for the frontend interface
  • Bitbucket API for accessing repository data

The app follows a modular architecture where:

  1. The visualization engine processes repository structure into an interactive graph
  2. The AI engine handles role-based content generation
  3. The UI layer provides an intuitive interface for interaction

Challenges we ran into

  1. Performance Optimization: Rendering large codebases as interactive graphs while maintaining smooth performance required significant optimization
  2. Context Management: Ensuring AI responses maintain appropriate context and technical depth for different roles was complex
  3. API Rate Limiting: Balancing OpenAI API calls with user interaction patterns while maintaining cost efficiency
  4. Graph Layout: Creating an intuitive, readable layout for complex repository structures that could scale from small to large codebases
  5. Real-time Updates: Handling repository updates and reflecting them in the visualization without requiring page refreshes

Accomplishments that we're proud of

  • Created an intuitive visualization system that makes codebases accessible to both technical and non-technical users
  • Successfully implemented role-based AI responses that maintain appropriate technical depth
  • Built a smooth, responsive interface that handles large repositories effectively
  • Developed a solution that requires zero setup from users - everything works directly in Bitbucket
  • Created a tool that bridges the communication gap between different stakeholders in software development

What we learned

  • Deep insights into Forge's capabilities and limitations
  • Techniques for optimizing large-scale interactive visualizations
  • Strategies for making AI responses more context-aware and role-appropriate
  • The complexity of making technical content accessible to different audiences

What's next for Repotopia

  1. Enhanced AI Capabilities

    • Add more specialized roles and perspectives
    • Implement comparative analysis between different versions
    • Add support for architecture pattern recognition

  2. Visualization Improvements

    • Add custom visualization layouts
    • Implement search and filtering capabilities
    • Add support for custom tagging and annotations

  3. Collaboration Features

    • Add shared bookmarks for important files/structures
    • Implement team-specific views and annotations
    • Add integration with project documentation

  4. Integration Expansions

    • Extend support to other version control platforms
    • Add integration with project management tools
    • Implement CI/CD pipeline visualization

Our ultimate goal is to make Repotopia the go-to tool for understanding and communicating about codebases across all levels of an organization.

Built With

Share this project:

Updates