{"id":46293814,"url":"https://github.com/slashgear/roadmap-maker","last_synced_at":"2026-03-10T00:10:21.386Z","repository":{"id":341696756,"uuid":"1167784282","full_name":"Slashgear/roadmap-maker","owner":"Slashgear","description":"Self-hosted roadmap builder with Gantt chart visualization. Built with Hono, Preact, SQLite and Bun.","archived":false,"fork":false,"pushed_at":"2026-03-04T07:50:55.000Z","size":154,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-04T13:28:07.230Z","etag":null,"topics":["bun","full-stack","gantt-chart","hono","preact","project-management","roadmap","self-hosted","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://roadmap.slashgear.dev","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/Slashgear.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-02-26T17:19:55.000Z","updated_at":"2026-03-04T07:49:38.000Z","dependencies_parsed_at":"2026-03-07T13:00:29.549Z","dependency_job_id":null,"html_url":"https://github.com/Slashgear/roadmap-maker","commit_stats":null,"previous_names":["slashgear/roadmap-maker"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/Slashgear/roadmap-maker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slashgear%2Froadmap-maker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slashgear%2Froadmap-maker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slashgear%2Froadmap-maker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slashgear%2Froadmap-maker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Slashgear","download_url":"https://codeload.github.com/Slashgear/roadmap-maker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Slashgear%2Froadmap-maker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30214578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T12:15:00.571Z","status":"ssl_error","status_checked_at":"2026-03-07T12:15:00.217Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["bun","full-stack","gantt-chart","hono","preact","project-management","roadmap","self-hosted","tailwindcss","typescript","vite"],"created_at":"2026-03-04T09:05:09.886Z","updated_at":"2026-03-07T13:00:32.327Z","avatar_url":"https://github.com/Slashgear.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# roadmap-maker\n\n**Gantt roadmap builder** — static (localStorage) or team (PostgreSQL + real-time SSE)\n\n[![CI](https://github.com/Slashgear/roadmap-maker/actions/workflows/ci.yml/badge.svg)](https://github.com/Slashgear/roadmap-maker/actions/workflows/ci.yml)\n[![Version](https://img.shields.io/github/package-json/v/Slashgear/roadmap-maker)](./package.json)\n[![License: MIT](https://img.shields.io/badge/License-MIT-purple.svg)](./LICENSE)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md)\n[![GitHub stars](https://img.shields.io/github/stars/Slashgear/roadmap-maker?style=social)](https://github.com/Slashgear/roadmap-maker/stargazers)\n\n[![Bun](https://img.shields.io/badge/Bun-1%2B-black?logo=bun\u0026logoColor=white)](https://bun.sh)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript\u0026logoColor=white)](https://typescriptlang.org)\n[![Built with Vite](https://img.shields.io/badge/Vite-6-646cff?logo=vite\u0026logoColor=white)](https://vitejs.dev)\n[![Preact](https://img.shields.io/badge/Preact-10-673ab8?logo=preact\u0026logoColor=white)](https://preactjs.com)\n[![Hono](https://img.shields.io/badge/Hono-4-e36002?logo=hono\u0026logoColor=white)](https://hono.dev)\n[![PostgreSQL](https://img.shields.io/badge/PostgreSQL-16-4169e1?logo=postgresql\u0026logoColor=white)](https://postgresql.org)\n[![Docker](https://img.shields.io/badge/Docker-ready-2496ed?logo=docker\u0026logoColor=white)](./Dockerfile)\n[![OpenAPI 3.0](https://img.shields.io/badge/OpenAPI-3.0-6ba539?logo=openapiinitiative\u0026logoColor=white)](./server/api/openapi.ts)\n\n![](./client/public/og-image.png)\n\nTwo build modes:\n\n| Mode                 | Storage                        | Use case                            |\n| -------------------- | ------------------------------ | ----------------------------------- |\n| **Static** (default) | `localStorage` in the browser  | Personal use, no server needed      |\n| **Team**             | PostgreSQL on the server + SSE | Team use, changes sync in real-time |\n\n---\n\n## Features\n\n- **Gantt chart visualization** — timeline view with month headers, week grid lines, and a live \"today\" marker\n- **Multiple roadmaps** — create and switch between as many roadmaps as you need\n- **Sections \u0026 tasks** — organize work into color-coded sections, each containing bar tasks or milestone markers\n- **5 task statuses** — Confirmed (green), In progress (blue), On hold (orange dashed), Critical (red), Done (gray)\n- **Notes per task** — freeform context attached to any task\n- **External links per task** — attach any URL (Jira ticket, GitHub issue, Linear item…) displayed as a clickable icon in the Gantt left column\n- **Export / Import JSON** — download any roadmap as `.json`, reimport it anywhere\n- **Persistent** — data survives tab and browser restarts via `localStorage`\n- **Self-hostable** — one Docker command, no external services required\n\n---\n\n## Getting started\n\n### Development\n\nPrerequisites: [Bun](https://bun.sh) \u003e= 1.0\n\n```bash\ngit clone https://github.com/your-org/roadmap-maker.git\ncd roadmap-maker\nbun install\nbun run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173).\n\n### Production build\n\n```bash\nbun run build   # outputs static files to ./public\nbun run preview # preview locally\n```\n\n### Docker Compose\n\nThe easiest way to run the app locally. Three services are defined — only `postgres` starts by default; the app services use [profiles](https://docs.docker.com/compose/profiles/) so you opt in explicitly.\n\n**Postgres only** (for development / unit tests):\n\n```bash\ndocker compose up -d\n```\n\n**Static app** — personal use, no auth, data in the browser:\n\n```bash\ndocker compose --profile static up\n# → http://localhost:8080\n```\n\n**Team app** — collaborative mode with PostgreSQL:\n\n```bash\nAUTH_TOKEN=my-secret docker compose --profile team up\n# → http://localhost:8080 — sign in with \"my-secret\"\n```\n\n`AUTH_TOKEN` is required — the compose file will refuse to start without it.\n\n### Docker (manual)\n\n```bash\ndocker build -t roadmap-maker .\ndocker run -p 8080:8080 roadmap-maker\n```\n\nOpen [http://localhost:8080](http://localhost:8080).\n\n---\n\n## Import / Export\n\nRoadmaps can be shared as `.json` files:\n\n- **Export** — click the \"Export\" button in the top bar to download the current roadmap\n- **Import** — click \"Import\" and select a `.json` file; it will be validated and merged (upsert by slug)\n\nSee the [`examples/`](./examples/) directory for ready-to-import roadmaps.\n\n---\n\n## Import from Jira / GitLab / CSV (AI skill)\n\nThe repo ships an [agent skill](./.agents/skills/roadmap-import/AGENTS.md) that converts any structured data source into a ready-to-import `.json` file.\n\n**Supported sources:**\n\n| Source       | What gets mapped                                                                             |\n| ------------ | -------------------------------------------------------------------------------------------- |\n| **CSV**      | Flexible column names — label, start, end, section, status, type, note                       |\n| **Jira**     | `summary` → label, `status` → status, `components` / `labels` → section, `duedate` → endDate |\n| **GitLab**   | `title`, `state`, `due_date`, `milestone`, `labels`                                          |\n| **Linear**   | `title`, `state`, `dueDate`, `team`, `project`                                               |\n| **Any JSON** | Paste a sample row — the skill infers the mapping                                            |\n\n**Usage with Claude Code:**\n\n```\n/roadmap-import\n```\n\nThen paste your CSV or JSON payload. The skill will:\n\n1. Show you the proposed field mapping before generating anything\n2. Map statuses to `confirmed / started / pending / critical / done`\n3. Group items into sections (by epic, label, milestone, or component)\n4. Assign section colors automatically\n5. Write a `roadmap-export.json` file you can drag into the Import button\n\n**Example — from a CSV:**\n\n```\n/roadmap-import\n\nlabel,start,end,section,status\n\"Homepage redesign\",2026-01-05,2026-01-19,Design,In Progress\n\"API migration\",2026-01-12,2026-02-09,Tech,Done\n\"Go-live\",2026-02-10,2026-02-10,Milestones,At Risk\n```\n\nThe skill handles common edge cases: non-ISO date formats, missing start/end dates, identical start/end → auto-milestone, and merges duplicate section names.\n\n---\n\n## Examples\n\nThree example roadmaps are available in [`examples/`](./examples/). Import them directly from the app.\n\n### `design-system.json` — Design System 2.0\n\nA 7-month roadmap for rebuilding a component library from scratch — audit, foundations, implementation, and migration.\n\n|                |                                                                                                     |\n| -------------- | --------------------------------------------------------------------------------------------------- |\n| **Period**     | May → Nov 2026                                                                                      |\n| **Sections**   | Milestones, Audit \u0026 Foundations, Design, Engineering                                                |\n| **Highlights** | Alpha → Beta → v1 sunset (critical) → public launch, dark mode (pending), open-source release (TBD) |\n\n**Sections:**\n\n- 🏁 **Milestones** — kickoff, alpha, beta, v1 hard sunset deadline (critical), public launch, OSS token release (TBD)\n- 🔍 **Audit \u0026 Foundations** — component inventory, design token architecture, WCAG 2.2 audit, migration guide\n- 🎨 **Design** — new visual language, Figma kit, navigation patterns, data viz, dark mode (pending)\n- ⚙️ **Engineering** — monorepo setup, core components, Storybook + visual regression, codemods, docs site (Starlight)\n\n---\n\n### `saas-launch.json` — Lancement d'un produit SaaS\n\nEnd-to-end roadmap for taking a SaaS product from discovery to general availability.\n\n|                |                                                                                            |\n| -------------- | ------------------------------------------------------------------------------------------ |\n| **Period**     | Mar → Aug 2026                                                                             |\n| **Sections**   | Milestones, Discovery \u0026 Framing, Design \u0026 UX, Tech                                         |\n| **Highlights** | Beta milestone, Product Hunt launch, Stripe billing integration, post-launch API (pending) |\n\n**Sections:**\n\n- 🏁 **Milestones** — closed beta, Product Hunt, SaaStr conference (TBD), GA launch\n- 🗺️ **Discovery** — user research (15 interviews), MVP scoping, technical architecture\n- 🎨 **Design** — wireframes, design system, high-fidelity mockups, onboarding, marketing landing page\n- ⚙️ **Tech** — auth, core feature sprints, Stripe billing, QA, performance, public API v1 (pending)\n\n---\n\n### `mobile-app.json` — Développement d'une app mobile v1.0\n\nSix-month roadmap for building and shipping a mobile app on iOS and Android.\n\n|                |                                                                                               |\n| -------------- | --------------------------------------------------------------------------------------------- |\n| **Period**     | Apr → Oct 2026                                                                                |\n| **Sections**   | Milestones, Discovery \u0026 Specs, Design \u0026 UX, Tech                                              |\n| **Highlights** | Alpha → Beta → Store submission → Launch milestones, offline sync, post-launch v1.1 (pending) |\n\n**Sections:**\n\n- 🏁 **Milestones** — alpha, TestFlight/Play beta, App Store submission, public launch, v1.1 (TBD)\n- 🗺️ **Discovery** — stack decision (React Native vs Flutter), user stories, MVP specs\n- 🎨 **Design** — UX research, wireframes, mobile design system (HIG + Material 3), store assets\n- ⚙️ **Tech** — auth, core sprints, push notifications, offline mode + sync, QA, beta bugfixes\n\n---\n\n## Data format\n\nRoadmaps are plain JSON. The schema is validated on import using [Zod](https://zod.dev).\n\n```jsonc\n{\n  \"id\": \"unique-id\",\n  \"slug\": \"my-roadmap\", // used for hash routing (#my-roadmap)\n  \"title\": \"My Roadmap\",\n  \"subtitle\": \"Q1 2026\", // optional\n  \"startDate\": \"2026-01-01\", // YYYY-MM-DD\n  \"endDate\": \"2026-06-30\",\n  \"sections\": [\n    {\n      \"id\": \"sec-1\",\n      \"roadmapId\": \"unique-id\",\n      \"label\": \"🎨 Design\",\n      \"color\": \"cyan\", // orange | purple | cyan | green | pink | blue | amber | indigo | lime | rose | teal | slate\n      \"position\": 0,\n      \"tasks\": [\n        {\n          \"id\": \"task-1\",\n          \"sectionId\": \"sec-1\",\n          \"label\": \"Homepage redesign\",\n          \"startDate\": \"2026-01-05\",\n          \"endDate\": \"2026-01-19\",\n          \"status\": \"confirmed\", // confirmed | started | pending | critical | done\n          \"type\": \"bar\", // bar | milestone\n          \"note\": \"Optional context, decisions, links…\",\n          \"externalLink\": \"https://yourorg.atlassian.net/browse/PROJ-42\", // optional URL (Jira, GitHub, Linear…)\n          \"position\": 0,\n        },\n      ],\n    },\n  ],\n}\n```\n\n### Colors\n\n12 colors available for sections:\n\n`orange` `purple` `cyan` `green` `pink` `blue` `amber` `indigo` `lime` `rose` `teal` `slate`\n\n### Statuses\n\n| Value       | Color  | Appearance          | Meaning                        |\n| ----------- | ------ | ------------------- | ------------------------------ |\n| `confirmed` | Green  | Solid fill          | Planned and confirmed          |\n| `started`   | Blue   | Solid fill          | Currently in progress          |\n| `pending`   | Orange | Dashed, translucent | On hold or awaiting validation |\n| `critical`  | Red    | Solid fill          | Hard deadline, must not slip   |\n| `done`      | Gray   | Solid fill          | Completed                      |\n\n---\n\n## Stack\n\n|                  | Technology                                                                                                       |\n| ---------------- | ---------------------------------------------------------------------------------------------------------------- |\n| Frontend         | [Preact](https://preactjs.com) + [TypeScript](https://typescriptlang.org)                                        |\n| Bundler          | [Vite](https://vitejs.dev)                                                                                       |\n| Styles           | [Tailwind CSS](https://tailwindcss.com)                                                                          |\n| Validation       | [Zod](https://zod.dev)                                                                                           |\n| Runtime / build  | [Bun](https://bun.sh)                                                                                            |\n| Server           | [Hono](https://hono.dev) (static serving + team API)                                                             |\n| DB (team mode)   | [PostgreSQL](https://postgresql.org) via [`postgres`](https://github.com/porsager/postgres) (optimistic locking) |\n| Real-time (team) | Server-Sent Events (SSE)                                                                                         |\n| Tests            | [Vitest](https://vitest.dev) + real PostgreSQL (Docker)                                                          |\n\n---\n\n## Team mode\n\nThe team build adds a REST API backed by PostgreSQL and a real-time SSE stream. Multiple users can edit the same roadmap simultaneously — changes propagate to all connected clients within ~50 ms.\n\n### How it works\n\n- **Auth**: shared `AUTH_TOKEN` env var → session cookie (HttpOnly, 24h TTL)\n- **Persistence**: PostgreSQL with foreign key cascades and optimistic locking\n- **Optimistic locking**: every entity has a `version` integer; PUT requests must include the current version. A mismatch returns `409 Conflict` with the server's current state.\n- **Real-time**: `GET /api/roadmaps/:slug/events` is an SSE stream. Every mutation broadcasts a typed event (`task_added`, `section_updated`…) to all connected clients.\n- **API docs**: Swagger UI at `/api/docs` (OpenAPI 3.0 spec at `/api/openapi.json`)\n\n### Build \u0026 run locally\n\n```bash\n# 1. Start a local PostgreSQL instance\ndocker compose up -d\n\n# 2. Build the team frontend\nbun run build:team          # outputs to ./public-team\n\n# 3. Start the server\nDATABASE_URL=postgres://roadmaps:roadmaps@localhost:5432/roadmaps \\\n  AUTH_TOKEN=my-secret \\\n  STORAGE=postgres \\\n  bun run server/index.ts\n# → http://localhost:8080 — enter token \"my-secret\" to sign in\n```\n\n### Docker (team)\n\n```bash\ndocker build -f Dockerfile.team -t roadmap-maker-team .\ndocker run -p 8080:8080 \\\n  -e AUTH_TOKEN=my-secret \\\n  -e DATABASE_URL=postgres://user:pass@your-db-host:5432/roadmaps \\\n  roadmap-maker-team\n```\n\nNo volume needed — the database lives in PostgreSQL.\n\n---\n\n## Deployment\n\n### Any static host — static mode (Netlify / Vercel / Cloudflare Pages)\n\n```bash\nbun run build   # outputs static files to ./public\n```\n\nUpload `./public` to your host. Framework settings (if needed):\n\n| Setting                    | Value                       |\n| -------------------------- | --------------------------- |\n| Build command              | `bun run build`             |\n| Output / publish directory | `public`                    |\n| Node version               | any (Bun handles the build) |\n\n### Docker — static mode\n\n```bash\ndocker build -t roadmap-maker .\ndocker run -p 8080:8080 roadmap-maker\n```\n\n### Docker — team mode\n\n```bash\ndocker build -f Dockerfile.team -t roadmap-maker-team .\ndocker run -p 8080:8080 \\\n  -e AUTH_TOKEN=secret \\\n  -e DATABASE_URL=postgres://user:pass@your-db-host:5432/roadmaps \\\n  roadmap-maker-team\n```\n\n---\n\n### Scaleway — static mode (Serverless Container)\n\nThe static build is a single Docker image with no external dependencies — ideal for a Scaleway Serverless Container.\n\n```bash\n# 1. Build \u0026 push to Scaleway Container Registry\ndocker build -t rg.fr-par.scw.cloud/\u003cnamespace\u003e/roadmap-maker:latest .\ndocker push rg.fr-par.scw.cloud/\u003cnamespace\u003e/roadmap-maker:latest\n```\n\nThen in the [Scaleway console](https://console.scaleway.com/containers/namespaces):\n\n1. Create a **Container namespace** in your region\n2. Create a new **Serverless Container** pointing to your image\n3. Set port `8080`, min scale `0` (scales to zero when idle)\n4. Deploy — your app is live at the provided URL\n\nNo environment variables required. Data lives in the user's browser (`localStorage`).\n\n---\n\n### Scaleway — team mode (Serverless Container + Serverless SQL)\n\nBoth the container and the database scale to zero — you pay only for actual usage. No infrastructure to manage, no persistent volumes.\n\n```\nBrowser → Serverless Container (Hono) → Serverless SQL Database (PostgreSQL)\n```\n\n#### Step 1 — Create a Serverless SQL Database\n\nIn the [Scaleway console](https://console.scaleway.com/serverless-db/instances):\n\n1. Create a **Serverless SQL Database** (PostgreSQL 16, region `fr-par`)\n2. Create a user with read/write permissions on the `roadmaps` database\n3. Copy the connection string — it looks like:\n   ```\n   postgres://roadmaps:\u003cpassword\u003e@\u003cid\u003e.pg.serverless.fr-par.scw.cloud:5432/roadmaps?sslmode=require\n   ```\n\nThe database scales to zero automatically when idle — no running costs between uses.\n\n#### Step 2 — Build \u0026 push the team image\n\n```bash\n# Authenticate with Scaleway Container Registry\ndocker login rg.fr-par.scw.cloud -u nologin -p \u003cSCW_SECRET_KEY\u003e\n\n# Build the team image\ndocker build -f Dockerfile.team \\\n  -t rg.fr-par.scw.cloud/\u003cnamespace\u003e/roadmap-maker-team:latest .\n\ndocker push rg.fr-par.scw.cloud/\u003cnamespace\u003e/roadmap-maker-team:latest\n```\n\n#### Step 3 — Deploy the container\n\nIn the [Scaleway console](https://console.scaleway.com/containers/namespaces):\n\n1. Create a new **Serverless Container** using the team image\n2. Set port `8080`\n3. Add the environment variables below (mark secrets as confidential):\n   - `STORAGE` = `postgres`\n   - `DATABASE_URL` = `postgres://roadmaps:\u003cpass\u003e@\u003cid\u003e.pg.serverless.fr-par.scw.cloud:5432/roadmaps?sslmode=require`\n   - `AUTH_TOKEN` = a strong random secret (e.g. `openssl rand -hex 32`)\n4. Set **min scale to `1`** if you need persistent SSE connections (scale-to-zero closes open streams)\n5. Deploy\n\nYour team app will be available at the provided `*.containers.fnc.fr-par.scw.cloud` URL.\n\n\u003e **Note on cold starts**: with min scale `0`, the first request after an idle period will wake both the container and the Serverless SQL Database. Expect a cold start of a few seconds. Set min scale to `1` on the container for instant response (the database wakes independently on first query).\n\n---\n\n## Contributing\n\nContributions are welcome. Please read [CONTRIBUTING.md](./CONTRIBUTING.md) before opening a pull request.\n\n---\n\n## License\n\nMIT — see [LICENSE](./LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslashgear%2Froadmap-maker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslashgear%2Froadmap-maker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslashgear%2Froadmap-maker/lists"}