JR Logo
Rack 'n' Bag
Updated Nov 2024Next.js

Rack 'n' Bag - Tournament Manager

Simple tournament tracker built while learning Next.js app router and TypeScript

Basic tournament management tool for cornhole games. Built to learn state management and data visualization in Next.js.

Build Key Features

  1. 01

    Tournament Setup

    Basic tournament creation with customizable formats. Uses local storage for data persistence.

    Tournament Setup
  2. 02

    Results Grid

    Simple match matrix showing game outcomes. Includes basic sorting and filtering.

    Results Grid
  3. 03

    Player Stats

    Basic statistics tracking including wins, losses and points difference.

    Player Stats
  4. 04

    Match Updates

    Real-time score entry and standings updates using React state management.

    Match Updates

Friction Challenges

  1. 1

    State Management

    Managing tournament data consistently across components. Implemented context-based state.

  2. 2

    Data Persistence

    Handling data storage and recovery with local storage. Added state migration handling.

  3. 3

    UI Updates

    Keeping all stats and standings in sync after score updates. Improved render optimization.

Takeaways Learnings

React Patterns

  • State management with context and reducers
  • Component optimization and render control

TypeScript Usage

  • Type definitions for complex tournament data
  • Generic components and utility types

UI Components

  • Accessible component patterns with Radix UI
  • Animation implementation with Framer Motion