Kasca is an online code collaboration platform that enables real-time coding, cursor sharing, live UI preview, and video communication with integrated Git support—no sign-up required.
✨ Try now at kasca.dulapahv.dev
This project is part of the course "COMPSCI4025P Level 4 Individual Project" at the University of Glasgow.
For detailed usage instructions and feature documentation, please see the User Manual.
- Real-time Collaboration - Code together in real-time with cursor sharing, highlighting, and follow mode
- Shared Terminal - Execute code and see results together with over 80 supported languages
- Live Preview - Preview UI changes instantly with loaded libraries like Tailwind CSS, and more
- GitHub Integrated - Save your work and open files from your repositories
- Shared Notepad - Take notes together in real-time with rich text and markdown support
- Video & Voice - Communicate with your team using video and voice chat
The project is organized as a monorepo using Turborepo:
kasca
├── apps/ # Application packages
│ ├── client/ # Frontend Next.js application
│ └── server/ # Backend Socket.IO server
├── packages/ # Shared packages
│ └── types/ # Shared TypeScript types and enums
├── package.json # Root package.json
└── pnpm-workspace.yamlBefore you begin, ensure you have the following installed:
If you don't have pnpm installed, you can install it globally:
npm install -g pnpm-
Clone the repository
git clone https://github.com/dulapahv/kasca.git cd kasca -
Install dependencies (this will install all workspace dependencies)
pnpm install
Note: Git hooks will be automatically installed via Husky when running
pnpm install
To start the development server for both the frontend and backend applications:
pnpm devYou can also start them individually:
# Start only the client
pnpm --filter client dev
# Start only the server
pnpm --filter server devThe application will be available at:
- Frontend: http://localhost:3000
- Backend: http://localhost:3001
All test commands can be run from both the root directory and their respective workspaces.
Both the frontend server and the backend server will start automatically. To run the frontend tests:
# In root directory or client workspace
pnpm test:client # Run all frontend E2E tests
pnpm test:client:ui # Run frontend tests with UI mode
pnpm test:client:debug # Debug frontend tests
pnpm test:client:report # View frontend test report
# Run in client workspace only
pnpm --filter client test:clientThe backend server will start automatically. To run the backend tests:
# In root directory or server workspace
pnpm test:server # Run backend tests against local server
pnpm test:server:remote # Run backend tests against remote server
pnpm test:server:watch # Run backend tests in watch mode (local server)
# Run in server workspace only
pnpm --filter server test:serverThis project is configured to build both the frontend and backend applications together with caching from Turborepo. To build the entire project:
pnpm buildHowever, you can also build them individually:
# Build frontend
pnpm build:client
# Build backend
pnpm build:serverThe build artifacts of the frontend will be available in the apps/client/.next directory, and the backend will be available in the apps/server/dist directory.
The project is configured for automatic deployment:
- Frontend (client): Automatically deploys to Vercel
- Backend (server): Automatically deploys to Render
Simply push to the main branch, and both platforms will automatically build and deploy the changes.
These are the available scripts in the project:
# Development
pnpm dev # Start all applications in development mode
pnpm build # Build all packages
pnpm build:client # Build frontend
pnpm build:server # Build backend
pnpm clean # Clean all builds and node_modules
# Testing
pnpm test:client # Run frontend E2E tests (Playwright)
pnpm test:client:ui # Run frontend tests with UI mode
pnpm test:client:debug # Debug frontend tests
pnpm test:client:report # View frontend test report
pnpm test:server # Run backend tests against local server
pnpm test:server:remote # Run backend tests against remote server
pnpm test:server:watch # Run backend tests in watch mode (local server)
# Linting and Formatting
pnpm lint:check # Run ESLint checks (frontend only)
pnpm lint:fix # Fix ESLint issues (frontend only)
pnpm format:check # Check formatting
pnpm format:fix # Fix formatting issuesYou can also run scripts in the specific workspaces (note: this will not use Turborepo caching):
# Frontend specific
pnpm --filter client dev
pnpm --filter client build
pnpm --filter client test:e2e
# Backend specific
pnpm --filter server dev
pnpm --filter server build
pnpm --filter server test:socket- Frontend:
- Next.js
- TypeScript
- Tailwind CSS
- shadcn/ui
- Monaco Editor (code editor)
- Socket.IO Client
- Sandpack (live preview)
- MDXEditor (notepad)
- simple-peer (WebRTC)
- React Hook Form + Zod
- Backend:
- Node.js
- TypeScript
- Socket.IO (binded to µWebSockets.js server)
- Testing:
- Playwright (end-to-end testing for frontend)
- Jest (unit testing for backend)
- CodeQL (security analysis)
- Code Quality:
- ESLint (static code analysis)
- Prettier (code formatting)
- Husky (git hooks)
- commitlint (commit message linting)
- Build & DevOps:
- Turborepo (monorepo build system)
- GitHub Actions (CI/CD)
- Vercel (frontend deployment)
- Render (backend deployment)
- Monitoring & Analytics:
- Sentry (error tracking)
- Vercel Analytics (web analytics)
- Cloudflare Web Analytics (web analytics)
- External Services:
- Piston (code execution)
- GitHub REST API (repository management)
We use several tools to maintain code quality:
- ESLint for static code analysis (frontend only)
- Prettier for code formatting
- prettier-plugin-sort-imports for import statement organization
- prettier-plugin-tailwindcss for Tailwind CSS class sorting (frontend only)
- prettier-plugin-classnames for wrapping long Tailwind CSS class names (frontend only)
- Husky for Git hooks
- lint-staged for running checks on staged files
- commitlint for commit message linting
Check and fix code style:
pnpm lint:check # Check ESLint issues
pnpm lint:fix # Fix ESLint issues
pnpm format:check # Check formatting issues
pnpm format:fix # Fix formatting issuesContributions are welcome! To contribute to this project, follow these steps:
-
Create a new branch for your feature:
git checkout -b feat/your-feature-name
-
Commit your changes following Conventional Commits:
git commit -m "<type>(<optional-scope>): <description>"-
<type>: Must be one of:feat: New features (e.g., "feat: add user authentication")fix: Bug fixes (e.g., "fix: resolve memory leak")docs: Documentation changes (e.g., "docs: update API guide")style: Code style changes (e.g., "style: fix indentation")refactor: Code refactoring (e.g., "refactor: simplify auth logic")perf: Performance improvements (e.g., "perf: optimize database queries")test: Adding/updating tests (e.g., "test: add unit tests for auth")chore: Routine tasks/maintenance (e.g., "chore: update dependencies")ci: CI/CD changes (e.g., "ci: add GitHub Actions workflow")revert: Revert previous changes (e.g., "revert: remove broken feature")
For complete commit message guidelines, see Conventional Commits.
-
-
Push your changes and submit a Pull Request with a description of your changes:
git push origin feat/your-feature-name
For detailed usage instructions and feature documentation, please refer to the User Manual.
MIT License - see the LICENSE file for details.
