🎰 Scrum Machine

A real-time collaborative planning poker application for agile teams

🎯 Overview

Scrum Machine is a modern, real-time planning poker application designed for agile development teams. It provides an interactive and engaging way for teams to estimate story points collaboratively, with beautiful animations and a jackpot feature that celebrates when the team reaches consensus.

✨ Features

🎮 Core Functionality

• Real-time Voting: Instant synchronization across all team members
• Multiple Point Systems: Support for Fibonacci, T-shirt sizes, and custom voting scales
• Room-based Sessions: Create private rooms for different teams or projects
• Spectator Mode: Allow team members to observe without voting

🛠️ Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• DaisyUI - Component library for Tailwind

Backend & Real-time

• PartyKit - Real-time multiplayer backend
• tRPC - End-to-end typesafe APIs
• Zod - TypeScript-first schema validation
• Zustand - State management

Development Tools

• ESLint - Code linting
• Prettier - Code formatting
• Docker - Containerization

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Docker (optional, for containerized deployment)

Installation

1. Clone the repository

   git clone https://github.com/fcoelho84/scrum-machine.git
   cd scrum-machine

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local

   Configure the following variables:

   NEXT_PUBLIC_PARTYKIT_URL=your-partykit-url
   NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Start the development server

   npm run dev

5. Start PartyKit server (in a separate terminal)

   npm run party

6. Open your browser Navigate to http://localhost:3000

Docker Deployment

# Build and run with Docker Compose
docker-compose up --build

🎮 How to Use

1. Create a Room: Start a new planning session
2. Share Room ID: Invite team members using the room code
3. Configure Settings: Choose voting scale, theme, and other preferences
4. Start Voting: Team members vote on story points
5. Reveal Results: Show all votes simultaneously
6. Celebrate Consensus: Enjoy the jackpot animation when everyone agrees!

🏗️ Project Structure

scrum-machine/
├── src/
│   ├── components/          # Reusable UI components
│   ├── hooks/              # Custom React hooks
│   ├── pages/              # Next.js pages and API routes
│   ├── server/             # tRPC server setup
│   ├── styles/             # Global styles
│   └── utils/              # Utility functions
├── party/                  # PartyKit server code
│   ├── message/            # Message handling strategies
│   └── types.ts            # Shared types
├── public/                 # Static assets
└── docker-compose.yml      # Docker configuration

🎨 Design

The application was designed using Figma with a focus on:

• Gamification: Making estimation fun and engaging
• Accessibility: Clear visual feedback and intuitive interactions
• Performance: Smooth animations and real-time updates

View Figma Prototype

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ for agile teams everywhere