GIAst

"GIAst – Your AI sidekick for smarter, faster GitLab issue management."

Comment

🚀 GIAst – GitLab Issue Assistant

✨ Inspiration

Managing issues in software projects—especially those hosted on GitLab—can be overwhelming. Developers spend too much time reviewing issue descriptions, classifying them, and writing summaries. Inspired by this problem and recent advancements in AI (like Google's Gemini), we created GIAst, an AI-powered issue tracker assistant that helps automate issue understanding, classification, and triage for GitLab repositories.

💡 What it does

GIAst allows developers and project teams to:

  • 🔗 Connect GitLab repositories via webhook
  • 📥 Automatically receive new or updated issues via GitLab webhooks
  • 🧠 Use Gemini AI to generate concise summaries and classify issues as bug, feature, documentation, or other
  • 🧾 View, update, or delete issues through a clean dashboard
  • 🧑‍💼 Secure access via Firebase Authentication

All of this is wrapped in a beautiful React + Tailwind interface built for clarity and speed.

🏗 How we built it

We split the project into two parts:

📦 Backend (Node.js + Express)

  • Built a RESTful API with Express.js
  • Used MongoDB Atlas with Mongoose for database storage
  • Verified users using Firebase Admin SDK
  • Handled incoming GitLab webhooks and used Gemini Pro API to analyze issues
  • Deployed backend with CodeSandbox Server (CSB) during development

🖥 Frontend (React + TypeScript)

  • Built with React, Vite, and TypeScript
  • Used Firebase (client SDK) for authentication
  • Styled using Tailwind CSS and shadcn/ui
  • Created reusable components and tabs for managing repositories and issues
  • Integrated with the backend via secure Bearer token API calls

🧱 Challenges we ran into

  • 🔐 Handling CORS and passing Firebase tokens securely from frontend to backend
  • 🧪 Debugging GitLab webhook payloads in real-time
  • 🧾 Parsing and validating AI responses from Gemini reliably
  • 🧭 Managing real-time updates between the GitLab project and GIAst’s issue database
  • 🌍 Deploying and testing APIs securely in sandbox environments

🏅 Accomplishments that we're proud of

  • 🌐 Built a full-stack AI-powered issue tracker from scratch
  • 🔗 Successfully integrated GitLab webhooks and Gemini AI
  • 🧠 Automated issue summarization and classification with minimal latency
  • 🔐 Enforced user-based access control using Firebase Auth across frontend and backend
  • ⚡️ Clean, responsive, and fast user experience

📚 What we learned

  • How to build secure APIs with token-based Firebase Auth
  • How to parse and sanitize webhook payloads from GitLab
  • How to use Google Gemini to produce structured JSON responses
  • How to synchronize AI analysis with existing backend data
  • How to handle CORS policies and JWT tokens in a modern frontend/backend architecture

🔮 What's next for GIAst

  • ⏳ Add support for real-time updates using WebSockets or Server-Sent Events
  • 📊 Implement analytics to track issue trends across projects
  • 🔔 Add Slack/Discord notifications for classified issues
  • 🤖 Enhance classification logic with fine-tuned models
  • 🧩 Expand support for GitHub and Bitbucket repositories

🔧 Built With

Technology Role
React Frontend UI framework
TypeScript Type-safe codebase
Tailwind CSS Styling framework
Firebase Auth Authentication and token handling
MongoDB Atlas Cloud database
Mongoose MongoDB ORM for Node.js
Express.js Backend server and routing
Google Gemini API AI-powered summarization/classification
GitLab Webhooks Issue trigger and data source
Vite Fast frontend bundler
shadcn/ui UI components (Radix UI based)
CodeSandbox Server (CSB) Backend deployment & testing

Built With

Share this project:

Updates

posted an update —

Thanks for the heads-up! Here’s the clean, emoji-free version of your development log:

Brainstorming & Ideation

  • The project began with the idea to simplify issue tracking on GitLab using AI.
  • The core concept was to automatically classify and summarize GitLab issues as they’re created or updated.
  • This led to the creation of GIAst – GitLab Issue Assistant – to streamline developer workflows.

Phase 1: System Architecture

  • Defined the architecture:

    • Frontend: React + Vite + TailwindCSS + shadcn/ui
    • Backend: Node.js (Express) with MongoDB
    • AI: Gemini Pro from Google Generative AI
    • Authentication: Firebase
    • Dev Environment: Used Lovable.dev for live previews and fast iteration

  • Flow: GitLab → Webhook → Express API → Gemini → MongoDB → Frontend UI

Phase 2: Authentication Setup

  • Integrated Firebase for:

    • Google-based user sign-in
    • Token-based verification on backend using Firebase Admin SDK

  • Secured backend API routes with authentication middleware

Phase 3: Backend and Webhook Development

  • Created RESTful endpoints:

    • /api/repositories
    • /api/issues
    • /api/webhook/gitlab

  • Built MongoDB models using Mongoose for Repository and Issue

  • Implemented GitLab webhook to trigger AI summarization on issue events

Phase 4: Gemini AI Integration

  • Connected Gemini Pro API for natural language understanding
  • Designed prompts to return:
  {
    "summary": "...",
    "classification": "bug|feature|documentation|other"
  }
  • Handled AI output validation and fallback messaging

Phase 5: Frontend Implementation

  • Built a dashboard UI with Tailwind and shadcn/ui

  • Pages included:

    • Repository manager with webhook setup instructions
    • Real-time AI-annotated issue listings
    • Modal-based forms for creating and editing repositories

  • Hook structure (useRepositories, useIssues) helped maintain a clean state management flow

Phase 6: Token Management and API Security

  • CORS errors were resolved by dynamically setting origins in Express middleware
  • Implemented token refresh and automatic re-authorization on the frontend
  • API service was structured with robust error handling and retry logic

Phase 7: Chrome Extensions

Custom Screen Recorder Extension

  • Developed a minimalist Chrome extension to record clean, high-resolution screen sessions
  • Tailored for developers, enabling efficient walkthrough recordings without extra tools like Loom or Screenity

GIAst Chrome Extension

  • Created a second Chrome extension to provide real-time GitLab issue alerts and summaries
  • Users can get updates without opening the main dashboard

Final Phase: Recording and Documentation

  • Documented every development phase and architectural decision
  • Used the custom screen recorder to capture the entire project journey
  • Prepared for public release via video walkthroughs, GitHub, and a possible product launch

Tools and Technologies Used

Tool / Service Purpose
React + Vite Frontend framework
TailwindCSS UI styling
shadcn/ui UI components library
Firebase User authentication and token handling
Express.js API backend
MongoDB Atlas Database for repositories and issues
Google Gemini Pro AI for summarizing and classifying issues
GitLab Webhooks Real-time integration source
Lovable.dev Frontend live preview and deployment
Chrome Extension (Custom) Screen recording
Chrome Extension (GIAst) Real-time GitLab issue notifications

Log in or sign up for Devpost to join the conversation.