{"id":26713430,"url":"https://github.com/narsibhati-dev/cosketch","last_synced_at":"2025-10-25T07:50:43.098Z","repository":{"id":281913023,"uuid":"946160466","full_name":"NarsiBhati-Dev/CoSketch","owner":"NarsiBhati-Dev","description":"CoSketch is a real-time collaborative drawing application built using Turborepo and Bun as the package manager. It includes separate apps for the frontend, backend API, and WebSocket server to enable seamless collaboration.","archived":false,"fork":false,"pushed_at":"2025-09-17T08:58:27.000Z","size":14652,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-17T10:36:37.642Z","etag":null,"topics":["collaboration","drawing-app","express-js","express-middleware","jwt-authentication","nextjs15-typescript","postgresql","prisma-orm","react-hot-toast","react19","tailwindv4","tanstack-react-query","turborepo","websocket","zustand"],"latest_commit_sha":null,"homepage":"https://www.cosketch.xyz/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NarsiBhati-Dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-10T17:50:04.000Z","updated_at":"2025-09-17T08:58:30.000Z","dependencies_parsed_at":"2025-03-11T20:31:10.832Z","dependency_job_id":"7ce36a57-a3ab-435a-8e36-7b87323a2ad5","html_url":"https://github.com/NarsiBhati-Dev/CoSketch","commit_stats":null,"previous_names":["narsibhati-dev/cosketch"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/NarsiBhati-Dev/CoSketch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarsiBhati-Dev%2FCoSketch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarsiBhati-Dev%2FCoSketch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarsiBhati-Dev%2FCoSketch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarsiBhati-Dev%2FCoSketch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NarsiBhati-Dev","download_url":"https://codeload.github.com/NarsiBhati-Dev/CoSketch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarsiBhati-Dev%2FCoSketch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280923472,"owners_count":26414234,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collaboration","drawing-app","express-js","express-middleware","jwt-authentication","nextjs15-typescript","postgresql","prisma-orm","react-hot-toast","react19","tailwindv4","tanstack-react-query","turborepo","websocket","zustand"],"created_at":"2025-03-27T12:20:07.989Z","updated_at":"2025-10-25T07:50:43.093Z","avatar_url":"https://github.com/NarsiBhati-Dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CoSketch\n\n![CoSketch banner](https://github.com/NarsiBhati-Dev/CoSketch/blob/master/apps/cosketch-frontend/public/images/social-banner.webp?raw=true)\n\nCoSketch is a **real-time collaborative drawing application** built using **Turborepo** and **Bun**. It includes separate apps for the frontend, backend API, and WebSocket server to enable seamless collaboration.\n\n## 🎬 CoSketch Demo\n\n[![Watch the CoSketch Demo](https://img.youtube.com/vi/m_uOsRsr8bw/maxresdefault.jpg)](https://www.youtube.com/watch?v=m_uOsRsr8bw)\n\n## Code of Conduct\n\nPlease read and follow our [Code of Conduct](./CODE_OF_CONDUCT.md) to help keep **CoSketch** a welcoming and inclusive space for everyone\n\n## License\n\nThis project is licensed under the [CoSketch Custom License](./LICENSE.md).\n\n## 🏗 Project Structure\n\nThis monorepo is managed using **Turborepo** and is structured as follows:\n\n```sh\ncosketch/\n├── apps/ # Contains independent applications\n│   ├── cosketch-frontend/        # Next.js app for the UI\n│   ├── cosketch-backend/         # Express backend for API handling\n│   ├── cosketch-websocket/       # WebSocket server for real-time collaboration\n├── packages/ # Shared code across apps\n│   ├── database/        # Prisma \u0026 PostgreSQL setup\n│   ├── types/           # Shared TypeScript types\n│   ├── backend-common/  # Common utilities for backend services\n├── docker/              # Docker configuration\n│   ├── backend.prod.Dockerfile    # Production Dockerfile for backend\n│   ├── frontend.prod.Dockerfile   # Production Dockerfile for frontend\n│   ├── websocket.prod.Dockerfile  # Production Dockerfile for WebSocket\n│   ├── docker-compose.yml         # Docker Compose configuration\n├── .github/workflows/    # GitHub Actions CI/CD pipelines\n│   ├── cd_backend.yml    # CI/CD pipeline for backend\n│   ├── cd_frontend.yml   # CI/CD pipeline for frontend\n│   ├── cd_websocket.yml  # CI/CD pipeline for WebSocket\n├── turbo.json           # Turborepo config file\n├── package.json         # Root package.json for Bun \u0026 Turborepo setup\n└── README.md            # Project documentation\n```\n\n---\n\n## 🧩 Features\n\nCoSketch offers a rich set of features for real-time collaborative sketching:\n\n- 🎨 **Shape Drawing**  \n  Supports essential diagramming shapes:\n\n  - Rectangle\n  - Ellipse\n  - Diamond\n  - Arrow\n  - Line\n\n- ✏️ **Freehand Drawing**\n\n  - Draw freehand lines with customizable brush sizes and colors.\n\n- 📝 **Text Support**\n\n  - Add text labels to your canvas with customizable colors.\n\n- ✏️ **Interactive Editing**\n\n  - Select, drag, and resize shapes with ease.\n  - Modify shape styles including color, stroke width, and fill.\n\n- 🗑️ **Shape Management**\n\n  - Delete individual shapes.\n  - Clear the entire canvas with one click.\n\n- 🔄 **Real-Time Synchronization**\n\n  - Update and broadcast shape and drawing state across all users using **WebSockets**.\n\n- 🌐 **Multi-User Collaboration**\n\n  - Seamless live editing experience for multiple participants.\n\n- ☁️ **Persistent Storage**\n\n  - Store and retrieve all shapes and drawings from a **PostgreSQL** database via **Prisma ORM**.\n\n- ⚙️ **Modular Architecture**\n\n  - Built with a scalable monorepo structure using **Turborepo** and **Bun**.\n  - Decoupled apps for frontend, backend, and WebSocket server.\n\n---\n\n## 🚀 Getting Started\n\nFollow these steps to get **CoSketch** up and running locally:\n\n### Prerequisites\n\n- **Bun** (v1.2.5 or later)\n- **Node.js** (v18 or later)\n- **Docker** and **Docker Compose** (for PostgreSQL and infrastructure)\n\n### Install Dependencies\n\nMake sure you have **Bun** installed globally, then install all packages:\n\n```sh\nbun install\n```\n\n### Configure Environment Variables\n\nCreate environment files for each app:\n\n1. Copy the example environment files\n2. Rename them to `.env` in each app directory\n3. Fill in the required values like `DATABASE_URL`, `NEXT_PUBLIC_WS_URL`, etc.\n\n### Database Setup\n\nStart the PostgreSQL database using Docker:\n\n```sh\nbun run db:up\n```\n\nThis command uses the docker-compose.yml file located in the docker directory to spin up a PostgreSQL container.\n\n### Generate Prisma Client\n\nGenerate the Prisma client across all apps:\n\n```sh\nbun run generate\n```\n\n### Deploy Database Migrations\n\nApply all migrations to your database:\n\n```sh\nbun run db:deploy\n```\n\n### Run the Application\n\n#### Development Mode\n\nStart all apps in development mode:\n\n```sh\nbun run dev\n```\n\nThis uses Turborepo to run all services concurrently.\n\n#### Production Mode\n\nTo build and start all services:\n\n```sh\nbun run build\nbun run start\n```\n\nOr use the convenient combined command:\n\n```sh\nbun run server:start\n```\n\nThis deploys database migrations and starts all services.\n\n### Start Individual Apps\n\nYou can also start specific apps individually:\n\n```sh\n# Start frontend only\nbun run start:frontend\n\n# Start backend API only\nbun run start:backend\n\n# Start WebSocket server only\nbun run start:websocket\n```\n\n### Infrastructure Management\n\nThe project includes Docker Compose configurations for running the entire stack:\n\n```sh\n# Build all Docker containers\nbun run infra:build\n\n# Start all infrastructure containers\nbun run infra:up\n\n# Stop all infrastructure containers\nbun run infra:down\n```\n\n---\n\n## 📦 Tech Stack\n\n- **Turborepo** → Monorepo management\n- **Bun** → Fast JavaScript package manager \u0026 runtime\n- **Next.js** → Frontend framework\n- **Express.js** → Backend API\n- **WebSockets** → Real-time collaboration\n- **PostgreSQL** → Database\n- **Prisma** → ORM for database management\n- **Docker** → Containerized database for development\n- **Sharp** → Image processing\n- **GitHub Actions** → CI/CD pipelines\n\n---\n\n## 🗄 Database Setup\n\n### Start PostgreSQL with Docker\n\n```sh\nbun db:up\n```\n\n### Stop PostgreSQL\n\n```sh\nbun db:down\n```\n\n### Run Database Migrations\n\n```sh\nbun run db:deploy\n```\n\n### Connect to PostgreSQL via CLI\n\n```sh\ndocker exec -it \u003cpostgres_container_name\u003e psql -U \u003cyour_db_user\u003e -d \u003cyour_database\u003e\n```\n\n\u003e Replace `\u003cpostgres_container_name\u003e`, `\u003cyour_db_user\u003e`, and `\u003cyour_database\u003e` accordingly.\n\n---\n\n## 🚢 Deployment\n\nThe project includes production Docker configurations and GitHub Actions workflows for continuous deployment:\n\n### Docker Production Setup\n\nThe `/docker` directory contains production Dockerfiles for each service:\n\n- `backend.prod.Dockerfile` - Production container for the backend API\n- `frontend.prod.Dockerfile` - Production container for the Next.js frontend\n- `websocket.prod.Dockerfile` - Production container for the WebSocket server\n\n### CI/CD Pipelines\n\nGitHub Actions workflows in the `.github/workflows` directory automate the deployment process:\n\n- `cd_backend.yml` - Deploys the backend service\n- `cd_frontend.yml` - Deploys the frontend application\n- `cd_websocket.yml` - Deploys the WebSocket server\n\n---\n\n## 📜 Available Scripts\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"turbo run dev\",\n    \"build\": \"turbo run build\",\n    \"start\": \"turbo run start\",\n    \"start:frontend\": \"turbo run start:frontend --filter=cosketch-frontend\",\n    \"start:backend\": \"turbo run start:backend --filter=cosketch-backend\",\n    \"start:websocket\": \"turbo run start:websocket --filter=cosketch-websocket\",\n    \"lint\": \"turbo run lint\",\n    \"format\": \"prettier --write \\\"**/*.{ts,tsx,md}\\\"\",\n    \"check-types\": \"turbo run check-types\",\n    \"db:up\": \"docker-compose -f docker/docker-compose.yml up -d\",\n    \"db:down\": \"docker-compose -f docker/docker-compose.yml down\",\n    \"infra:build\": \"docker-compose -f docker-compose.yml build\",\n    \"infra:up\": \"docker-compose -f docker-compose.yml up -d\",\n    \"infra:down\": \"docker-compose -f docker-compose.yml down\",\n    \"db:deploy\": \"turbo run db:deploy\",\n    \"server:start\": \"bun run db:deploy \u0026\u0026 bun run start\",\n    \"generate\": \"turbo run generate\"\n  }\n}\n```\n\n---\n\n## Development Tools\n\n```sh\n# Run linting across all packages\nbun run lint\n\n# Format code with Prettier\nbun run format\n\n# Type checking\nbun run check-types\n```\n\n---\n\n🚀 **\"Sketch Together, Think Better.\"**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarsibhati-dev%2Fcosketch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnarsibhati-dev%2Fcosketch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarsibhati-dev%2Fcosketch/lists"}