← Back to portfolio

Selected work

klryo

LiveVisitCode

A collaborative coding environment with built-in AI assistance and sandboxed execution.

Summary

klryo is a full-stack, browser-based code editor that combines the editing experience of VS Code with AI-assisted code review, instant multi-language code execution, and persistent AI chat history — all backed by a cloud database.It was built to explore how developers could get real-time feedback and run code without leaving the browser, while keeping their project history and conversations saved across sessions.The project spans a complete product surface: authentication, project/file management, a Monaco-based editor, a code execution pipeline, and an AI chat system — making it a strong demonstration of end-to-end full-stack ownership rather than a single isolated feature

Problem

A Monaco-powered editor (the same engine behind VS Code) for a familiar, professional editing experience.A direct integration with Judge0, letting users execute code in 80+ languages instantly, in-browser, without local setup.A Groq-powered AI chat layer that reviews code and answers natural-language questions about it, with full conversation history stored in MongoDB so context isn't lost between sessions.Clerk-based authentication (OAuth, email, MFA) so every user's projects, files, and chat history are private and persistent across devices.

Solution

Developers frequently juggle multiple tools while working: a code editor, a separate terminal/sandbox to test snippets, and a browser tab for AI assistance (ChatGPT, etc.), with no shared context between them.This creates friction, especially for Learners who want instant feedback on code without setting up a local environment.There was no single, lightweight web tool that unified editing, execution, and AI-assisted feedback with memory of past sessions.Anyone iterating on small projects who loses previous AI conversations and code context once a chat or browser tab closes.

Features

AI code assistanceMonaco Editor integration with full syntax highlighting
Sandboxed executionRun and test code in isolated environments without local setup overhead.
Real-time collaborationMultiple users can edit and see changes in the same workspace simultaneously.
Enterprise Grade AuthenticationEnterprise-grade authentication via Clerk (OAuth, email/password, MFA)

Architecture

Frontend

ReactReact
AxiosAxios
TailwindcssTailwindcss

Backend

clerkclerk
Node.jsNode.js
ExpressExpress
MongooseMongoose

Database

MongoDBMongoDB

DevOps & Tooling

VercelVercel
RenderRender
BunBun

klryo follows a modern decoupled architecture where the React frontend communicates with an Express.js backend through REST APIs.

The frontend is built using React, Vite, TypeScript, Tailwind CSS, and Monaco Editor, providing a fast and responsive coding environment.

Authentication and user management are handled by Clerk, allowing secure sign-in, protected routes, and session management.

The Express.js backend manages business logic, project operations, file management, AI requests, and integrations with external services.

MongoDB Atlas stores user projects, files, chat history, and application metadata using Mongoose ODM.

Judge0 API executes user code inside isolated environments and returns compilation and runtime results securely.

Groq AI powers intelligent code reviews, debugging assistance, explanations, and interactive AI conversations.

This architecture keeps the frontend lightweight while delegating authentication, execution, storage, and AI capabilities to specialized services, making klryo scalable and maintainable.

Results

41 unique users explored the platform

290 total page views across the application

7.1 pages viewed per visitor, indicating deep feature exploration

46% bounce rate