{"id":28373405,"url":"https://github.com/msaeedsaeedi/archboard","last_synced_at":"2025-07-23T23:33:23.940Z","repository":{"id":294860452,"uuid":"988199048","full_name":"msaeedsaeedi/ArchBoard","owner":"msaeedsaeedi","description":"ArchBoard is a full-stack web application for creating and collaborating on software architecture diagrams","archived":false,"fork":false,"pushed_at":"2025-06-13T16:25:59.000Z","size":202,"stargazers_count":1,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-13T17:36:59.474Z","etag":null,"topics":["angular","nestjs","planning","whiteboard"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/msaeedsaeedi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-05-22T07:44:32.000Z","updated_at":"2025-06-13T16:13:51.000Z","dependencies_parsed_at":"2025-05-22T13:02:37.347Z","dependency_job_id":"151877ad-0f81-4e9d-8f39-68ceb7c5a9d8","html_url":"https://github.com/msaeedsaeedi/ArchBoard","commit_stats":null,"previous_names":["msaeedsaeedi/archboard"],"tags_count":0,"template":false,"template_full_name":"msaeedsaeedi/FullStack-Template","purl":"pkg:github/msaeedsaeedi/ArchBoard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaeedsaeedi%2FArchBoard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaeedsaeedi%2FArchBoard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaeedsaeedi%2FArchBoard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaeedsaeedi%2FArchBoard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msaeedsaeedi","download_url":"https://codeload.github.com/msaeedsaeedi/ArchBoard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaeedsaeedi%2FArchBoard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261278200,"owners_count":23134658,"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","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":["angular","nestjs","planning","whiteboard"],"created_at":"2025-05-29T19:38:55.794Z","updated_at":"2025-07-23T23:33:23.929Z","avatar_url":"https://github.com/msaeedsaeedi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ArchBoard\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![Node.js](https://img.shields.io/badge/Node.js-22-green)](https://nodejs.org)\n[![PNPM](https://img.shields.io/badge/PNPM-9.15.1-orange)](https://pnpm.io)\n\nArchBoard is a full-stack web application for creating and collaborating on software architecture diagrams. Powered by a **NestJS** backend and **Angular 19** frontend, it uses **PostgreSQL** (migrating from SQLite) with **Prisma** for data persistence, **Konva.js** for diagram rendering, **Socket.io** for real-time collaboration, and **PrimeNg** with **Tailwind CSS** for a sleek UI. From user authentication to diagram exports, ArchBoard streamlines architecture design for developers, architects, and product managers.\n\n## Table of Contents\n\n- [Architecture](#architecture)\n- [Features](#features)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Running the Application](#running-the-application)\n- [Usage](#usage)\n- [Database Schema](#database-schema)\n- [Contributing](#contributing)\n  - [Reporting Issues](#reporting-issues)\n  - [Working on Issues](#working-on-issues)\n  - [Submitting Pull Requests](#submitting-pull-requests)\n- [License](#license)\n\n## Architecture\n\nArchBoard is built with a modular client-server architecture:\n\n- **Backend** (`apps/backend`): A **NestJS** server handling authentication (local and Google OAuth with JWT), board management, diagram state, and real-time collaboration. It uses **Prisma** to interact with a **PostgreSQL** database (migrating from SQLite) and **Socket.io** for real-time canvas syncing, cursor tracking, and comments. REST APIs (e.g., `/auth/login`, `/boards`) manage persistent operations.\n- **Frontend** (`apps/frontend`): An **Angular 19** application delivering a responsive UI for authentication, board management, and diagram editing. **Konva.js** enables drag-and-drop diagrams, connections, and infinite canvas features. **PrimeNg** components and **Tailwind CSS** provide a modern, accessible interface. The frontend uses HTTP for API calls and Socket.io for real-time updates.\n- **Infrastructure**: **Docker** and **docker-compose** ensure consistent environments. PostgreSQL runs as a containerized service for development and production.\n\n## Features\n\n- **Authentication (v0.1.0)**: Local signup/login and Google OAuth with JWT sessions, stored in PostgreSQL via Prisma.\n- **Board Management (v0.2.0)**: Create, edit, delete, and share boards with collaborators (Owner, Editor, Viewer roles).\n- **Diagram Editor (v0.3.0)**: Drag-and-drop components (microservices, databases, etc.), create connections, snap-to-grid, zoom/pan infinite canvas, and delete components using Konva.js.\n- **Real-Time Collaboration (v0.4.0)**: Sync canvas changes, track cursors, and add comments in real-time with Socket.io.\n- **Export \u0026 Presentation (v0.5.0)**: Export diagrams to PNG, SVG, and PDF (via `jsPDF`); presentation mode for full-screen viewing.\n- **UI**: Responsive Angular frontend with PrimeNg and Tailwind CSS, supporting dark mode.\n- **Database**: PostgreSQL with Prisma ORM, using JSONB for flexible board state storage.\n- **Testing**: Jest for backend, Karma/Jasmine for frontend.\n- **Code Quality**: ESLint and Prettier for consistency.\n\n## Getting Started\n\n### Prerequisites\n\n- **Node.js**: v22+\n- **PNPM**: v9.15.1+ (`npm install -g pnpm`)\n- **Docker** \u0026 **Docker Compose**: For containerized services\n- **Git**: For cloning the repo\n\n### Installation\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/msaeedsaeedi/archboard.git\n   cd archboard\n   ```\n\n2. Install dependencies:\n   ```bash\n   pnpm install\n   ```\n\n3. Set up environment variables:\n   - Copy `.env.example` to `.env`.\n   - Update `.env`\n\n### Running the Application\n\n#### Development Mode\nRun frontend, backend, and Socket.io with hot-reloading:\n```bash\npnpm dev\n```\n- Backend: `http://localhost:3001`\n- Frontend: `http://localhost:4200`\n\n#### Production Mode\nBuild and run with Docker Compose:\n```bash\npnpm docker:build\npnpm docker:start\n```\n- Access at `http://localhost:80`.\n\n#### Stop Docker\n```bash\npnpm docker:stop\n```\n\n## Contributing\n\nContributions are welcome! Here’s how to get involved:\n\n### Reporting Issues\n\n1. Check [Issues](https://github.com/msaeedsaeedi/archboard/issues) for duplicates.\n2. Open a new issue using the template in `.github/ISSUE_TEMPLATE/`.\n3. Provide a clear title, description, reproduction steps, and logs/screenshots.\n\n### Working on Issues\n\n1. Pick an issue from [Issues](https://github.com/msaeedsaeedi/archboard/issues).\n2. Comment to claim it and avoid overlap.\n3. Fork the repo and create a branch:\n   ```bash\n   git checkout -b feature/issue-\u003cnumber\u003e\n   ```\n4. Make changes, adhere to code style (`pnpm lint`, `pnpm format`).\n5. Add/update tests (`pnpm test`).\n\n### Submitting Pull Requests\n\n1. Commit with clear messages:\n   ```bash\n   git commit -m \"fix(issue-\u003cnumber\u003e): \u003cdescription\u003e\"\n   ```\n2. Push to your fork:\n   ```bash\n   git push origin feature/issue-\u003cnumber\u003e\n   ```\n3. Open a PR against `main`, referencing the issue (e.g., `Fixes #123`).\n4. Ensure CI passes and address reviewer feedback.\n\n## License\n\n[MIT License](LICENSE) - see the LICENSE file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsaeedsaeedi%2Farchboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsaeedsaeedi%2Farchboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsaeedsaeedi%2Farchboard/lists"}