Prettier / main page

frontend/README.md

@@ -1,4 +1,4 @@
-Welcome to your new TanStack app! 
+Welcome to your new TanStack app!
 
 # Getting Started
 
@@ -6,7 +6,7 @@ To run this application:
 
 ```bash
 bun install
-bunx --bun run start  
+bunx --bun run start
 ```
 
 # Building For Production
@@ -29,10 +29,8 @@ bunx --bun run test
 
 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
 
-
-
-
 ## 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`.
 
 ### Adding A 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:
 
 ```tsx
-import { Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 
 import { Link } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
-  component: () => (
-    <>
-      <header>
-        <nav>
-          <Link to="/">Home</Link>
-          <Link to="/about">About</Link>
-        </nav>
-      </header>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
-})
+    component: () => (
+        <>
+            <header>
+                <nav>
+                    <Link to="/">Home</Link>
+                    <Link to="/about">About</Link>
+                </nav>
+            </header>
+            <Outlet />
+            <TanStackRouterDevtools />
+        </>
+    ),
+});
 ```
 
 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).
 
-
 ## 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.
@@ -102,26 +99,26 @@ For example:
 
 ```tsx
 const peopleRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/people",
-  loader: async () => {
-    const response = await fetch("https://swapi.dev/api/people");
-    return response.json() as Promise<{
-      results: {
-        name: string;
-      }[];
-    }>;
-  },
-  component: () => {
-    const data = peopleRoute.useLoaderData();
-    return (
-      <ul>
-        {data.results.map((person) => (
-          <li key={person.name}>{person.name}</li>
-        ))}
-      </ul>
-    );
-  },
+    getParentRoute: () => rootRoute,
+    path: "/people",
+    loader: async () => {
+        const response = await fetch("https://swapi.dev/api/people");
+        return response.json() as Promise<{
+            results: {
+                name: string;
+            }[];
+        }>;
+    },
+    component: () => {
+        const data = peopleRoute.useLoaderData();
+        return (
+            <ul>
+                {data.results.map((person) => (
+                    <li key={person.name}>{person.name}</li>
+                ))}
+            </ul>
+        );
+    },
 });
 ```
 
@@ -149,13 +146,13 @@ const queryClient = new QueryClient();
 // ...
 
 if (!rootElement.innerHTML) {
-  const root = ReactDOM.createRoot(rootElement);
+    const root = ReactDOM.createRoot(rootElement);
 
-  root.render(
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
-  );
+    root.render(
+        <QueryClientProvider client={queryClient}>
+            <RouterProvider router={router} />
+        </QueryClientProvider>
+    );
 }
 ```
 
@@ -165,13 +162,13 @@ You can also add TanStack Query Devtools to the root route (optional).
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const rootRoute = createRootRoute({
-  component: () => (
-    <>
-      <Outlet />
-      <ReactQueryDevtools buttonPosition="top-right" />
-      <TanStackRouterDevtools />
-    </>
-  ),
+    component: () => (
+        <>
+            <Outlet />
+            <ReactQueryDevtools buttonPosition="top-right" />
+            <TanStackRouterDevtools />
+        </>
+    ),
 });
 ```
 
@@ -183,24 +180,24 @@ import { useQuery } from "@tanstack/react-query";
 import "./App.css";
 
 function App() {
-  const { data } = useQuery({
-    queryKey: ["people"],
-    queryFn: () =>
-      fetch("https://swapi.dev/api/people")
-        .then((res) => res.json())
-        .then((data) => data.results as { name: string }[]),
-    initialData: [],
-  });
+    const { data } = useQuery({
+        queryKey: ["people"],
+        queryFn: () =>
+            fetch("https://swapi.dev/api/people")
+                .then((res) => res.json())
+                .then((data) => data.results as { name: string }[]),
+        initialData: [],
+    });
 
-  return (
-    <div>
-      <ul>
-        {data.map((person) => (
-          <li key={person.name}>{person.name}</li>
-        ))}
-      </ul>
-    </div>
-  );
+    return (
+        <div>
+            <ul>
+                {data.map((person) => (
+                    <li key={person.name}>{person.name}</li>
+                ))}
+            </ul>
+        </div>
+    );
 }
 
 export default App;
@@ -228,14 +225,12 @@ import "./App.css";
 const countStore = new Store(0);
 
 function App() {
-  const count = useStore(countStore);
-  return (
-    <div>
-      <button onClick={() => countStore.setState((n) => n + 1)}>
-        Increment - {count}
-      </button>
-    </div>
-  );
+    const count = useStore(countStore);
+    return (
+        <div>
+            <button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
+        </div>
+    );
 }
 
 export default App;
@@ -253,23 +248,21 @@ import "./App.css";
 const countStore = new Store(0);
 
 const doubledStore = new Derived({
-  fn: () => countStore.state * 2,
-  deps: [countStore],
+    fn: () => countStore.state * 2,
+    deps: [countStore],
 });
 doubledStore.mount();
 
 function App() {
-  const count = useStore(countStore);
-  const doubledCount = useStore(doubledStore);
+    const count = useStore(countStore);
+    const doubledCount = useStore(doubledStore);
 
-  return (
-    <div>
-      <button onClick={() => countStore.setState((n) => n + 1)}>
-        Increment - {count}
-      </button>
-      <div>Doubled - {doubledCount}</div>
-    </div>
-  );
+    return (
+        <div>
+            <button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
+            <div>Doubled - {doubledCount}</div>
+        </div>
+    );
 }
 
 export default App;