nathan/by-other-means
1
0
Fork 0
Code Actions Packages Activity

Update readme

Browse Source
This commit is contained in:
Nathan Stanley
2026-07-29 05:24:06 -04:00
parent 90126d1aaa
commit 43713d6b79
1 changed files with 26 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+26 -167
View File
@@ -1,39 +1,37 @@
Welcome to your new TanStack Start app! # By Other Means Control Timer
# Getting Started A round timer for **By Other Means**, a diplomacy/wargame-style event. Each 40-minute round is broken into four phases (Negotiation, Plenary, Discussion, Orders), and this app tracks elapsed time and displays the current phase to players.
To run this application: - **Start Round** begins the timer and highlights the active phase as time passes.
- Once running, the button switches to **Prepare Next Round**, which asks for confirmation before resetting the timer for the next round.
- Time past the round length is shown in red and pulses to flag overtime.
Phase names, durations, descriptions, and colors are defined in `src/utils/constants.ts`.
## Tech Stack
Built with [TanStack Start](https://tanstack.com/start) (file-based routing via TanStack Router), React 19, Redux Toolkit + `redux-persist` for timer state, Luxon for time handling, and Tailwind CSS for styling.
## Getting Started
```bash ```bash
npm install npm install
npm run dev npm run dev
``` ```
# Building For Production The dev server runs on port 8000 (see `vite.config.ts`).
To build this application for production: ## Building For Production
```bash ```bash
npm run build npm run build
``` ```
## Styling A `Dockerfile` is included for containerized deployment.
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
### Removing Tailwind CSS
If you prefer not to use Tailwind CSS:
1. Remove the demo pages in `src/routes/demo/`
2. Replace the Tailwind import in `src/styles.css` with your own styles
3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
4. Remove `@tailwindcss/vite` and `tailwindcss` from `package.json`
## Linting & Formatting ## Linting & Formatting
This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available: This project uses [Biome](https://biomejs.dev/) for linting and formatting.
```bash ```bash
npm run lint npm run lint
@@ -41,154 +39,15 @@ npm run format
npm run check npm run check
``` ```
## Project Structure
- `src/routes/` — file-based routes (`__root.tsx`, `index.tsx`)
- `src/pages/Welcome.tsx` — main timer view
- `src/components/` — `Phase` and `ConfirmModal` UI components
- `src/store/` — Redux store, `timeSlice` (start time) and `phaseSlice`
- `src/utils/` — phase/round constants, helper functions, and types
## Routing ## Learn More
This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`. - [TanStack Start documentation](https://tanstack.com/start)
- [TanStack Router documentation](https://tanstack.com/router)
### Adding A Route
To add a new route to your application just add a new file in the `./src/routes` directory.
TanStack will automatically generate the content of the route file for you.
Now that you have two routes you can use a `Link` component to navigate between them.
### Adding Links
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
```tsx
import { Link } from "@tanstack/react-router";
```
Then anywhere in your JSX you can use it like so:
```tsx
<Link to="/about">About</Link>
```
This will create a link that will navigate to the `/about` route.
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
### Using A Layout
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you render `{children}` in the `shellComponent`.
Here is an example layout that includes a header:
```tsx
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ title: 'My App' },
],
}),
shellComponent: ({ children }) => (
<html lang="en">
<head>
<HeadContent />
</head>
<body>
<header>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
</header>
{children}
<Scripts />
</body>
</html>
),
})
```
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
## Server Functions
TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
```tsx
import { createServerFn } from '@tanstack/react-start'
const getServerTime = createServerFn({
method: 'GET',
}).handler(async () => {
return new Date().toISOString()
})
// Use in a component
function MyComponent() {
const [time, setTime] = useState('')
useEffect(() => {
getServerTime().then(setTime)
}, [])
return <div>Server time: {time}</div>
}
```
## API Routes
You can create API routes by using the `server` property in your route definitions:
```tsx
import { createFileRoute } from '@tanstack/react-router'
import { json } from '@tanstack/react-start'
export const Route = createFileRoute('/api/hello')({
server: {
handlers: {
GET: () => json({ message: 'Hello, World!' }),
},
},
})
```
## Data Fetching
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
For example:
```tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/people')({
loader: async () => {
const response = await fetch('https://swapi.dev/api/people')
return response.json()
},
component: PeopleComponent,
})
function PeopleComponent() {
const data = Route.useLoaderData()
return (
<ul>
{data.results.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
)
}
```
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
# Learn More
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).