Tech Stack
React 18
Google Gemini AI
Highlight.js
WebContainers
Tailwind CSS
Node.js
Express.js
Socket.IO
MongoDB
Mongoose
Redis
JWT
Description
I built Chat2Code, a full-stack AI-driven development environment that lets users chat with Google Gemini to generate code instantly (prefix with @AI), while providing a real-time collaborative code editor and in-browser execution.
It combines a modern React frontend with Node.js backend, Socket.IO for live updates, WebContainers for running Node.js apps directly in the browser, and MongoDB for project persistence—perfect for solo devs, teams, or learning AI-assisted coding.
- Integrated Google Gemini AI for intelligent code generation and assistance directly in chat (e.g., '@AI create a React component').
- Enabled browser-based code execution and live preview using WebContainers (StackBlitz-powered), with syntax highlighting (Highlight.js) and tabbed file editing.
- Added real-time collaboration via Socket.IO: multiple users can edit the same codebase simultaneously, plus team member invites.
- Built secure user auth (JWT), project management (MongoDB/Mongoose), Redis caching, and easy setup/deploy (Vercel for frontend, compatible backend host).
- Focused on JS/Node ecosystem with plans for broader language support; includes output modal for server logs and responsive, Tailwind-styled UI.
Page Info
Chat2Code
Gemini-powered AI chat app + in-browser IDE: generate code via @AI chat, live edit with syntax highlighting, run Node.js code using WebContainers, real-time collaboration.
