add convex

apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs

@@ -1,5 +1,3 @@
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
   isRouteErrorResponse,
   Links,
@@ -14,11 +12,17 @@ import Header from "./components/header";
 import { ThemeProvider } from "./components/theme-provider";
 import { Toaster } from "./components/ui/sonner";
 
-{{#if (eq api "orpc")}}
-import { orpc, ORPCContext, queryClient } from "./utils/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
-import { queryClient } from "./utils/trpc";
+{{#if (eq backend "convex")}}
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+{{else}}
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+  {{#if (eq api "orpc")}}
+  import { orpc, ORPCContext, queryClient } from "./utils/orpc";
+  {{/if}}
+  {{#if (eq api "trpc")}}
+  import { queryClient } from "./utils/trpc";
+  {{/if}}
 {{/if}}
 
 export const links: Route.LinksFunction = () => [
@@ -52,7 +56,25 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-{{#if (eq api "orpc")}}
+{{#if (eq backend "convex")}}
+export default function App() {
+  const convex = new ConvexReactClient(
+    import.meta.env.VITE_CONVEX_URL as string,
+  );
+
+  return (
+    <ConvexProvider client={convex}>
+      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <div className="grid grid-rows-[auto_1fr] h-svh">
+          <Header />
+          <Outlet />
+        </div>
+        <Toaster richColors />
+      </ThemeProvider>
+    </ConvexProvider>
+  );
+}
+{{else if (eq api "orpc")}}
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
@@ -69,9 +91,7 @@ export default function App() {
     </QueryClientProvider>
   );
 }
-{{/if}}
-
-{{#if (eq api "trpc")}}
+{{else if (eq api "trpc")}}
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>

apps/cli/templates/frontend/react/react-router/src/routes/_index.tsx.hbs

@@ -1,11 +1,16 @@
 import type { Route } from "./+types/_index";
-{{#if (eq api "orpc")}}
-import { orpc } from "@/utils/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
-import { trpc } from "@/utils/trpc";
-{{/if}}
+{{#if (eq backend "convex")}}
+import { useQuery } from "convex/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
+{{else}}
+  {{#if (eq api "orpc")}}
+  import { orpc } from "@/utils/orpc";
+  {{/if}}
+  {{#if (eq api "trpc")}}
+  import { trpc } from "@/utils/trpc";
+  {{/if}}
 import { useQuery } from "@tanstack/react-query";
+{{/if}}
 
 const TITLE_TEXT = `
  ██████╗ ███████╗████████╗████████╗███████╗██████╗
@@ -28,11 +33,11 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
-  
-  {{#if (eq api "orpc")}}
+  {{#if (eq backend "convex")}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{else if (eq api "orpc")}}
   const healthCheck = useQuery(orpc.healthCheck.queryOptions());
-  {{/if}}
-  {{#if (eq api "trpc")}}
+  {{else if (eq api "trpc")}}
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
   {{/if}}
 
@@ -43,6 +48,18 @@ export default function Home() {
         <section className="rounded-lg border p-4">
           <h2 className="mb-2 font-medium">API Status</h2>
           <div className="flex items-center gap-2">
+            {{#if (eq backend "convex")}}
+            <div
+              className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
+            />
+            <span className="text-sm text-muted-foreground">
+              {healthCheck === undefined
+                ? "Checking..."
+                : healthCheck === "OK"
+                  ? "Connected"
+                  : "Error"}
+            </span>
+            {{else}}
             <div
               className={`h-2 w-2 rounded-full ${
                 healthCheck.data ? "bg-green-500" : "bg-red-500"
@@ -55,46 +72,10 @@ export default function Home() {
                 ? "Connected"
                 : "Disconnected"}
             </span>
+            {{/if}}
           </div>
         </section>
-
-        <section>
-          <h2 className="mb-3 font-medium">Core Features</h2>
-          <ul className="grid grid-cols-2 gap-3">
-            <FeatureItem
-              title="Type-Safe API"
-              description="End-to-end type safety with tRPC"
-            />
-            <FeatureItem
-              title="Modern React"
-              description="TanStack Router + TanStack Query"
-            />
-            <FeatureItem
-              title="Fast Backend"
-              description="Lightweight Hono server"
-            />
-            <FeatureItem
-              title="Beautiful UI"
-              description="TailwindCSS + shadcn/ui components"
-            />
-          </ul>
-        </section>
       </div>
     </div>
   );
 }
-
-function FeatureItem({
-  title,
-  description,
-}: {
-  title: string;
-  description: string;
-}) {
-  return (
-    <li className="border-l-2 border-primary py-1 pl-3">
-      <h3 className="font-medium">{title}</h3>
-      <p className="text-sm text-muted-foreground">{description}</p>
-    </li>
-  );
-}