Octiq

• 

  Landing Page

• 

  Files in repo with Tree view

• 

  File Viewer it supports all file types

• 

  CLI view of all files in Repo this can be copied for reference

• 

  The main GOAT Graph view of all files , we can relocate the graph as we want and it will help us better understand the repo files directory

• 

  Story of commit history by owner and collaborators.

• 

  Analytics of commit activity

• 

  File type distribution and weekly commit history

• 

  Repo hotspots and commits per contributor

• 

  AI powered summary

• 

  Chat with repo

Inspiration

Modern GitHub repositories are powerful-but intimidating. For someone new to a codebase (or even experienced developers joining a new team), understanding what a project does, how it’s structured, and how it evolved often requires cloning the repo, jumping between files, and manually reading commit histories.

I wanted to answer a simple question:

“What if understanding a GitHub repository felt as easy as exploring a story?”

Octiq was inspired by the frustration of onboarding into large open-source projects and the belief that repository knowledge should be visual, interactive, and conversational, not buried inside thousands of files and commits.

---

What it does

Octiq is a web-based GitHub repository visualizer that helps users instantly understand the structure, history, and intent of any public repository.

It allows users to:

• Visualize repository structure via Tree View, CLI View, and Graph View
• Explore files without cloning the repository
• Understand project evolution through commit-by-commit Story Mode
• Analyze repository trends using automated analytics dashboards
• Interact with repositories using AI-powered chat and summaries
• Ask questions like “Where is authentication handled?” and jump directly to relevant files
• Understand code changes with AI explanations per commit

All of this works directly from a GitHub URL.

---

How we built it

Octiq is built using a modern, scalable web stack:

• Next.js (App Router) for frontend and backend (Route Handlers)
• TypeScript for type safety
• Tailwind CSS + shadcn/ui for clean and accessible UI
• GitHub REST API for repository data
• Serverless architecture on Vercel for automatic scaling
• AI integration for summaries, chat, and explanations
• IndexedDB for aggressive client-side caching

Architecture Overview

• The frontend fetches repository structure, history, and analytics via Next.js API routes.
• Backend Route Handlers communicate with GitHub and AI APIs.
• A token rotation strategy ensures GitHub and AI rate limits are handled gracefully.
• Repository data, summaries, chats, and analytics are cached locally using IndexedDB for near-instant reloads.

Large repositories are handled intelligently by summarizing only the root structure to avoid API failures.

---

Challenges we ran into

• GitHub API rate limits when analyzing large repositories → Solved using token rotation and client-side caching.

• Handling massive repositories efficiently → Implemented recursive tree fetching and adaptive AI summarization.

• Keeping Story Mode and Analytics performant → Centralized data fetching and reused processed commit history.

• Unpredictable AI responses → Added robust JSON parsing and fallback error handling.

• Caching large datasets safely in the browser → Switched from localStorage to IndexedDB for reliability and scale.

---

Accomplishments that we're proud of

• A fully serverless GitHub visualization platform
• Smooth exploration of even very large repositories
• A unique Story Mode that turns commit history into a narrative
• AI chat that returns actionable file suggestions, not just text
• Near-instant reloads due to client-side caching
• A clean, intuitive UI that doesn’t require GitHub expertise

---

What we learned

• Developer experience improves drastically when information is visualized
• AI is most useful when paired with structured context, not raw code dumps
• Client-side caching can outperform traditional backend scaling
• Designing for rate limits early saves major architectural rewrites later
• Good tooling can turn complex systems into approachable stories

---

What's next for Octiq

• Support for private repositories
• Deeper semantic code understanding (architecture diagrams, dependency flows)
• Exportable insights for onboarding and documentation
• Team collaboration features
• Smarter AI explanations with cross-file reasoning
• Optional self-hosted deployment for enterprises

---

Built With

• github
• indexeddb
• javascript
• longcat
• next.js
• react
• recharts
• shadcn
• tailwind
• typescript
• vercel