create-aron-app 0.1.0 → 0.1.1

package/templates/nextjs/project.json

@@ -0,0 +1,22 @@
+{
+  "name": "my-app:web",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "./apps/web",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "dev": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "bunx next dev apps/web --port 5001"
+      }
+    },
+    "build": {
+      "executor": "@nx/next:build",
+      "options": {
+        "root": "apps/web",
+        "outputPath": "dist/apps/web"
+      }
+    }
+  }
+}

package/templates/nextjs/src/app/(auth)/layout.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Aron Weston 2025.
+ */
+
+import "../app.css";
+
+import { Toaster } from "sonner";
+
+
+type RootLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function AuthLayout({ children }: RootLayoutProps) {
+  return (
+    <main className="flex min-h-screen flex-col justify-center items-center overflow-hidden">
+      {children}
+      <Toaster />
+    </main>
+  );
+}

package/templates/nextjs/src/app/(auth)/not-allowed/page.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Aron Weston 2025.
+ */
+
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "Not Allowed",
+  description: "You are not allowed to access this page.",
+};
+
+export default async function NotAllowed() {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      <h1 className="text-2xl font-bold">Not Allowed</h1>
+      <p className="text-sm text-gray-500">You are not allowed to access this page.</p>
+      <Link href="/sign-in" className="text-blue-500">
+        Continue to login page
+      </Link>
+    </div>
+  );
+}

package/templates/nextjs/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) Aron Weston 2025.
+ */
+
+import { SignIn } from "@clerk/nextjs";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Sign In",
+  description: "Sign In to your account",
+};
+
+export default function LoginPage() {
+  return <SignIn withSignUp={true} />;
+}

package/templates/nextjs/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Aron Weston 2025.
+ */
+
+import { SidebarInset, SidebarProvider } from "@/ui/base/side_bar";
+import { Sidebar as AppSidebar } from "@/web/ui/sidebar/sidebar";
+
+type DashboardLayoutProps = {
+  children: React.ReactNode;
+  modal: React.ReactNode;
+};
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 45)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>{children}</SidebarInset>
+    </SidebarProvider>
+  );
+}

package/templates/nextjs/src/app/(dashboard)/page.tsx

@@ -0,0 +1,5 @@
+import { HomeSurface } from "@/web/surfaces/home_surface";
+
+export default function HomePage() {
+  return <HomeSurface />;
+}

package/templates/nextjs/src/app/(dashboard)/todos/[id]/page.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { Metadata } from "next";
+
+import type { TodoId } from "@/api/todos/types";
+import { SingleTodoSurface } from "@/web/surfaces/todos/single_todo_surface";
+
+type SingleTodoPageProps = {
+  params: Promise<{ id: TodoId }>;
+};
+
+export const metadata: Metadata = {
+  title: "Todo",
+  description: "Todo",
+};
+
+export default async function SingleTodoPage({ params }: SingleTodoPageProps) {
+  const { id } = await params;
+
+  return <SingleTodoSurface todoId={id} />;
+}

package/templates/nextjs/src/app/(dashboard)/todos/page.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { Metadata } from "next";
+
+import { AllTodosSurface } from "@/web/surfaces/todos/all_todos_surface";
+
+export const metadata: Metadata = {
+  title: "Todos",
+  description: "Todos",
+};
+
+export default function AllTodosPage() {
+  return <AllTodosSurface />;
+}

package/templates/nextjs/src/app/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/nextjs/src/app/layout.tsx

@@ -0,0 +1,26 @@
+import { ClerkProvider } from "@clerk/nextjs";
+import "./app.css";
+
+import { Toaster } from "sonner";
+
+import { ConvexClientProvider } from "@/web/providers/convex_provider";
+import { fontCn } from "@/web/utils/font";
+
+type RootLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <ClerkProvider dynamic>
+      <ConvexClientProvider>
+        <html lang="en" className={fontCn}>
+          <body>
+            {children}
+            <Toaster />
+          </body>
+        </html>
+      </ConvexClientProvider>
+    </ClerkProvider>
+  );
+}

package/templates/nextjs/src/convex.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) Aron Weston 2025.
+ */
+
+import { ConvexClient } from "convex/browser";
+
+if (!process.env.NEXT_PUBLIC_CONVEX_URL) {
+  throw new Error("Missing NEXT_PUBLIC_CONVEX_URL in your .env file");
+}
+
+export const convex = new ConvexClient(process.env.NEXT_PUBLIC_CONVEX_URL);

package/templates/nextjs/src/middleware.ts

@@ -0,0 +1,18 @@
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+
+const isPublicRoute = createRouteMatcher(["/sign-in(.*)"]);
+
+export default clerkMiddleware(async (auth, req) => {
+	if (!isPublicRoute(req)) {
+		await auth.protect();
+	}
+});
+
+export const config = {
+	matcher: [
+		// Skip Next.js internals and all static files, unless found in search params
+		"/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
+		// Always run for API routes
+		"/(api|trpc)(.*)",
+	],
+};

