Skip to content

Satyajit Samal

ResumeRecruiter Brief
GitHubLinkedInX

Project

FrontendLive

CodeStudio - Web Code Editor

CodeStudio enables editing HTML/CSS/JS in-browser with instant visual feedback and developer-centric ergonomics.

CodeStudio in-browser editor and preview on desktop and mobile
ReactJavaScriptTailwind CSS

Problem

Quick frontend experimentation often requires local setup overhead.

Solution

Built a web editor that reduces setup friction with instant render feedback for frontend iteration.

Key Features

  • - HTML/CSS/JS editing panes
  • - Live preview rendering
  • - Developer-friendly layout
  • - Lightweight in-browser coding flow

Architecture Notes

  • - Split-pane editor composition
  • - Preview rendering pipeline
  • - Local state-driven source synchronization

Product Context

CodeStudio reduces setup friction for quick frontend experiments by providing an in-browser editor with live output feedback.

Engineering Focus

  • Split-pane editing and preview surface
  • Fast source synchronization between panes
  • Lightweight experience for rapid iteration

Build Decisions

The implementation prioritizes interaction speed and predictable preview rendering, so users can iterate on ideas without local setup overhead.

What I Would Improve Next

  • Add project templates and snippets
  • Introduce autosave and session persistence
  • Support collaboration and shareable sessions

Lessons Learned

  • - Preview rendering must be isolated carefully for predictable behavior.

Project AI

Ask about this project

Answers are grounded to this project details, with minimal profile context for recruiter relevance.

Ask what problem this project solves, what was personally built, and why it matters for hiring evaluation.

GitHubLive DemoBack to Projects

Related Projects

View all projects

Frontend

Inventory Dashboard

An analytics-style dashboard for interpreting inventory sheet data with clarity.

Frontend

Tic Tac Toe

A polished game implementation with undo/redo state management.