A custom code editor similar to code sandbox which has custom built file explorer, code editor and a preview. This editor was built with library 'sandpack-react' using ReactJs and JavaScript.

1 / 8

Code Editor

2 / 8

Code changes to commit

3 / 8

List of commits

4 / 8

Code diff between current version and a particular commit id

5 / 8

Deploy the code

6 / 8

Deployment Logs

7 / 8

Upload Project

8 / 8

Dark theme editor

❮ ❯

• File Explorer: The file explorer has folders, files, .png, .ico etc files with a searchbox where files can be searched by filename. Files/ Folders can be renamed and deleted. The folders are collapsible with files in it.
• Editor: The code editor is a text editor built on Monaco Editor .
• Preview: The live UI changes can be seen in the preview using 'sanpack-react'.
• Commit: Code changes can be saved where user can review the changes made. Changes were saved with a commit id, where user can again restore to a particular commit id when needed.
• Restore: The list of commit ids were provided to the user, where user can switch to a particular commit id. Here user is provided with a diff table having the current changes and the changes there in the selected commit id. The diff table is built on 'react-diff-viewer'.
• Deploy: A particular commit id can be deployed to vercel which returns the deployed url, deployment status and the deployment logs.
• Logs: The logs for the live deployment happening in vercel can be seen in the UI.
• Search: Search works for filenames as well as file content. The content search can be done on a single file or all the files. Here the search is built on 'fuse.js'.
• Upload Project: Any local project can also be uploaded to code editor which will be saved with a new commit id.
• Theme: Theme switcher to switch between dark and light themes.