DEV Community

Imran Khan
Imran Khan

Posted on

Codeflow - Real time collaborative code editor

๐Ÿš€ Excited to share what Iโ€™ve been building for the past 15-20 days!

I developed an AI-powered real-time code editor using the MERN stack, packed with features to make coding collaborative and seamless:

โœจ Highlights:
Real-time Collaboration via WebSockets: Code together with multiple participants in shared rooms, instantly synced.
AI Assistant (Google Gemini): Helps debug, explain concepts, and generate code snippets.
Multi-language Support: JS, Python, C++, Java, TypeScript, and more.
In-browser Code Execution & Live Preview: Run code directly with Judge0 API and see HTML/CSS/JS updates instantly.
Secure JWT Authentication for sign-up, sign-in, and session management.
Collaborative Rooms & Code Export: Create/join rooms and save your work.

๐Ÿ’ก What I learned:
API handling with React Query
TypeScript for type-safe development
ShadCN/UI for building clean, responsive interfaces
Form handling and validation using Zod
Full-stack deployment, connecting frontend & backend in production

๐Ÿ”— Check it out:
Live Demo : https://codeflow-app.onrender.com/
GitHub Repository : https://github.com/imrancodes/codeflow

This project was a deep dive into real-time WebSocket integrations, AI-powered features, and full-stack app deployment. Highly recommended for anyone looking to explore advanced MERN applications!








Top comments (0)