Velvet Code

Inspiration

During hackathons and college coding sessions, we realized collaboration tools like Google Docs make text editing easy, but coding together is still clunky. Most solutions either lag, break syntax highlighting, or don’t support real-time AI help. We wanted to create a lightweight, seamless coding experience that allows multiple people to write, learn, and debug code together, all inside the browser.

What It Does

Velvet Code is an AI-powered collaborative coding platform that brings real-time teamwork and intelligence to the browser. It enables users to:

• Edit code simultaneously using WebSockets
• Chat and share snippets inside the same workspace
• Ask the built-in Gemini AI assistant to explain, refactor, or generate code

How We Built It

We built the platform using a modern, scalable tech stack:

• Frontend: Next.js 15 (App Router) + TypeScript + TailwindCSS
• Real-time Collaboration: WebSockets for shared code sessions
• Code Editing: Monaco Editor (the same engine used by VS Code)
• AI Integration: Google Gemini API for code explanation and generation
• Version Control: Git & GitHub for collaboration

Challenges We Ran Into

• File Path & Import Errors
• Port Conflicts
• Integrating Gemini AI responses smoothly inside the editor interface
• Managing merge conflicts and remote branches across multiple GitHub contributors
• Debugging under unstable Wi-Fi

Accomplishments That We're Proud Of

• Learned to merge multiple Git branches, coordinate design + backend, and ship a demo

What We Learned

• How to architect real-time systems with WebSockets
• How to use Gemini API
• The importance of design balance: color theory, readability, and user flow

What's Next For Velvet Code

Our vision is to make Velvet Code the go-to collaborative coding environment for students, hackathons, and open-source teams. Next, we plan to integrate Redis for real-time session persistence and faster state management, ensuring that collaboration remains seamless and reliable even across multiple users and devices.

Built With

• gemini
• git
• github
• monaco
• next.js
• node.js
• tailwindcss
• typescript
• websockets