Devflow
DevFlow is a modern web-based IDE that allows developers to write, run, and preview code directly in their browser. Built using WebContainer technology—similar to StackBlitz and CodeSandbox—it provides a seamless coding experience without requiring any local setup. Users can create full-stack web applications, experiment with frameworks, and collaborate in real time, all within a secure and isolated environment
webcontainer
frontend
Project Overview
Tech Stack :
Next JS, Tailwind CSS, Next Auth, Shadcn UI, Mongo DB
Type :
Fullstack
Duration :
1 month
Deployment :
Vercel
System Architecture
DevFlow is built with Next.js and NextAuth for a secure, high-performance web experience backed by MongoDB for data management. It leverages WebContainer technology to run Node.js environments directly in the browser. The interface is styled with Tailwind CSS, ensuring a clean and responsive design.
fig: Devflow system architecture
Workflow Demo
Key Features
In Browser Coding
Write, run, and preview code instantly without any local setup using WebContainer technology.
Real Time Execution
Experience instant feedback as code runs directly in the browser, emulating a full Node.js environment.
Secure Authentication
Powered by NextAuth for seamless login, session management, and third-party authentication.
Persistent Cloud Storage
Projects and configurations are stored in MongoDB, ensuring reliability and accessibility across sessions.