A Vite-powered React frontend for the CodeSynth collaboration platform. Supports authenticated code playgrounds, live preview, shared collaborative rooms, and persisted whiteboard state.
This repository contains the frontend for CodeSynth. It is built with React and Vite, and connects to the backend API for authentication, code storage, room management, and whiteboard persistence. Real-time collaboration is enabled using Yjs and Socket.IO.
- User registration and login with JWT authentication
- Code playground editor for HTML, CSS, and JavaScript
- Live preview rendered inside the browser
- Saved user code documents with My Codes library
- Real-time collaborative rooms with shared room state
- Shared whiteboard with save/update support
- Participant lists and room join/leave notifications
- React
- Vite
@monaco-editor/reactfor the code editoraxiosfor API requestssocket.io-clientfor real-time room notificationsyjs,y-monaco, andy-websocketfor collaborative editor synchronizationuuidfor room ID generation
Add screenshots for the current frontend UI once available. Suggested placeholders:
screenshots/home.pngscreenshots/playground.pngscreenshots/collaboration-room.png
- Node.js 18+ installed
Copy the example env file and configure the backend URLs:
copy .env.example .envRequired variables:
VITE_BACKEND_URL- backend API base URLVITE_SOCKET_URL- Socket.IO server URLVITE_YJS_URL- Yjs websocket provider URL (typically backend host with/yjs)
Install dependencies:
npm installStart the frontend:
npm run devOpen the local URL shown by Vite in your browser.
- The current frontend implements collaboration and code playground workflows.
- Obsolete features such as chatbot, Cohere doc generation, notes pages, and community pages are not part of the current live codebase.
- Replace screenshot placeholders after capturing current UI views.