roadkit/README.md

Beautiful Next.js roadmap website generator with full-screen kanban boards, dark/light mode, and static export

# 🚀 RoadKit

> **Beautiful Next.js roadmap website generator with full-screen kanban boards**

Generate stunning, responsive roadmap websites in seconds! Perfect for product teams, startups, and open source projects.

![RoadKit Preview](https://img.shields.io/badge/built%20with-Next.js-black?logo=next.js)
![Version](https://img.shields.io/npm/v/roadkit)
![License](https://img.shields.io/npm/l/roadkit)

## ✨ Features

- **🎨 Beautiful UI**: Modern kanban board layout with your custom theme colors
- **📱 Fully Responsive**: Perfect on mobile, tablet, and desktop
- **🌙 Dark/Light Mode**: Automatic theme switching with system preference
- **⚡ Full Screen Layout**: No wasted space - columns scale to screen width
- **📦 Static Export**: Deploy anywhere - GitHub Pages, Netlify, Vercel
- **🚀 Instant Updates**: Edit data and see changes immediately in dev mode
- **🎯 Zero Config**: Works perfectly out of the box

## 🚀 Quick Start

```bash
# Easiest way: Use bun create (recommended)
bun create roadkit my-awesome-roadmap

# Or with package runners
bunx roadkit my-awesome-roadmap
npx roadkit my-awesome-roadmap
yarn dlx roadkit my-awesome-roadmap
pnpm dlx roadkit my-awesome-roadmap

# Navigate and start
cd my-awesome-roadmap
bun run dev
```

Visit `http://localhost:3000` to see your beautiful roadmap!

## 📋 What You Get

- **Next.js 15** with App Router
- **TypeScript** fully configured
- **Tailwind CSS v4** with custom OKLCH colors
- **Shadcn/ui** components
- **10 Example Items** with emojis, priorities, and progress
- **Full-screen Kanban Layout** with internal column scrolling

## 🎨 Example Roadmap Items

Your generated project includes beautiful example data:

- 🚀 **Project Setup** (Done - 100%)
- 🎨 **Design System** (Done - 100%)
- ⚡ **Core Features** (In Progress - 75%)
- 🔐 **Authentication** (In Progress - 40%)
- 📱 **Mobile Optimization** (In Progress - 20%)
- 🧪 **Testing Suite** (Todo)
- ⚡ **Performance** (Todo)
- 📊 **Analytics** (Todo)
- 🚢 **Production Deploy** (Todo)
- 📖 **Documentation** (Todo)

## 📝 Customization

Edit your roadmap data in `src/data/roadmap-data.ts`:

```typescript
export const roadmapData = {
  items: [
    {
      id: "1",
      title: "🚀 Your Feature",
      description: "Description of your awesome feature",
      status: "in-progress",
      priority: "high",
      tags: ["frontend", "ux"],
      progress: 75
    }
    // ... add more items
  ],
  config: {
    metadata: {
      title: "My Project Roadmap",
      description: "Track our progress and upcoming features"
    }
  }
}
```

Changes appear instantly in development mode!

## 🌐 Deployment

### Static Export (GitHub Pages, Netlify, etc.)

```bash
bun run export
# Upload the 'dist/' folder to your static host
```

### Vercel/Netlify (SSR)

```bash
bun run build
bun run start
```

## 🛠 Development

```bash
# Development with hot reload (recommended)
bun run dev

# Build for production
bun run build

# Static export for hosting
bun run export

# Type checking
bun run type-check
```

## 📦 Project Structure

```
my-roadmap/
├── src/
│   ├── data/
│   │   └── roadmap-data.ts    # ✏️ Edit your roadmap here
│   └── types/
├── components/
│   └── kanban/                # Beautiful kanban components
├── app/
│   ├── globals.css           # Custom OKLCH theme colors
│   └── layout.tsx
└── dist/                     # Static export output
```

## 🎯 Perfect For

- **Product Roadmaps** - Show customers what's coming
- **Project Planning** - Internal team roadmaps
- **Open Source** - GitHub Pages deployment
- **Startups** - Investor and stakeholder updates
- **Portfolio** - Showcase project progress

## 🤝 Contributing

Found a bug or want a feature? [Open an issue](https://github.com/roadkit-cli/roadkit/issues) or submit a PR!

## 📄 License

MIT © [RoadKit](https://github.com/roadkit-cli/roadkit)

---

**Made with ❤️ for developers who need beautiful roadmaps fast**