Website for Brackt.com
0ac9ef4ff8
* fix: eliminate queue tab flash on mobile by using useSyncExternalStore useMediaQuery initialized to false and updated in useEffect, causing a paint where isMobile was false on mobile devices. This rendered the desktop layout first, hiding the queue tab until the effect fired. useSyncExternalStore reads matchMedia synchronously on the client so the correct layout is used on the first render with no extra paint. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: revalidate draft room when Clerk JWT expires at load time Clerk's short-lived JWTs (~1 min) can expire between navigations. Server-side clerkMiddleware can't refresh them for client-side loader fetches, so getAuth() returns userId=null — causing userTeam=undefined, the queue button to disappear, and the tab to default to "board". Added a useEffect that detects the mismatch: if the Clerk client SDK has a valid userId but the loader ran without one, trigger revalidate() so the loader re-runs with a fresh token and returns correct userTeam/userQueue data. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: prevent infinite revalidation loop in auth guard If the server consistently fails to populate currentUserId after JWT refresh (e.g. misconfigured CLERK_SECRET_KEY), the previous effect would loop indefinitely. A one-shot ref ensures we attempt auth recovery at most once per mount. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| .github/workflows | ||
| app | ||
| cypress | ||
| database | ||
| drizzle | ||
| plans | ||
| public | ||
| scripts | ||
| server | ||
| .dockerignore | ||
| .env.example | ||
| .gitignore | ||
| .mcp.json | ||
| CLAUDE.md | ||
| components.json | ||
| cypress.config.js | ||
| docker-compose.yml | ||
| Dockerfile | ||
| drizzle.config.ts | ||
| package-lock.json | ||
| package.json | ||
| plan.md | ||
| react-router.config.ts | ||
| README.md | ||
| server.ts | ||
| TESTING.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| tsconfig.server.json | ||
| tsconfig.vite.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
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.