create-aron-app 0.1.6 → 0.1.8

package/templates/apps/web/.react-router/types/src/routes/(auth)/sign-in/+types/index.ts

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../index.js")
+
+type Info = GetInfo<{
+  file: "./routes/(auth)/sign-in/index.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../../root.js");
+}, {
+  id: "routes/(auth)/layout";
+  module: typeof import("../../layout.js");
+}, {
+  id: "routes/(auth)/sign-in/index";
+  module: typeof import("../index.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

package/templates/apps/web/.react-router/types/src/routes/(dashboard)/(todos)/+types/[id].ts

@@ -0,0 +1,68 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../[id].js")
+
+type Info = GetInfo<{
+  file: "./routes/(dashboard)/(todos)/[id].tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../../root.js");
+}, {
+  id: "routes/(dashboard)/layout";
+  module: typeof import("../../layout.js");
+}, {
+  id: "routes/(dashboard)/(todos)/layout";
+  module: typeof import("../layout.js");
+}, {
+  id: "routes/(dashboard)/(todos)/[id]";
+  module: typeof import("../[id].js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

package/templates/apps/web/.react-router/types/src/routes/(dashboard)/(todos)/+types/index.ts

@@ -0,0 +1,68 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../index.js")
+
+type Info = GetInfo<{
+  file: "./routes/(dashboard)/(todos)/index.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../../root.js");
+}, {
+  id: "routes/(dashboard)/layout";
+  module: typeof import("../../layout.js");
+}, {
+  id: "routes/(dashboard)/(todos)/layout";
+  module: typeof import("../layout.js");
+}, {
+  id: "routes/(dashboard)/(todos)/index";
+  module: typeof import("../index.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

package/templates/apps/web/.react-router/types/src/routes/(dashboard)/(todos)/+types/layout.ts

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../layout.js")
+
+type Info = GetInfo<{
+  file: "./routes/(dashboard)/(todos)/layout.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../../root.js");
+}, {
+  id: "routes/(dashboard)/layout";
+  module: typeof import("../../layout.js");
+}, {
+  id: "routes/(dashboard)/(todos)/layout";
+  module: typeof import("../layout.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

package/templates/apps/web/.react-router/types/src/routes/(dashboard)/+types/index.ts

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../index.js")
+
+type Info = GetInfo<{
+  file: "./routes/(dashboard)/index.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../root.js");
+}, {
+  id: "routes/(dashboard)/layout";
+  module: typeof import("../layout.js");
+}, {
+  id: "routes/(dashboard)/index";
+  module: typeof import("../index.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

package/templates/apps/web/.react-router/types/src/routes/(dashboard)/+types/layout.ts

@@ -0,0 +1,62 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../layout.js")
+
+type Info = GetInfo<{
+  file: "./routes/(dashboard)/layout.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../root.js");
+}, {
+  id: "routes/(dashboard)/layout";
+  module: typeof import("../layout.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

package/templates/{react-router → apps/web}/project.json

@@ -1,10 +1,17 @@
 {
-  "name": "my-app:web",
+  "name": "web",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "./apps/web",
+  "sourceRoot": "apps/web",
   "projectType": "application",
   "tags": [],
   "targets": {
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "apps/web",
+        "command": "bunx react-router typecheck"
+      }
+    },
     "dev": {
       "executor": "nx:run-commands",
       "options": {

package/templates/{react-router → apps/web}/react-router.config.ts

@@ -2,7 +2,7 @@ import type { Config } from "@react-router/dev/config";
 
 export default {
   appDirectory: "src",
-  ssr: false,
+  ssr: true,
   future: {
     v8_middleware: true,
   },

package/templates/apps/web/src/app.css

@@ -0,0 +1,3 @@
+@import "../../../shared/assets/src/styles/global.css";
+@source "../../../shared/ui/src/**/*.{js,ts,jsx,tsx}";
+@source "../../../apps/web/src/**/*.{js,ts,jsx,tsx}";

package/templates/{react-router → apps/web}/src/components/error_boundary.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) SalesStar Limited 2026.
  */
 
-import type { Route } from "apps/web/.react-router/types/app/+types/root";
+import type { Route } from "../+types/root";
 import { isRouteErrorResponse } from "react-router";
 
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {

package/templates/apps/web/src/libs/convex_query_client.ts

@@ -0,0 +1,11 @@
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { ConvexReactClient } from "convex/react";
+
+const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string, {
+  expectAuth: true,
+  logger: true,
+});
+
+const convexQueryClient = new ConvexQueryClient(convex);
+
+export { convex, convexQueryClient };

package/templates/apps/web/src/libs/react_query_client.ts

@@ -0,0 +1,17 @@
+import { QueryClient } from "@tanstack/react-query";
+
+import { convexQueryClient } from "@/web/libs/convex_query_client";
+
+const reactQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      queryFn: convexQueryClient.queryFn(),
+      gcTime: 0,
+      staleTime: 0,
+    },
+  },
+});
+
+convexQueryClient.connect(reactQueryClient);
+
+export { reactQueryClient };

package/templates/apps/web/src/libs/server/auth.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { getAuth } from "@clerk/react-router/server";
+import { ConvexHttpClient } from "convex/browser";
+import type { LoaderFunctionArgs } from "react-router";
+import { redirect } from "react-router";
+
+const CONVEX_URL = process.env.VITE_CONVEX_URL;
+
+if (!CONVEX_URL) {
+  throw new Error("VITE_CONVEX_URL is not set");
+}
+
+export const createConvexClient = async (args: LoaderFunctionArgs): Promise<ConvexHttpClient> => {
+  try {
+    const auth = await getAuth(args);
+    if (!auth.isAuthenticated) {
+      throw redirect(`/sign-in?redirect_url=${encodeURIComponent(args.request.url)}`);
+    }
+    const token = await auth.getToken({ template: "convex" });
+    const client = new ConvexHttpClient(CONVEX_URL);
+    if (token) {
+      client.setAuth(token);
+    }
+    return client;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};

package/templates/apps/web/src/libs/server/protected.ts

@@ -0,0 +1,17 @@
+import { getAuth } from "@clerk/react-router/server";
+import { type MiddlewareFunction, redirect } from "react-router";
+
+const PUBLIC_ROUTES = ["/sign-in"];
+
+export const protectedRoute: MiddlewareFunction<Response> = async ({ request, context }, next) => {
+  const { pathname } = new URL(request.url);
+  const isPublic = PUBLIC_ROUTES.some((route) => pathname.startsWith(route));
+
+  if (!isPublic) {
+    const auth = await getAuth({ request, context } as Parameters<typeof getAuth>[0]);
+    if (!auth.isAuthenticated) {
+      throw redirect(`/sign-in?redirect_url=${encodeURIComponent(request.url)}`);
+    }
+  }
+  return next();
+};

package/templates/apps/web/src/providers/api_auth_provider.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { ClerkProvider, useAuth } from "@clerk/react-router";
+import { QueryClientProvider } from "@tanstack/react-query";
+import type { Route } from "apps/web/.react-router/types/src/+types/root";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+
+import { convex } from "@/web/libs/convex_query_client";
+import { reactQueryClient } from "@/web/libs/react_query_client";
+
+type ApiAuthProviderProps = {
+  children: React.ReactNode;
+  loaderData: Route.ComponentProps["loaderData"];
+};
+
+export const ApiAuthProvider = ({ children, loaderData }: ApiAuthProviderProps) => {
+  return (
+    <ClerkProvider signInUrl="/sign-in" loaderData={loaderData}>
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        <QueryClientProvider client={reactQueryClient}>{children}</QueryClientProvider>
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+  );
+};

package/templates/apps/web/src/providers/global_provider.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { ReactNode } from "react";
+import { createContext, useContext } from "react";
+
+export type GlobalContextValue = Record<string, never>;
+
+const GlobalContext = createContext<GlobalContextValue | undefined>(undefined);
+
+type GlobalProviderProps = {
+  children: ReactNode;
+};
+
+export const GlobalProvider = ({ children }: GlobalProviderProps) => {
+  return <GlobalContext.Provider value={{}}>{children}</GlobalContext.Provider>;
+};
+
+export const useGlobal = (): GlobalContextValue => {
+  const context = useContext(GlobalContext);
+
+  if (context === undefined) {
+    throw new Error("useGlobal must be used within a GlobalProvider");
+  }
+
+  return context;
+};

package/templates/apps/web/src/providers/navigation_loading_bar_provider.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useRef } from "react";
+import { useNavigation } from "react-router";
+import { LoadingBarContainer, useLoadingBar } from "react-top-loading-bar";
+
+export type NavigationLoadingBarApi = {
+  start: () => void;
+  complete: () => void;
+};
+
+const NavigationLoadingBarContext = createContext<NavigationLoadingBarApi | null>(null);
+
+type NavigationLoadingBarProviderProps = {
+  children: ReactNode;
+};
+
+const NavigationLoadingBarInner = ({ children }: NavigationLoadingBarProviderProps) => {
+  const navigation = useNavigation();
+
+  const { start, complete } = useLoadingBar({
+    color: "hsl(var(--primary))",
+    height: 2,
+    shadow: true,
+  });
+
+  const api = useMemo((): NavigationLoadingBarApi => {
+    return { start, complete };
+  }, [start, complete]);
+
+  const skippedInitialIdle = useRef(false);
+
+  useEffect(() => {
+    if (navigation.state !== "idle") {
+      start();
+      return;
+    }
+
+    if (!skippedInitialIdle.current) {
+      skippedInitialIdle.current = true;
+      return;
+    }
+
+    complete();
+  }, [navigation.state, start, complete]);
+
+  return (
+    <NavigationLoadingBarContext.Provider value={api}>
+      {children}
+    </NavigationLoadingBarContext.Provider>
+  );
+};
+
+export const NavigationLoadingBarProvider = ({ children }: NavigationLoadingBarProviderProps) => {
+  return (
+    <LoadingBarContainer>
+      <NavigationLoadingBarInner>{children}</NavigationLoadingBarInner>
+    </LoadingBarContainer>
+  );
+};
+
+export const useNavigationLoadingBar = (): NavigationLoadingBarApi => {
+  const ctx = useContext(NavigationLoadingBarContext);
+
+  if (!ctx) {
+    throw new Error("useNavigationLoadingBar must be used within NavigationLoadingBarProvider");
+  }
+
+  return ctx;
+};