About This Project
What is this app?
This is a web-based code editor designed to let you open entire folders from your computer, navigate files and folders easily, and edit your code directly in the browser. It supports syntax highlighting and autocompletion powered by the Monaco editor, which is the same editor behind Visual Studio Code.
How does it work?
Using the File System Access API, the app can ask you to select a folder on your computer. It reads the folder contents recursively, builds a navigable file tree on the sidebar, and loads the selected file into the editor. You can edit and save your files back to disk without leaving the browser.
Technologies used
- Next.js with React for the frontend
- Monaco Editor for rich code editing experience
- Tailwind CSS for styling and theming
- File System Access API for seamless local file read/write
- TypeScript for safer, scalable code
Why build this?
This project helped me deepen my understanding of modern web APIs, browser security, and building developer tools right in the browser. It’s a handy lightweight alternative to traditional desktop code editors when you want quick edits without switching apps.