Astro Feature Map

A simple, lightweight, and free-to-use feedback tool.

English | 日本語 | Public Roadmap

---

A simple feedback board where users and developers propose and vote on features.

graph LR
    IDEAS[Ideas] --> P
    
    subgraph AFM [Astro Feature Map]
        P[Propose] --> R{Review}
        R --> V[Vote]
    end
    
    V --> D[Develop]

    style AFM fill:#f8fafc,stroke:#334155,stroke-width:1px
    style P fill:#3b82f6,stroke:#1e3a8a,color:#fff
    style R fill:#3b82f6,stroke:#1e3a8a,color:#fff
    style V fill:#3b82f6,stroke:#1e3a8a,color:#fff
    style IDEAS fill:#f1f5f9,stroke:#475569
    style D fill:#10b981,stroke:#064e3b,color:#fff

Loading

---

Key Features

• 🗳️ Frictionless Voting: No accounts or login required. Strict duplicate prevention via IP/Fingerprint.
• 🚀 Quick Setup: No external OAuth or 3rd-party API keys needed. Deploy with just environment variables.
• ⚡ Edge Powered: Sub-second global performance via Cloudflare D1 and Pages.
• 🗺️ Map Switching: Unique column-based "Map" view and traditional "Roadmap" list view.
• 📝 Markdown Native: Full markdown support with live preview for descriptions.
• 🌍 Multilingual: Automatic support for English and Japanese (en, ja).
• 📊 Chart Visualization: Built-in daily vote tracking and trend charts.
• 🌓 Adaptive Theme: Automatic dark/light mode detection with manual override.

---

Tech Stack

Built with modern, high-performance tools optimized for the Edge:

• Frontend: SvelteKit (Svelte 5) + adapter-static
• Backend API: Hono on Cloudflare Pages Functions
• Database: Cloudflare D1 (SQLite at the Edge)
• Styling: Tailwind CSS
• ORM: Drizzle ORM

---

Quick Start

1. Prerequisites

• Node.js 18+
• pnpm
• Wrangler CLI

2. Setup & Installation

pnpm install
pnpm db:migrate:local
pnpm dev

3. Environment Variables

Create a .dev.vars file in the root:

# Dashboard login password
ADMIN_TOKEN=your-secure-token

# Internal API authentication key
DEVELOPER_API_KEY=your-dev-api-key

# Random salt for vote duplicate prevention (IP/Fingerprint hashing)
FINGERPRINT_SALT=your-random-salt

---

Customization

Astro Feature Map is designed to be fully customizable at build-time with zero runtime overhead.

1. Branding & Identity

Copy the example configuration to the active path:

cp site.config.example.ts src/lib/site-config.ts

Open src/lib/site-config.ts to customize:

• appName: Your product's name (supports localized Japanese overrides).
• appDescription: Short description for SEO and Hero section.
• appIcon: Path to your custom logo.

2. Custom Map Categories

Define the columns for your "Map" view by updating the categories array. Each category requires:

• id: Unique identifier (must match database group).
• label: Display name (localized).
• color: Theme color for the column header.

3. Feature Toggles

Fine-tune application behavior in the features object:

• allowPublicProposals: Enable/disable user-submitted suggestions.
• showVoteCounts: Control visibility of total votes and disable public voting.
• defaultViewMode: Choose between map or roadmap for the landing page.

---

Security Model

• Token-based Admin: No complex OAuth or database-backed user management. The dashboard is secured by a single ADMIN_TOKEN.
• API Protection: The DEVELOPER_API_KEY allows for programmatic management (CLI/CI) and protects sensitive endpoints like category management.
• Frictionless Voting Security: We use a combination of IP hashing and browser fingerprinting with a server-side FINGERPRINT_SALT to prevent double-voting without requiring user accounts.
• Zero Secrets in Repo: All sensitive keys are managed via environment variables and Cloudflare Secrets.

---

Deployment

Deploy to Cloudflare Pages in seconds:

1. Create D1: pnpm wrangler d1 create astro-feature-map
2. Setup Config: cp wrangler.toml.example wrangler.toml and add your database_id.
3. Migrate: pnpm db:migrate:prod
4. Deploy: pnpm run pages:deploy

---

License

MIT