Introduce new app structure

eslint.config.mjs

@@ -0,0 +1,31 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js'
+import { fixupConfigRules } from '@eslint/compat'
+
+export default [
+  { files: ['**/*.{mjs,ts,jsx,tsx}'] },
+  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...fixupConfigRules(pluginReactConfig),
+  {
+    settings: {
+      react: {
+        version: 'detect',
+        pragma: 'React',
+        pragmaFrag: 'React.Fragment',
+      },
+    },
+  },
+  {
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+    },
+  },
+  {
+    ignores: ['dist/'],
+  },
+]

package.json

@@ -4,38 +4,38 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "dev": "vinxi dev",
-    "build": "vinxi build",
-    "start": "vinxi start",
-    "lint": "prettier --check '**/*' --ignore-unknown && eslint --ext .ts,.tsx ./app",
-    "format": "prettier --write '**/*' --ignore-unknown"
+    "dev": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "start": "vite start",
+    "format": "prettier --write .",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
-    "@clerk/tanstack-react-start": "0.16.0",
-    "@tanstack/server-functions-plugin": "1.120.17",
-    "@tanstack/router-generator": "1.120.17",
-    "@tanstack/react-router-devtools": "1.120.17",
-    "@tanstack/react-start": "1.120.17",
-    "@tanstack/react-start-config": "1.120.17",
-    "@tanstack/router-plugin": "1.120.17",
-    "@tanstack/react-start-client": "1.120.17",
-    "@tanstack/react-start-plugin": "1.120.17",
-    "@tanstack/react-start-server": "1.120.17",
-    "@tanstack/start-server-core": "1.120.17",
-    "@typescript-eslint/parser": "^8.31.1",
+    "@clerk/tanstack-react-start": "0.18.0",
+    "@tanstack/react-router": "^1.121.34",
+    "@tanstack/react-router-devtools": "^1.121.34",
+    "@tanstack/react-start": "^1.121.35",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "vinxi": "0.5.6"
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.8",
+    "@eslint/js": "^9.25.1",
+    "@typescript-eslint/parser": "^8.31.1",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "eslint": "^9.25.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "@types/node": "^22.15.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.3",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.25.1",
-    "eslint-config-react-app": "^7.0.1",
     "prettier": "^3.5.3",
     "typescript": "^5.8.3",
+    "typescript-eslint": "^8.31.1",
+    "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
-  }
+  },
+  "packageManager": "npm@10.9.2"
 }

app/routeTree.gen.ts → src/routeTree.gen.ts

@@ -8,48 +8,25 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-// Import Routes
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
 
-import { Route as rootRoute } from './routes/__root'
-import { Route as IndexImport } from './routes/index'
-
-// Create/Update Routes
-
-const IndexRoute = IndexImport.update({
+const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => rootRouteImport,
 } as any)
 
-// Populate the FileRoutesByPath interface
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexImport
-      parentRoute: typeof rootRoute
-    }
-  }
-}
-
-// Create and export the route tree
-
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
 }
-
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
 }
-
 export interface FileRoutesById {
-  __root__: typeof rootRoute
+  __root__: typeof rootRouteImport
   '/': typeof IndexRoute
 }
-
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths: '/'
@@ -58,31 +35,25 @@ export interface FileRouteTypes {
   id: '__root__' | '/'
   fileRoutesById: FileRoutesById
 }
-
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
 }
 
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
 }
-
-export const routeTree = rootRoute
+export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
-
-/* ROUTE_MANIFEST_START
-{
-  "routes": {
-    "__root__": {
-      "filePath": "__root.tsx",
-      "children": [
-        "/"
-      ]
-    },
-    "/": {
-      "filePath": "index.tsx"
-    }
-  }
-}
-ROUTE_MANIFEST_END */

app/router.tsx → src/router.tsx

@@ -5,6 +5,8 @@ export function createRouter() {
   const router = createTanStackRouter({
     routeTree,
     defaultPreload: 'intent',
+    defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
+    defaultNotFoundComponent: () => <p>not found</p>,
     scrollRestoration: true,
   })
 

app/routes/__root.tsx → src/routes/__root.tsx

@@ -1,22 +1,26 @@
+/// <reference types="vite/client" />
+import * as React from 'react'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { ClerkProvider } from '@clerk/tanstack-react-start'
 import {
   HeadContent,
   Outlet,
-  createRootRoute,
   Scripts,
+  createRootRoute,
 } from '@tanstack/react-router'
-import type * as React from 'react'
-import { ClerkProvider } from '@clerk/tanstack-react-start'
 
 export const Route = createRootRoute({
-  component: () => {
-    return (
-      <RootDocument>
-        <Outlet />
-      </RootDocument>
-    )
-  },
+  component: RootComponent,
 })
 
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <ClerkProvider>
@@ -26,6 +30,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         </head>
         <body>
           {children}
+          <TanStackRouterDevtools position="bottom-right" />
           <Scripts />
         </body>
       </html>

app/ssr.tsx → src/server.ts

@@ -2,13 +2,11 @@ import {
   createStartHandler,
   defaultStreamHandler,
 } from '@tanstack/react-start/server'
-import { getRouterManifest } from '@tanstack/react-start/router-manifest'
 import { createRouter } from './router'
 import { createClerkHandler } from '@clerk/tanstack-react-start/server'
 
 export default createClerkHandler(
   createStartHandler({
     createRouter,
-    getRouterManifest,
   }),
 )(defaultStreamHandler)

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "public/script*.js"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
@@ -15,7 +15,7 @@
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./app/*"]
+      "~/*": ["./src/*"]
     },
     "noEmit": true
   }

vite.config.ts

@@ -0,0 +1,15 @@
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import { defineConfig } from 'vite'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    tsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tanstackStart(),
+  ],
+})