Website for Brackt.com
Find a file
Chris Parsons 9ed0282fd0
New design (#309)
* Redesign home page with new layout and component system

- Two-column layout (My Leagues 2/3, Upcoming Events 1/3) with mobile stack
- LeagueRow: square avatar, gradient draft highlight, rank/points display, progress bar
- MyLeaguesCard, CreateLeagueCard with shared SectionCardHeader
- UpcomingEventsCard: vertical timeline with grouped multi-league events
- Shared gradient system: BracktGradients SVG defs, GradientIcon wrapper, brand.ts constants
- Button default variant updated to green→cyan gradient
- Navbar: plain nav links with gradient hover, support/admin icon buttons
- Accessibility fixes: semantic h2 headings, aria-label on LeagueAvatar and nav elements
- Storybook stories for all new components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Responsive league row layout and mobile polish

- League rows stack avatar+name on top, stats full-width below on mobile
- Stats spread to right side on sm+ screens with border separator on mobile
- Tighter padding on mobile (px-3/py-3), full padding on sm+
- Card headers and content use px-3 sm:px-6 to reduce mobile gutters
- Two-column home layout deferred to lg breakpoint (tablet gets stacked)
- Active leagues sorted by completion percentage descending
- Default rank 1 / 0 points for active leagues with no scoring events yet
- Fix ordinal bug for 11th/12th/13th; add aria-labels to rank change indicators
- Remove dead StatDivider className prop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Improve claude file.

* Add StandingsPreview card component with podium row styling

- New StandingsPreview component with gold/silver/bronze row tints for
  top 3, team avatar, and LeagueRow-style stat columns (Ranking + Points)
  with rank and 7-day point change indicators
- Fix GradientIcon in Storybook by adding BracktGradients decorator to
  preview.tsx (renamed from .ts to support JSX)
- Fix degenerate SVG gradient on horizontal strokes by switching
  BracktGradients to gradientUnits="userSpaceOnUse" with Lucide-space
  coordinates (0→24)
- Revert erroneous fill: url(#gradient) from GradientIcon; stroke-only
  fix was sufficient once gradientUnits was corrected

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update components on league homepage.

* Finish up league page styling.

* Work on standings page.

* Add story for RecentScoresCard

* Update Point Progression Chart.

* Sort point progression legend by ranking and add team links to standings rows

* Fix standings discrepancy on change.

* Create draft cell component.

* Update draft board page

* Draft room improvements.

* Update some draft room styling.

* Fix context menu missing.

* Move tab navigation and autodraft to header row, narrow sidebar

* Virtualize available participants list, memoize draft room props

Adds @tanstack/react-virtual to replace separate mobile/desktop lists
with a single unified virtual scroll loop. Also memoizes miniDraftGrid
and availableParticipantsSectionProps, and switches pick lookup from
Array.find to a Map for O(1) access.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update draft room UI.

* More draft room fixes.

* Draft room tweaks.

* Fix Rosters page.

* Queue Section fixes.

* Mobile Draft fixes.

* Fix draft board page.

* Create bracket look.

* Bracket work.

* Finish bracket page.

* Homepage initial styling

* homepage copy

* Add privacy policy. Fixes #88.

* how to play copy

* rules copy

* Fix brackets on homepage.

* Add footer to website.

* Glow on dots.

* Landing page copy.

* Fix sidebar.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 13:14:55 -07:00
.claude Update AI memory for token usage. 2026-04-12 13:52:05 -07:00
.github/workflows Fix migration check in deploy script to use reliable exit code (#267) 2026-04-06 00:44:04 -04:00
.storybook New design (#309) 2026-04-23 13:14:55 -07:00
.vscode feat: add Sentry error monitoring (#132) 2026-03-10 23:35:33 -07:00
app New design (#309) 2026-04-23 13:14:55 -07:00
cypress Fix oxlint warnings: no-shadow, consistent-function-scoping, no-non-null-assertion, and others (#196) 2026-03-21 10:59:51 -07:00
database New design (#309) 2026-04-23 13:14:55 -07:00
docs New design (#309) 2026-04-23 13:14:55 -07:00
drizzle New design (#309) 2026-04-23 13:14:55 -07:00
plans Update claude.md to push more tests. (#84) 2026-03-07 22:31:04 -08:00
public New design (#309) 2026-04-23 13:14:55 -07:00
scripts Add PgBouncer connection pooling support for Vultr managed PostgreSQL (#271) 2026-04-06 17:15:18 -04:00
server Add PgBouncer connection pooling support for Vultr managed PostgreSQL (#271) 2026-04-06 17:15:18 -04:00
.dockerignore Initial commit from create-react-router 2025-10-10 23:04:50 -07:00
.env.example Add PgBouncer connection pooling support for Vultr managed PostgreSQL (#271) 2026-04-06 17:15:18 -04:00
.gitignore feat: batch qualifying results entry (#290) 2026-04-12 14:52:22 -07:00
.nvmrc Optimize GitHub Actions CI/CD pipeline (#252) 2026-04-01 00:59:21 -07:00
.oxlintrc.json Replace console.* with structured logger, fix no-inferrable-types (closes #98) (#199) 2026-03-21 13:41:39 -07:00
AGENTS.md New design (#309) 2026-04-23 13:14:55 -07:00
CLAUDE.md New design (#309) 2026-04-23 13:14:55 -07:00
components.json feat: add theme system with dark mode support and navbar component 2025-10-10 23:30:26 -07:00
cypress.config.js ci: add test job to GitHub workflow and setup testing dependencies 2025-10-21 12:47:11 -07:00
docker-compose.yml feat: add FIFA World Cup 48-team bracket template with group stage and projected scoring 2026-02-14 22:30:12 -08:00
Dockerfile Decouple database migrations from server startup (#265) 2026-04-06 00:07:36 -04:00
drizzle.config.ts Add PgBouncer connection pooling support for Vultr managed PostgreSQL (#271) 2026-04-06 17:15:18 -04:00
instrument.server.mjs Filter unnecessary sentry css and js errors. 2026-03-15 10:24:57 -07:00
package-lock.json New design (#309) 2026-04-23 13:14:55 -07:00
package.json New design (#309) 2026-04-23 13:14:55 -07:00
plan.md Add implementation plan for commissioner-without-team feature (#6) 2026-02-20 08:45:09 -08:00
react-router.config.ts Add oxlint linting setup with zero errors (#194) 2026-03-21 09:44:05 -07:00
README.md Initial commit from create-react-router 2025-10-10 23:04:50 -07:00
server.ts Decouple database migrations from server startup (#265) 2026-04-06 00:07:36 -04:00
TESTING.md ci: add test job to GitHub workflow and setup testing dependencies 2025-10-21 12:47:11 -07:00
tsconfig.json refactor: update import paths to use absolute paths for better clarity and maintainability 2025-10-24 21:20:19 -07:00
tsconfig.node.json Add oxlint linting setup with zero errors (#194) 2026-03-21 09:44:05 -07:00
tsconfig.server.json Add oxlint linting setup with zero errors (#194) 2026-03-21 09:44:05 -07:00
tsconfig.vite.json Add oxlint linting setup with zero errors (#194) 2026-03-21 09:44:05 -07:00
vite.config.ts New design (#309) 2026-04-23 13:14:55 -07:00
vitest.config.ts Fix test:run failing in CI due to missing Playwright browser (#246) 2026-03-30 14:42:23 -07:00
vitest.shims.d.ts Install Storybook with React Router Vite plugin fix, closes #229 (#243) 2026-03-29 15:20:48 -07:00

Welcome to React Router!

A modern, production-ready template for building full-stack React applications using React Router.

Features

  • 🚀 Server-side rendering
  • Hot Module Replacement (HMR)
  • 📦 Asset bundling and optimization
  • 🔄 Data loading and mutations
  • 🔒 TypeScript by default
  • 🎉 TailwindCSS for styling
  • 💾 PostgreSQL + DrizzleORM
  • 📖 React Router docs

Getting Started

Installation

Install the dependencies:

npm install

Development

Copy .env.example to .env and provide a DATABASE_URL with your connection string.

Run an initial database migration:

npm run db:migrate

Start the development server with HMR:

npm run dev

Your application will be available at http://localhost:5173.

Building for Production

Create a production build:

npm run build

Deployment

Docker Deployment

To build and run using Docker:

# For npm
docker build -t my-app .

# Run the container
docker run -p 3000:3000 my-app

The containerized application can be deployed to any platform that supports Docker, including:

  • AWS ECS
  • Google Cloud Run
  • Azure Container Apps
  • Digital Ocean App Platform
  • Fly.io
  • Railway

DIY Deployment

If you're familiar with deploying Node applications, the built-in app server is production-ready.

Make sure to deploy the output of npm run build

├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── server.js
├── build/
│   ├── client/    # Static assets
│   └── server/    # Server-side code

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever CSS framework you prefer.


Built with ❤️ using React Router.