package/templates/nextjs/src/providers/convex_provider.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { useAuth } from "@clerk/nextjs";
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConvexReactClient } from "convex/react";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+import { type ReactNode, useState } from "react";
+
+if (!process.env.NEXT_PUBLIC_CONVEX_URL) {
+  throw new Error("Missing NEXT_PUBLIC_CONVEX_URL in your .env file");
+}
+
+export function ConvexClientProvider({ children }: { children: ReactNode }) {
+  const [{ convex, queryClient }] = useState(() => {
+    const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL as string);
+    const convexQueryClient = new ConvexQueryClient(convex);
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          queryKeyHashFn: convexQueryClient.hashFn(),
+          queryFn: convexQueryClient.queryFn(),
+        },
+      },
+    });
+
+    convexQueryClient.connect(queryClient);
+
+    return {
+      convex,
+      queryClient,
+    };
+  });
+
+  return (
+    <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </ConvexProviderWithClerk>
+  );
+}

package/templates/nextjs/src/surfaces/home_surface.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import Link from "next/link";
+
+import { Button } from "@/ui/base/button";
+
+export const HomeSurface = () => {
+  const { user } = useUser();
+
+  return (
+    <main className="flex flex-1 flex-col items-center justify-center gap-4 p-8">
+      <h1 className="text-3xl font-bold">
+        Welcome{user?.firstName ? `, ${user.firstName}` : ""}
+      </h1>
+      <p className="text-muted-foreground">Get started by managing your todos.</p>
+      <Button asChild>
+        <Link href="/todos">View Todos</Link>
+      </Button>
+    </main>
+  );
+};

package/templates/nextjs/src/surfaces/todos/all_todos_surface.tsx

@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Trash2 } from "lucide-react";
+import Link from "next/link";
+
+import { api } from "@/api/_generated/api";
+import type { Id } from "@/api/_generated/dataModel";
+import { Button } from "@/ui/base/button";
+import { Checkbox } from "@/ui/base/checkbox";
+import { Spinner } from "@/ui/base/spinner";
+import { CreateTodoSheet } from "@/web/surfaces/todos/create_todo_sheet";
+
+export const AllTodosSurface = () => {
+	const { user } = useUser();
+
+	const { data: todos, isPending } = useQuery(
+		convexQuery(
+			api.todos.crud.listTodos,
+			user?.id ? { userId: user.id } : "skip",
+		),
+	);
+
+	const { mutate: updateTodo } = useMutation({
+		mutationFn: useConvexMutation(api.todos.crud.updateTodo),
+	});
+
+	const { mutate: deleteTodo } = useMutation({
+		mutationFn: useConvexMutation(api.todos.crud.deleteTodo),
+	});
+
+	return (
+		<main className="flex flex-1 flex-col overflow-auto p-6">
+			<div className="flex items-center justify-between mb-6">
+				<h1 className="text-2xl font-semibold">Todos</h1>
+				<CreateTodoSheet />
+			</div>
+
+			{isPending && (
+				<div className="flex flex-1 items-center justify-center">
+					<Spinner />
+				</div>
+			)}
+
+			{!isPending && todos?.length === 0 && (
+				<div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground">
+					<p>No todos yet.</p>
+					<CreateTodoSheet />
+				</div>
+			)}
+
+			{todos && todos.length > 0 && (
+				<ul className="flex flex-col gap-2 max-w-2xl">
+					{todos.map((todo) => (
+						<li
+							key={todo._id}
+							className="flex items-center gap-3 rounded-lg border bg-card px-4 py-3"
+						>
+							<Checkbox
+								checked={todo.isCompleted}
+								onCheckedChange={(checked) =>
+									updateTodo({
+										todoId: todo._id as Id<"todos">,
+										isCompleted: !!checked,
+									})
+								}
+							/>
+							<Link
+								href={`/todos/${todo._id}`}
+								className="flex-1 truncate text-sm hover:underline"
+								style={{
+									textDecoration: todo.isCompleted ? "line-through" : undefined,
+								}}
+							>
+								{todo.title}
+							</Link>
+							<Button
+								variant="ghost"
+								size="icon"
+								className="size-7 shrink-0 text-muted-foreground hover:text-destructive"
+								onClick={() => deleteTodo({ todoId: todo._id as Id<"todos"> })}
+							>
+								<Trash2 className="size-4" />
+							</Button>
+						</li>
+					))}
+				</ul>
+			)}
+		</main>
+	);
+};

