{"id":29692548,"url":"https://github.com/hit-7624/squad-draw","last_synced_at":"2025-07-23T08:02:29.455Z","repository":{"id":303111032,"uuid":"1012923065","full_name":"hit-7624/squad-draw","owner":"hit-7624","description":"Squad Draw is a real-time collaborative drawing app where you and your friends can bring ideas to life on a shared digital canvas. Unleash your creativity with a variety of cool, hand-drawn style shapes and chat with your team in real-time as you collaborate. Create a private room, invite your squad, and start drawing together instantly.","archived":false,"fork":false,"pushed_at":"2025-07-21T18:08:24.000Z","size":831,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-21T19:25:54.312Z","etag":null,"topics":["better-auth","collaboration-tool","collaborative-drawing","excalidraw","monorepo","nextjs","real-time-collaboration","roughjs","socket-io","turborepo","websocket","zod"],"latest_commit_sha":null,"homepage":"https://squaddraw.h1t.tech","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hit-7624.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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}},"created_at":"2025-07-03T05:15:57.000Z","updated_at":"2025-07-21T18:08:28.000Z","dependencies_parsed_at":"2025-07-05T19:44:52.006Z","dependency_job_id":"6859763a-d2fc-4f26-8737-e78e5059cb76","html_url":"https://github.com/hit-7624/squad-draw","commit_stats":null,"previous_names":["hit-7624/squad-draw"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hit-7624/squad-draw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hit-7624%2Fsquad-draw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hit-7624%2Fsquad-draw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hit-7624%2Fsquad-draw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hit-7624%2Fsquad-draw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hit-7624","download_url":"https://codeload.github.com/hit-7624/squad-draw/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hit-7624%2Fsquad-draw/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266640709,"owners_count":23960802,"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-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["better-auth","collaboration-tool","collaborative-drawing","excalidraw","monorepo","nextjs","real-time-collaboration","roughjs","socket-io","turborepo","websocket","zod"],"created_at":"2025-07-23T08:01:10.763Z","updated_at":"2025-07-23T08:02:29.438Z","avatar_url":"https://github.com/hit-7624.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Squad Draw - Real-time Collaborative Drawing Application\n\n## Project Overview\n\nSquad Draw is a full-stack real-time collaborative drawing application built as a monorepo. Users can create rooms, invite others, and draw together in real-time with various shapes and tools.\n\n### Architecture\n\n- **apps/web**: Next.js 15 full-stack application with integrated API routes\n\n- **apps/ws-server**: WebSocket server for real-time collaboration (Socket.IO)\n- **packages/**: Shared code (database, schemas, UI components, configuration)\n\n---\n\n## 🚀 Features\n\n### Drawing \u0026 Collaboration\n\n- **Real-time Drawing**: Multiple users can draw simultaneously\n- **Shape Tools**: Ellipse, Rectangle, Line, Diamond, Arrow, Free Draw\n- **Drawing Options**: Customizable stroke, fill, opacity, roughness, and line styles\n  - **Live Updates**: Real-time synchronization of all drawing actions\n- **Save Canvas as Image**: Download the current canvas as a PNG image with a single click\n\n### Room Management\n\n- **Create Rooms**: Users can create private or shared rooms\n- **Join Rooms**: Join existing rooms via room ID or share link\n- **Room Permissions**: Owner, Admin, and Member role system\n- **Member Management**: Kick, promote, and demote members\n- **Room Sharing**: Generate shareable links for room access\n\n### User Experience\n\n- **Authentication**: Secure user authentication with better-auth\n- **Responsive Design**: Works on desktop and mobile devices\n- **Dark/Light Theme**: Toggle between themes\n- **Real-time Chat**: Group chat functionality within rooms\n- **Notifications**: Toast notifications for user actions\n- **Clear Canvas**: Admins can clear all shapes with confirmation modal\n\n---\n\n## 🛠 Technical Stack\n\n### Frontend\n\n- **Framework**: Next.js 15 with React 19\n- **Styling**: Tailwind CSS with custom component system\n- **State Management**: Zustand for global state\n- **Canvas**: RoughJS for hand-drawn style graphics\n- **UI Components**: Radix UI primitives with custom styling\n- **Forms**: React Hook Form with Zod validation\n\n### Backend\n\n- **API**: Next.js API routes with TypeScript\n- **Database**: PostgreSQL with Prisma ORM\n- **Authentication**: better-auth with session management\n- **WebSocket**: Socket.IO for real-time communication\n- **Validation**: Zod schemas for type-safe validation\n\n### Development\n\n- **Monorepo**: Turborepo for efficient building and development\n- **Package Manager**: pnpm with workspace support\n- **TypeScript**: Full TypeScript implementation\n- **Linting**: ESLint with custom configurations\n- **Database**: Prisma migrations and type generation\n\n---\n\n## 📁 Project Structure\n\n### apps/web (Main Application)\n\n- **Status**: - Full-stack Next.js application\n- **Features**:\n  - Complete room management system\n  - Real-time collaborative drawing\n  - User authentication and authorization\n  - Responsive UI with theme support\n  - Member management and permissions\n  - Room sharing functionality\n\n### apps/ws-server (WebSocket Server)\n\n- **Status**:  - Real-time communication server\n- **Features**:\n  - Socket.IO server for real-time events\n  - Room-based communication\n  - Drawing synchronization\n  - User presence tracking\n  - Authentication middleware\n\n\n### packages/db\n\n- **ORM**: Prisma with PostgreSQL\n- **Schema**: User, Room, RoomMember, shapes, and messages\n- **Migrations**: Complete database schema evolution\n- **Types**: Auto-generated TypeScript types\n\n### packages/schemas\n\n- **Validation**: Zod schemas for all data validation\n- **Types**: TypeScript types inferred from schemas\n- **Schemas**: User, Room, Drawing, and API validation schemas\n\n### packages/config, typescript-config, eslint-config\n\n- **Shared Configuration**: Centralized config for all packages\n- **TypeScript**: Consistent type checking across monorepo\n- **ESLint**: Shared linting rules and standards\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18 or higher\n- pnpm (recommended package manager)\n- PostgreSQL database\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/hit-7624/squad-draw.git\ncd squad-draw\n```\n\n2. Install dependencies:\n\n```bash\npnpm install\n```\n\n3. Set up environment variables:\n\n```bash\n# Copy environment files and configure\ncp apps/web/.env.example apps/web/.env.local\ncp apps/ws-server/.env.example apps/ws-server/.env\n```\n\n4. Set up the database:\n\n```bash\ncd packages/db\npnpm db:push\n```\n\n5. Start development servers:\n\n```bash\npnpm dev\n```\n\n### Development Commands\n\n```bash\n# Start all development servers\npnpm dev\n\n# Build all packages\npnpm build\n\n# Run linting\npnpm lint\n\n# Type checking\npnpm check-types\n\n# Format code\npnpm format\n```\n\n---\n\n## 🔧 Environment Configuration\n\n### Web App (.env.local)\n\n```env\nDATABASE_URL=\"postgresql://...\"\nBETTER_AUTH_SECRET=\"your-secret-key\"\nBETTER_AUTH_URL=\"http://localhost:3000\"\nNEXT_PUBLIC_WS_URL=\"http://localhost:3001\"\n```\n\n### WebSocket Server (.env)\n\n```env\nDATABASE_URL=\"postgresql://...\"\nPORT=3001\nALLOWED_ORIGINS=\"http://localhost:3000\"\n```\n\n---\n\n## 🎨 Usage\n\n1. **Create Account**: Sign up for a new account or sign in\n2. **Create Room**: Create a new drawing room\n3. **Invite Others**: Share the room link or ID with collaborators\n4. **Start Drawing**: Use the shape tools to draw on the canvas\n5. **Save Canvas**: Click the save button to download your drawing as a PNG image\n6. **Collaborate**: See real-time updates from other users\n7. **Manage Room**: Use admin features to manage members and settings\n\n---\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n---\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n---\n\n## 🔗 Links\n\n- **Repository**: [GitHub](https://github.com/hit-7624/squad-draw)\n- **Issues**: [GitHub Issues](https://github.com/hit-7624/squad-draw/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/hit-7624/squad-draw/discussions)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhit-7624%2Fsquad-draw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhit-7624%2Fsquad-draw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhit-7624%2Fsquad-draw/lists"}