eisterman/demoboard
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project: format all

Browse Source
This commit is contained in:
Federico Pasqua
2025-09-25 14:38:58 +02:00
parent b8d64f325b
commit 7950e6761c
15 changed files with 134 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.cta.json
View File

@@ -7,7 +7,5 @@
"git": true, "git": true,
"version": 1, "version": 1,
"framework": "react-cra", "framework": "react-cra",
"chosenAddOns": [ "chosenAddOns": ["start"]
"start"
]
} }

61
README.md
View File

@@ -29,10 +29,8 @@ pnpm test
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling. This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
## Routing ## Routing
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`. This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
### Adding A Route ### Adding A Route
@@ -48,13 +46,13 @@ Now that you have two routes you can use a `Link` component to navigate between
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`. To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
```tsx ```tsx
import { Link } from "@tanstack/react-router"; import { Link } from '@tanstack/react-router';
``` ```
Then anywhere in your JSX you can use it like so: Then anywhere in your JSX you can use it like so:
```tsx ```tsx
<Link to="/about">About</Link> <Link to='/about'>About</Link>
``` ```
This will create a link that will navigate to the `/about` route. This will create a link that will navigate to the `/about` route.
@@ -68,32 +66,31 @@ In the File Based Routing setup the layout is located in `src/routes/__root.tsx`
Here is an example layout that includes a header: Here is an example layout that includes a header:
```tsx ```tsx
import { Outlet, createRootRoute } from '@tanstack/react-router' import { Outlet, createRootRoute } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
import { Link } from "@tanstack/react-router"; import { Link } from '@tanstack/react-router';
export const Route = createRootRoute({ export const Route = createRootRoute({
component: () => ( component: () => (
<> <>
<header> <header>
<nav> <nav>
<Link to="/">Home</Link> <Link to='/'>Home</Link>
<Link to="/about">About</Link> <Link to='/about'>About</Link>
</nav> </nav>
</header> </header>
<Outlet /> <Outlet />
<TanStackRouterDevtools /> <TanStackRouterDevtools />
</> </>
), ),
}) });
``` ```
The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout. The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts). More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
## Data Fetching ## 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. 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.
@@ -103,9 +100,9 @@ For example:
```tsx ```tsx
const peopleRoute = createRoute({ const peopleRoute = createRoute({
getParentRoute: () => rootRoute, getParentRoute: () => rootRoute,
path: "/people", path: '/people',
loader: async () => { loader: async () => {
const response = await fetch("https://swapi.dev/api/people"); const response = await fetch('https://swapi.dev/api/people');
return response.json() as Promise<{ return response.json() as Promise<{
results: { results: {
name: string; name: string;
@@ -140,7 +137,7 @@ pnpm add @tanstack/react-query @tanstack/react-query-devtools
Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`. Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
```tsx ```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
// ... // ...
@@ -154,7 +151,7 @@ if (!rootElement.innerHTML) {
root.render( root.render(
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<RouterProvider router={router} /> <RouterProvider router={router} />
</QueryClientProvider> </QueryClientProvider>,
); );
} }
``` ```
@@ -162,13 +159,13 @@ if (!rootElement.innerHTML) {
You can also add TanStack Query Devtools to the root route (optional). You can also add TanStack Query Devtools to the root route (optional).
```tsx ```tsx
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
const rootRoute = createRootRoute({ const rootRoute = createRootRoute({
component: () => ( component: () => (
<> <>
<Outlet /> <Outlet />
<ReactQueryDevtools buttonPosition="top-right" /> <ReactQueryDevtools buttonPosition='top-right' />
<TanStackRouterDevtools /> <TanStackRouterDevtools />
</> </>
), ),
@@ -178,15 +175,15 @@ const rootRoute = createRootRoute({
Now you can use `useQuery` to fetch your data. Now you can use `useQuery` to fetch your data.
```tsx ```tsx
import { useQuery } from "@tanstack/react-query"; import { useQuery } from '@tanstack/react-query';
import "./App.css"; import './App.css';
function App() { function App() {
const { data } = useQuery({ const { data } = useQuery({
queryKey: ["people"], queryKey: ['people'],
queryFn: () => queryFn: () =>
fetch("https://swapi.dev/api/people") fetch('https://swapi.dev/api/people')
.then((res) => res.json()) .then((res) => res.json())
.then((data) => data.results as { name: string }[]), .then((data) => data.results as { name: string }[]),
initialData: [], initialData: [],
@@ -221,9 +218,9 @@ pnpm add @tanstack/store
Now let's create a simple counter in the `src/App.tsx` file as a demonstration. Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
```tsx ```tsx
import { useStore } from "@tanstack/react-store"; import { useStore } from '@tanstack/react-store';
import { Store } from "@tanstack/store"; import { Store } from '@tanstack/store';
import "./App.css"; import './App.css';
const countStore = new Store(0); const countStore = new Store(0);
@@ -231,9 +228,7 @@ function App() {
const count = useStore(countStore); const count = useStore(countStore);
return ( return (
<div> <div>
<button onClick={() => countStore.setState((n) => n + 1)}> <button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
Increment - {count}
</button>
</div> </div>
); );
} }
@@ -246,9 +241,9 @@ One of the many nice features of TanStack Store is the ability to derive state f
Let's check this out by doubling the count using derived state. Let's check this out by doubling the count using derived state.
```tsx ```tsx
import { useStore } from "@tanstack/react-store"; import { useStore } from '@tanstack/react-store';
import { Store, Derived } from "@tanstack/store"; import { Store, Derived } from '@tanstack/store';
import "./App.css"; import './App.css';
const countStore = new Store(0); const countStore = new Store(0);
@@ -264,9 +259,7 @@ function App() {
return ( return (
<div> <div>
<button onClick={() => countStore.setState((n) => n + 1)}> <button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
Increment - {count}
</button>
<div>Doubled - {doubledCount}</div> <div>Doubled - {doubledCount}</div>
</div> </div>
); );

20
src/components/Header.tsx
View File

@@ -1,21 +1,21 @@
import { Link } from '@tanstack/react-router' import { Link } from '@tanstack/react-router';
export default function Header() { export default function Header() {
return ( return (
<header className="p-2 flex gap-2 bg-white text-black justify-between"> <header className='p-2 flex gap-2 bg-white text-black justify-between'>
<nav className="flex flex-row"> <nav className='flex flex-row'>
<div className="px-2 font-bold"> <div className='px-2 font-bold'>
<Link to="/">Home</Link> <Link to='/'>Home</Link>
</div> </div>
<div className="px-2 font-bold"> <div className='px-2 font-bold'>
<Link to="/demo/start/server-funcs">Start - Server Functions</Link> <Link to='/demo/start/server-funcs'>Start - Server Functions</Link>
</div> </div>
<div className="px-2 font-bold"> <div className='px-2 font-bold'>
<Link to="/demo/start/api-request">Start - API Request</Link> <Link to='/demo/start/api-request'>Start - API Request</Link>
</div> </div>
</nav> </nav>
</header> </header>
) );
} }

8
src/router.tsx
View File

@@ -1,7 +1,7 @@
import { createRouter } from '@tanstack/react-router' import { createRouter } from '@tanstack/react-router';
// Import the generated route tree // Import the generated route tree
import { routeTree } from './routeTree.gen' import { routeTree } from './routeTree.gen';
// Create a new router instance // Create a new router instance
export const getRouter = () => { export const getRouter = () => {
@@ -9,5 +9,5 @@ export const getRouter = () => {
routeTree, routeTree,
scrollRestoration: true, scrollRestoration: true,
defaultPreloadStaleTime: 0, defaultPreloadStaleTime: 0,
}) });
} };

16
src/routes/__root.tsx
View File

@@ -1,10 +1,10 @@
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router' import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router';
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools' import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import { TanstackDevtools } from '@tanstack/react-devtools' import { TanstackDevtools } from '@tanstack/react-devtools';
import Header from '../components/Header' import Header from '../components/Header';
import appCss from '../styles.css?url' import appCss from '../styles.css?url';
export const Route = createRootRoute({ export const Route = createRootRoute({
head: () => ({ head: () => ({
@@ -29,11 +29,11 @@ export const Route = createRootRoute({
}), }),
shellComponent: RootDocument, shellComponent: RootDocument,
}) });
function RootDocument({ children }: { children: React.ReactNode }) { function RootDocument({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en"> <html lang='en'>
<head> <head>
<HeadContent /> <HeadContent />
</head> </head>
@@ -54,5 +54,5 @@ function RootDocument({ children }: { children: React.ReactNode }) {
<Scripts /> <Scripts />
</body> </body>
</html> </html>
) );
} }

6
src/routes/api.demo-names.ts
View File

@@ -1,4 +1,4 @@
import { createFileRoute } from '@tanstack/react-router' import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/api/demo-names')({ export const Route = createFileRoute('/api/demo-names')({
server: { server: {
@@ -8,8 +8,8 @@ export const Route = createFileRoute('/api/demo-names')({
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}) });
}, },
}, },
}, },
}) });

28
src/routes/demo.start.api-request.tsx
View File

@@ -1,44 +1,44 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react';
import { createFileRoute } from '@tanstack/react-router' import { createFileRoute } from '@tanstack/react-router';
function getNames() { function getNames() {
return fetch('/api/demo-names').then((res) => res.json()) return fetch('/api/demo-names').then((res) => res.json());
} }
export const Route = createFileRoute('/demo/start/api-request')({ export const Route = createFileRoute('/demo/start/api-request')({
component: Home, component: Home,
}) });
function Home() { function Home() {
const [names, setNames] = useState<Array<string>>([]) const [names, setNames] = useState<Array<string>>([]);
useEffect(() => { useEffect(() => {
getNames().then(setNames) getNames().then(setNames);
}, []) }, []);
return ( return (
<div <div
className="flex items-center justify-center min-h-screen p-4 text-white" className='flex items-center justify-center min-h-screen p-4 text-white'
style={{ style={{
backgroundColor: '#000', backgroundColor: '#000',
backgroundImage: backgroundImage:
'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 100%)', 'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 100%)',
}} }}
> >
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10"> <div className='w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10'>
<h1 className="text-2xl mb-4">Start API Request Demo - Names List</h1> <h1 className='text-2xl mb-4'>Start API Request Demo - Names List</h1>
<ul className="mb-4 space-y-2"> <ul className='mb-4 space-y-2'>
{names.map((name) => ( {names.map((name) => (
<li <li
key={name} key={name}
className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md" className='bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md'
> >
<span className="text-lg text-white">{name}</span> <span className='text-lg text-white'>{name}</span>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
) );
} }

66
src/routes/demo.start.server-funcs.tsx
View File

@@ -1,9 +1,9 @@
import fs from 'node:fs' import fs from 'node:fs';
import { useCallback, useState } from 'react' import { useCallback, useState } from 'react';
import { createFileRoute, useRouter } from '@tanstack/react-router' import { createFileRoute, useRouter } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start' import { createServerFn } from '@tanstack/react-start';
const filePath = 'todos.json' const filePath = 'todos.json';
async function readTodos() { async function readTodos() {
return JSON.parse( return JSON.parse(
@@ -17,81 +17,81 @@ async function readTodos() {
2, 2,
), ),
), ),
) );
} }
const getTodos = createServerFn({ const getTodos = createServerFn({
method: 'GET', method: 'GET',
}).handler(async () => await readTodos()) }).handler(async () => await readTodos());
const addTodo = createServerFn({ method: 'POST' }) const addTodo = createServerFn({ method: 'POST' })
.inputValidator((d: string) => d) .inputValidator((d: string) => d)
.handler(async ({ data }) => { .handler(async ({ data }) => {
const todos = await readTodos() const todos = await readTodos();
todos.push({ id: todos.length + 1, name: data }) todos.push({ id: todos.length + 1, name: data });
await fs.promises.writeFile(filePath, JSON.stringify(todos, null, 2)) await fs.promises.writeFile(filePath, JSON.stringify(todos, null, 2));
return todos return todos;
}) });
export const Route = createFileRoute('/demo/start/server-funcs')({ export const Route = createFileRoute('/demo/start/server-funcs')({
component: Home, component: Home,
loader: async () => await getTodos(), loader: async () => await getTodos(),
}) });
function Home() { function Home() {
const router = useRouter() const router = useRouter();
let todos = Route.useLoaderData() let todos = Route.useLoaderData();
const [todo, setTodo] = useState('') const [todo, setTodo] = useState('');
const submitTodo = useCallback(async () => { const submitTodo = useCallback(async () => {
todos = await addTodo({ data: todo }) todos = await addTodo({ data: todo });
setTodo('') setTodo('');
router.invalidate() router.invalidate();
}, [addTodo, todo]) }, [addTodo, todo]);
return ( return (
<div <div
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white" className='flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white'
style={{ style={{
backgroundImage: backgroundImage:
'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)', 'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)',
}} }}
> >
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10"> <div className='w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10'>
<h1 className="text-2xl mb-4">Start Server Functions - Todo Example</h1> <h1 className='text-2xl mb-4'>Start Server Functions - Todo Example</h1>
<ul className="mb-4 space-y-2"> <ul className='mb-4 space-y-2'>
{todos?.map((t) => ( {todos?.map((t) => (
<li <li
key={t.id} key={t.id}
className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md" className='bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md'
> >
<span className="text-lg text-white">{t.name}</span> <span className='text-lg text-white'>{t.name}</span>
</li> </li>
))} ))}
</ul> </ul>
<div className="flex flex-col gap-2"> <div className='flex flex-col gap-2'>
<input <input
type="text" type='text'
value={todo} value={todo}
onChange={(e) => setTodo(e.target.value)} onChange={(e) => setTodo(e.target.value)}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
submitTodo() submitTodo();
} }
}} }}
placeholder="Enter a new todo..." placeholder='Enter a new todo...'
className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent" className='w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent'
/> />
<button <button
disabled={todo.trim().length === 0} disabled={todo.trim().length === 0}
onClick={submitTodo} onClick={submitTodo}
className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors" className='bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors'
> >
Add todo Add todo
</button> </button>
</div> </div>
</div> </div>
</div> </div>
) );
} }

32
src/routes/index.tsx
View File

@@ -1,39 +1,39 @@
import { createFileRoute } from '@tanstack/react-router' import { createFileRoute } from '@tanstack/react-router';
import logo from '../logo.svg' import logo from '../logo.svg';
export const Route = createFileRoute('/')({ export const Route = createFileRoute('/')({
component: App, component: App,
}) });
function App() { function App() {
return ( return (
<div className="text-center"> <div className='text-center'>
<header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]"> <header className='min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]'>
<img <img
src={logo} src={logo}
className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]" className='h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]'
alt="logo" alt='logo'
/> />
<p> <p>
Edit <code>src/routes/index.tsx</code> and save to reload. Edit <code>src/routes/index.tsx</code> and save to reload.
</p> </p>
<a <a
className="text-[#61dafb] hover:underline" className='text-[#61dafb] hover:underline'
href="https://reactjs.org" href='https://reactjs.org'
target="_blank" target='_blank'
rel="noopener noreferrer" rel='noopener noreferrer'
> >
Learn React Learn React
</a> </a>
<a <a
className="text-[#61dafb] hover:underline" className='text-[#61dafb] hover:underline'
href="https://tanstack.com" href='https://tanstack.com'
target="_blank" target='_blank'
rel="noopener noreferrer" rel='noopener noreferrer'
> >
Learn TanStack Learn TanStack
</a> </a>
</header> </header>
</div> </div>
) );
} }

11
src/styles.css
View File

@@ -1,15 +1,14 @@
@import "tailwindcss"; @import 'tailwindcss';
body { body {
@apply m-0; @apply m-0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", font-family:
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
sans-serif; 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
monospace;
} }

2
tsconfig.json
View File

@@ -22,7 +22,7 @@
"noUncheckedSideEffectImports": true, "noUncheckedSideEffectImports": true,
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./src/*"], "@/*": ["./src/*"]
} }
} }
} }

14
vite.config.ts
View File

@@ -1,8 +1,8 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite';
import { tanstackStart } from '@tanstack/react-start/plugin/vite' import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import viteReact from '@vitejs/plugin-react' import viteReact from '@vitejs/plugin-react';
import viteTsConfigPaths from 'vite-tsconfig-paths' import viteTsConfigPaths from 'vite-tsconfig-paths';
import tailwindcss from '@tailwindcss/vite' import tailwindcss from '@tailwindcss/vite';
const config = defineConfig({ const config = defineConfig({
plugins: [ plugins: [
@@ -14,6 +14,6 @@ const config = defineConfig({
tanstackStart(), tanstackStart(),
viteReact(), viteReact(),
], ],
}) });
export default config export default config;