Website for Brackt.com
Find a file
Chris Parsons 3611f5620e
Show "Syncing Draft State..." overlay during draft reconnection (#361)
* Show "Syncing Draft State..." overlay during draft reconnection

When a user reconnects to a draft room (socket reconnect, tab visibility
return, etc.), there was a gap between when the socket connected and when
the full draft state sync arrived. The ConnectionOverlay vanished instantly
on reconnect, showing potentially stale data.

Add an isSyncing flag that keeps the overlay visible with "Syncing Draft
State..." messaging until the actual data arrives via socket or HTTP
revalidation. A 5-second safety timeout prevents the overlay from getting
stuck.

Fixes #78

* Add team names utility tests
2026-04-30 20:33:00 -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
.opencode/plugins Add opencode oxlint plugin and UI refinements (#323) 2026-04-24 11:11:20 -07: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 Show "Syncing Draft State..." overlay during draft reconnection (#361) 2026-04-30 20:33:00 -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 Add draft room closure after completion (#359) 2026-04-30 10:14:14 -07:00
docs Migrate auth from Clerk to BetterAuth (#354) 2026-04-29 10:03:50 -07:00
drizzle Add draft room closure after completion (#359) 2026-04-30 10:14:14 -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 Fix migrate.mjs: also convert leagues.created_by from Clerk IDs to UUIDs 2026-04-24 22:46:14 -07:00
server Add draft room closure after completion (#359) 2026-04-30 10:14:14 -07:00
.dockerignore Initial commit from create-react-router 2025-10-10 23:04:50 -07:00
.env.example Migrate authentication from Clerk to BetterAuth (#324) 2026-04-24 22:00:49 -07:00
.gitignore Migrate authentication from Clerk to BetterAuth (#324) 2026-04-24 22:00:49 -07:00
.npmrc Migrate authentication from Clerk to BetterAuth (#324) 2026-04-24 22:00:49 -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 Fix horizontal scroll on league page from long event names (#360) 2026-04-30 10:51:14 -07:00
BETTERAUTH_MIGRATION.md Migrate authentication from Clerk to BetterAuth (#324) 2026-04-24 22:00:49 -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 Copy .npmrc into production Docker stage so npm ci --omit=dev respects legacy-peer-deps (#325) 2026-04-24 22:17:35 -07: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 Add react-is as explicit dependency to fix production Docker build 2026-04-24 22:29:13 -07:00
package.json Add react-is as explicit dependency to fix production Docker build 2026-04-24 22:29:13 -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.