Software Development Internship at Codemate AI

Overview

• How I got this internship?
• CoderTerm Landing Page
• Codemate Web App redesign and development
• Conclusion

How I got this internship?

so first question how did i get this internship? so when i was looking for startups in HackerNoon Startup Of the Year i found a startup called Codemate AI and i just reached out to the founder Ayush and thats how the journey began. I have to admit this internship was truly a learning experience for me. Learnt a lot of new things and got to work on some really cool products and also got to work with some really cool people.

CoderTerm Landing Page

My first task was to build the landing page for a new product, CodeTerm, an AI-enabled terminal. Using Next.js and Framer Motion, I focused on creating a dynamic and interactive experience that would immediately showcase the product's power.

The centerpiece is an animated terminal demonstration right on the homepage. This isn't just a static video; it's a coded animation that simulates CodeTerm's core feature in action, showing how it translates natural language queries like "List files in current folder" into the correct `ls` command. I designed the page to guide users through all the features, a multi-step download flow, and finally, I added a delightful confetti animation that triggers upon successful download to make the experience feel rewarding.

Here is a short video showcasing the landing page. You can also check it out live here.

Redesigning the Core: The Main Landing Page

After shipping the CodeTerm page, I was tasked with a more significant challenge: redesigning the main codemate.ai landing page. The primary goal was to create a unified and compelling narrative that instantly communicated the company's core value: being the "Grammarly for Coding."

My main contribution was the new hero section, designed to be both clean and dynamic. I implemented a text animation that cycles through the different products in the ecosystem—CodeMate Education, Terminal, Extension, and Web. This wasn't just for show; it was a strategic way to introduce visitors to the entire product suite right from the first impression, all under a single, powerful umbrella.

This hero section established the groundwork for the new design. Before the full redesign was completed, I transitioned to work on another key project for the team.

Here's a preview of the hero section in action:

Codemate Web App redesign and development

After the landing page was completed, I was tasked with redesigning the CodeMate Web App. So here are some before after comparisons.

BEFORE

AFTER

Yes , old dashbaord has lot of issues and all those are static previouosly 👀

1 of 5

Chat Section of Codemate Web App

The chat section of the Codemate Web App was a significant focus of my redesign efforts. The previous version was barely functional, lacking the intuitive design and features that users expect from a modern AI-powered platform.

I implemented a complete overhaul of the chat interface, introducing a more user-friendly layout and enhancing the overall user experience and most importantly added a lot of new features like:

• Web Search: Users can now get real-time information from the web, with the Agentic RAG model.
• File Uploads: Users can now upload files directly into the chat, allowing the AI to analyze and respond based on the content of those files.
• Voice Input: The chat now supports voice input, making it easier for users to interact with the AI.
• Read Aloud: The chat can now read messages aloud, providing an additional layer of accessibility for users.
• Chat With Knowledge Base: So one of standout feature of codemate is ability to create knowledge base (from Codemate VS Code Extension) , user can create a knowledgebase using a documentation or a codebase or using a github repo and then chat with it by simply tagging the knowledge base in the chat. So it was previously in extension but i implemented it in the web app as well . This feature was the most challenging to implement, as it required back and forth communication with the backend to fetch relevant information from the knowledge base and provide accurate responses along with maintaining the context of the conversation as well as showing proper animtion and loading states handling all the edge cases. It can handle multiple tool calls simultaneously, uses OpenAI's parallel tool calling to handle multiple tool calls simultaneously, and provides a seamless user experience.
• BYOK (Bring Your Own Key): Users can now bring their own keys to the chat, allowing for more secure and personalized interactions with the AI.
• Improved Markdown Support: I have improved the markdown support extensively, while maintaining the performance of the chat section. This includes better rendering of code blocks, and support for various markdown elements like lists, links, and images,preview links etc .

Build (Formerly Playground )Section of Codemate Web App

The Build section of the Codemate Web App, previously known as the Playground, is a space where users can create full fledged applications using AI similar to v0.dev . Made this from scratch and it was a challenging task as it required a lot of backend integration and also had to handle a lot of edge cases. The main features of this section are:

