DEV Community

Puspal Paul
Puspal Paul

Posted on • Edited on

My first "Build with Google AI Studio" project

#deved #learngoogleaistudio #ai #gemini

Education Track: Build Apps with Google AI Studio

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I have built a web app that analyzes Github repos as input and gives detailed insights (complexity score, development pulse, tech stack, project purpose, code structure, mechanism and weaknesses) and also gives AI-based suggestions to implement on the project repo.

Demo

Image 1

Image 2

Image 3

Live website: Click Here!

My Experience

🔍 Key Takeaways from Working on the Project

  • AI-Powered Application Development
    Working with geminiService.ts likely taught you how to integrate LLMs like Gemini into real-world tools, especially for code analysis or recommendation features.

  • Modern Frontend Architecture
    You used a component-based structure with React and TypeScript (Header, RepoInput, Chatbot, etc.), following best practices in scalable frontend development.

  • External API Consumption
    With githubService.ts, you worked with GitHub’s REST API to fetch repository data and contributor info, building skills in handling real-time external data sources.

  • Efficient Developer Tooling
    The presence of vite.config.ts and tsconfig.json shows you learned how to set up and manage fast development environments using Vite and TypeScript.

  • AI-Powered UX
    Features like Chatbot.tsx and RecommendationsDisplay.tsx indicate experience building user interfaces that provide AI-based feedback and interactivity.

  • UX-Driven UI Design
    Components like Loader.tsx and ErrorMessage.tsx show your understanding of proper user experience patterns like loading states and error messaging.

📘 Key Learnings from the Project -

  • Frontend Development: Building a clean and modular React app with reusable components.
  • TypeScript: Using type safety to catch bugs and enhance code maintainability.
  • API Integration: Fetching and displaying structured data from GitHub and Gemini.
  • Prompt Engineering: Likely crafted prompts for Gemini to generate code analysis or suggestions.
  • Tooling with Vite: Leveraged a modern bundler to speed up development cycles.
  • Deployment & DevOps Basics: Using .env.local, .gitignore, and README.md shows awareness of best practices for maintainability and team collaboration.

🌟 Surprising or Noteworthy Features -

  • Contributor Spotlight
    The ContributorSpotlight.tsx likely highlights individual repo contributors—a great way to humanize open-source collaboration.

  • AI-Powered Code Recommendations
    The RecommendationsDisplay.tsx component suggests that AI offers tailored tips or improvements on source code, which is rare and useful in developer tools.

  • Embedded Chatbot
    The Chatbot.tsx component hints at features like onboarding, code Q&A, or repo navigation via conversational AI—very innovative.

  • Frontend-Only Architecture
    There's no backend folder, so the app likely interacts with APIs directly from the frontend—making it easier to deploy and scale.

I'm grateful to Google AI Studio and Dev.to for starting this learning path!! Thanks for everything...

Please do not forget to like this post if you found this helpful, and also help me buy a coffee!

Buy Me A Coffee

Top comments (0)