package/templates/nextjs/src/surfaces/todos/create_todo_sheet.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useConvexMutation } from "@convex-dev/react-query";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { PlusIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { api } from "@/api/_generated/api";
+import { Button } from "@/ui/base/button";
+import { DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/ui/base/dialog";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/base/form";
+import { Input } from "@/ui/base/input";
+import { Sheet, SheetContent, SheetTrigger } from "@/ui/base/sheet";
+import { TextArea } from "@/ui/base/text_area";
+
+type CreateTodoSchema = z.infer<typeof createTodoSchema>;
+const createTodoSchema = z.object({
+  title: z.string().min(1, "Title is required"),
+  description: z.string().optional(),
+});
+
+export const CreateTodoSheet = () => {
+  const form = useForm<CreateTodoSchema>({
+    resolver: zodResolver(createTodoSchema),
+    defaultValues: {
+      title: "",
+      description: "",
+    },
+  });
+
+  const { mutate: createTodo, isPending } = useMutation({
+    mutationFn: useConvexMutation(api.todos.crud.createTodo),
+  });
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    createTodo(values);
+    form.reset();
+  });
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>
+          <PlusIcon className="mr-2 size-4" />
+          New Todo
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="sm:max-w-[440px]">
+        <DialogHeader>
+          <DialogTitle>Create Todo</DialogTitle>
+          <DialogDescription>Add a new item to your todo list.</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col gap-4 pt-4"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleSubmit();
+              }
+            }}
+          >
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Title</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Buy groceries..." {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <TextArea
+                      placeholder="Optional details..."
+                      className="resize-none"
+                      rows={3}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="submit" disabled={isPending}>
+                {isPending ? "Creating..." : "Create Todo"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+};

package/templates/nextjs/src/surfaces/todos/single_todo_surface.tsx

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+
+import { api } from "@/api/_generated/api";
+import type { TodoId } from "@/api/todos/types";
+import { Badge } from "@/ui/base/badge";
+import { Button } from "@/ui/base/button";
+import { Checkbox } from "@/ui/base/checkbox";
+import { Spinner } from "@/ui/base/spinner";
+
+type SingleTodoSurfaceProps = {
+  todoId: TodoId;
+};
+
+export const SingleTodoSurface = ({ todoId }: SingleTodoSurfaceProps) => {
+  const { data: todo, isPending } = useQuery(convexQuery(api.todos.crud.getTodo, { todoId }));
+
+  const { mutate: updateTodo } = useMutation({
+    mutationFn: useConvexMutation(api.todos.crud.updateTodo),
+  });
+
+  if (isPending) {
+    return (
+      <main className="flex flex-1 items-center justify-center">
+        <Spinner />
+      </main>
+    );
+  }
+
+  if (!todo) {
+    return (
+      <main className="flex flex-1 flex-col items-center justify-center gap-4">
+        <p className="text-muted-foreground">Todo not found.</p>
+        <Button variant="outline" asChild>
+          <Link href="/todos">
+            <ArrowLeft className="mr-2 size-4" />
+            Back to todos
+          </Link>
+        </Button>
+      </main>
+    );
+  }
+
+  return (
+    <main className="flex flex-1 flex-col gap-6 overflow-auto p-6 max-w-2xl">
+      <Button variant="ghost" className="w-fit -ml-2 text-muted-foreground" asChild>
+        <Link href="/todos">
+          <ArrowLeft className="mr-2 size-4" />
+          Back
+        </Link>
+      </Button>
+
+      <div className="flex items-start gap-3">
+        <Checkbox
+          className="mt-1"
+          checked={todo.isCompleted}
+          onCheckedChange={(checked) =>
+            updateTodo({
+              todoId,
+              isCompleted: !!checked,
+            })
+          }
+        />
+        <div className="flex flex-col gap-2">
+          <h1
+            className="text-2xl font-semibold"
+            style={{
+              textDecoration: todo.isCompleted ? "line-through" : undefined,
+            }}
+          >
+            {todo.title}
+          </h1>
+          <Badge variant={todo.isCompleted ? "secondary" : "default"}>
+            {todo.isCompleted ? "Completed" : "In progress"}
+          </Badge>
+        </div>
+      </div>
+
+      {todo.description && <p className="text-muted-foreground">{todo.description}</p>}
+    </main>
+  );
+};

package/templates/nextjs/src/ui/sidebar/nav_link.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { SidebarMenuButton, SidebarMenuItem } from "@/ui/base/side_bar";
+
+type NavLinkProps = {
+  item: {
+    id: string;
+    title: string;
+    url: string;
+    icon: LucideIcon;
+  };
+};
+
+export const NavLink = ({ item }: NavLinkProps) => {
+  const pathname = usePathname();
+  const isActive = pathname === item.url;
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton asChild isActive={isActive} tooltip={item.title}>
+        <Link href={item.url}>
+          <item.icon />
+          <span>{item.title}</span>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+};