• AI-Powered Code Generation: Users can generate code using AI, with the ability to specify any web framework they prefer (React, Next.js, Svlete etc.) and the AI will generate the code accordingly.
• TypeScript Support: User can choose to generate code in TypeScript, which is a great addition for developers who prefer type safety.
• Code Editing: The code editor is powered by Monaco Editor, which provides a rich editing experience with features like syntax highlighting, code completion, and error checking.
• Live Preview: Users can see a live preview of their application as they build it
• Deployment: Once the application is ready, users can deploy it with a single click, making it easy to share their work with others.
• Made with Codemate AI: The Build section also includes a "Made with CodeMate AI" badge, promoting the use of the platform and showcasing the power of AI in software development.
• Dynamic Screen Preview: The Build section also includes a dynamic screen preview feature, which allows users to see how their application will look on different devices and screen sizes.
• ** Version Control**: User can go back to previous versions of the code in case they want to revert any changes or see the history of their work.
• Mobile Responsiveness: The Build section is designed to be mobile responsive, ensuring that users can build and preview their applications on any device.
• Try Fix Button : The Build section also includes a "Try Fix" button, which allows users to fix any errors in their code with a single click. This feature is powered by AI and uses the same model as the chat section to provide accurate fixes.

Pricing Page

The pricing page was another significant task I undertook during my internship. The goal was to create a clear and compelling pricing structure that would help users understand the value of the different plans offered by Codemate AI. I designed the pricing page to be visually appealing and easy to navigate. The page features a comparison table that highlights the key differences between the free and paid plans, making it easy for users to see what they get with each option. I also added Stripe checkout integration to handle the payment process seamlessly. Here is a preview of the pricing page:

Additional Features and Systems

Beyond the main pages, I also contributed to several other critical components of the Codemate ecosystem:

Settings Page

I developed the settings page, which is a highly complex interface featuring:

• 20+ different subscription plans with dynamic pricing
• BYOK (Bring Your Own Key) support for enhanced security
• Comprehensive user preference management
• Billing and subscription management integration

I worked on both the frontend implementation using Next.js and the backend logic using FastAPI to ensure seamless functionality across all features.

Team Management System

The team management page was another significant project that involved building a comprehensive system for:

• Team invitation system with secure invitation workflows
• Custom licensing system where team admins can create personalized licenses for each member with custom usage limits and feature access
• Advanced admin controls including the ability to assign admin roles, remove team members, and manage permissions at granular levels
• Knowledge base sharing capabilities between team members
• Role-based access control with hierarchical permissions management

This feature required extensive backend logic implementation and careful UI design to handle complex team collaboration workflows. The licensing system was particularly challenging as it needed to integrate with the billing system while providing flexible, per-user customization options.

Authentication System

I also contributed to the Codemate Authentication system, which serves as the unified identity platform across all Codemate products. Key aspects of this work included:

• Frontend development for login/signup flows
• Backend implementation using FastAPI
• OAuth integration using the Appwrite library
• Cross-platform authentication consistency

This was particularly challenging as it required ensuring seamless authentication across multiple products while maintaining security best practices.

Conclusion

My internship at Codemate AI was an incredible journey that significantly accelerated my growth as a full-stack developer. Over the course of this experience, I had the opportunity to work on cutting-edge AI-powered products, from building interactive landing pages to developing complex web applications with advanced features like AI chat systems, code generation platforms, and comprehensive team management tools.

The experience taught me invaluable lessons about:

• Full-stack development using modern technologies like Next.js, FastAPI, and various AI APIs
• Product development lifecycle from conception to deployment
• User experience design and how to create intuitive interfaces for complex functionalities
• Team collaboration in a fast-paced startup environment
• AI integration and how to leverage AI capabilities to enhance user experiences

Working directly with the founder and being entrusted with critical features like the authentication system and main web app redesign gave me confidence in my abilities and a deeper understanding of how successful tech products are built and scaled.

This internship has prepared me well for tackling complex software development challenges, and I'm excited to apply these skills to future projects and opportunities.

Available for freelance projects - If you're looking for a skilled full-stack developer with AI integration experience, feel free to reach out at hire@codewarnab.in