The latest articles on Forem by Puspal Paul (@keenpaul29). https://forem.com/keenpaul29 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1069518%2F420af616-c15c-4b26-9015-6e1876b2e266.webp https://forem.com/keenpaul29 en Puspal Paul Thu, 17 Jul 2025 10:08:54 +0000 https://forem.com/keenpaul29/my-first-build-with-google-ai-studio-project-399e https://forem.com/keenpaul29/my-first-build-with-google-ai-studio-project-399e <p><em>This post is my submission for <a href="https://dev.to/deved/build-apps-with-google-ai-studio">DEV Education Track: Build Apps with Google AI Studio</a>.</em></p> <h2> What I Built </h2> <p>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.</p> <h2> Demo </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuanhvw24mwtcgc45v9y1.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuanhvw24mwtcgc45v9y1.png" alt="Image 1" width="800" height="500"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgsrmghm4pyl0g23gyi5i.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgsrmghm4pyl0g23gyi5i.png" alt="Image 2" width="800" height="500"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fizvcbw6jo3s6vz1f8gwz.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fizvcbw6jo3s6vz1f8gwz.png" alt="Image 3" width="800" height="500"></a></p> <p>Live website: <a href="https://codescope-ai.vercel.app" rel="noopener noreferrer">Click Here!</a></p> <h2> My Experience </h2> <p>🔍 Key Takeaways from Working on the Project</p> <ul> <li><p>AI-Powered Application Development<br> Working with geminiService.ts likely taught you how to integrate LLMs like Gemini into real-world tools, especially for code analysis or recommendation features.</p></li> <li><p>Modern Frontend Architecture<br> You used a component-based structure with React and TypeScript (Header, RepoInput, Chatbot, etc.), following best practices in scalable frontend development.</p></li> <li><p>External API Consumption<br> 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.</p></li> <li><p>Efficient Developer Tooling<br> 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.</p></li> <li><p>AI-Powered UX<br> Features like Chatbot.tsx and RecommendationsDisplay.tsx indicate experience building user interfaces that provide AI-based feedback and interactivity.</p></li> <li><p>UX-Driven UI Design<br> Components like Loader.tsx and ErrorMessage.tsx show your understanding of proper user experience patterns like loading states and error messaging.</p></li> </ul> <p>📘 Key Learnings from the Project -</p> <ul> <li>Frontend Development: Building a clean and modular React app with reusable components.</li> <li>TypeScript: Using type safety to catch bugs and enhance code maintainability.</li> <li>API Integration: Fetching and displaying structured data from GitHub and Gemini.</li> <li>Prompt Engineering: Likely crafted prompts for Gemini to generate code analysis or suggestions.</li> <li>Tooling with Vite: Leveraged a modern bundler to speed up development cycles.</li> <li>Deployment &amp; DevOps Basics: Using .env.local, .gitignore, and README.md shows awareness of best practices for maintainability and team collaboration.</li> </ul> <p>🌟 Surprising or Noteworthy Features -</p> <ul> <li><p>Contributor Spotlight<br> The ContributorSpotlight.tsx likely highlights individual repo contributors—a great way to humanize open-source collaboration.</p></li> <li><p>AI-Powered Code Recommendations<br> The RecommendationsDisplay.tsx component suggests that AI offers tailored tips or improvements on source code, which is rare and useful in developer tools.</p></li> <li><p>Embedded Chatbot<br> The Chatbot.tsx component hints at features like onboarding, code Q&amp;A, or repo navigation via conversational AI—very innovative.</p></li> <li><p>Frontend-Only Architecture<br> There's no backend folder, so the app likely interacts with APIs directly from the frontend—making it easier to deploy and scale.</p></li> </ul> <p>I'm grateful to Google AI Studio and Dev.to for starting this learning path!! Thanks for everything...</p> <p>Please do not forget to like this post if you found this helpful, and also help me buy a coffee!</p> <p><a href="https://www.buymeacoffee.com/aubade" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.buymeacoffee.com%2Fbuttons%2Fv2%2Fdefault-yellow.png" alt="Buy Me A Coffee" width="545" height="153"></a></p> deved learngoogleaistudio ai gemini