create-pilotprojects-app 0.1.0

package/templates/apps/mobile/global.css

@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background:            #ffffff;
+  --foreground:            #0f172a;
+  --card:                  #ffffff;
+  --card-foreground:       #0f172a;
+  --primary:               #3b82f6;
+  --primary-foreground:    #f8fafc;
+  --secondary:             #f1f5f9;
+  --secondary-foreground:  #1e293b;
+  --muted:                 #f1f5f9;
+  --muted-foreground:      #64748b;
+  --accent:                #f1f5f9;
+  --accent-foreground:     #1e293b;
+  --destructive:           #ef4444;
+  --destructive-foreground: #f8fafc;
+  --border:                #e2e8f0;
+  --input:                 #e2e8f0;
+  --ring:                  #3b82f6;
+  --radius:                6px;
+}
+
+.dark {
+  --background:            #0f172a;
+  --foreground:            #f8fafc;
+  --card:                  #0f172a;
+  --card-foreground:       #f8fafc;
+  --primary:               #60a5fa;
+  --primary-foreground:    #1e293b;
+  --secondary:             #1e293b;
+  --secondary-foreground:  #f8fafc;
+  --muted:                 #1e293b;
+  --muted-foreground:      #94a3b8;
+  --accent:                #1e293b;
+  --accent-foreground:     #f8fafc;
+  --destructive:           #7f1d1d;
+  --destructive-foreground: #f8fafc;
+  --border:                #1e293b;
+  --input:                 #1e293b;
+  --ring:                  #1d4ed8;
+}

package/templates/apps/mobile/lib/supabase.ts

@@ -0,0 +1,15 @@
+import { createClient } from "@supabase/supabase-js";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export const supabase = createClient(
+  process.env.EXPO_PUBLIC_SUPABASE_URL!,
+  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!,
+  {
+    auth: {
+      storage: AsyncStorage,
+      autoRefreshToken: true,
+      persistSession: true,
+      detectSessionInUrl: false,
+    },
+  },
+);

package/templates/apps/mobile/lib/trpc/client.ts

@@ -0,0 +1,30 @@
+import { createTRPCReact } from "@trpc/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import superjson from "superjson";
+
+import type { AppRouter } from "{{PACKAGE_SCOPE}}/api";
+
+import { supabase } from "../supabase";
+
+// Used for hooks: trpc.user.me.useQuery() etc.
+export const trpc = createTRPCReact<AppRouter>();
+
+// Used to create the underlying client passed to TRPCProvider
+export function makeTRPCClient() {
+  return createTRPCClient<AppRouter>({
+    links: [
+      httpBatchLink({
+        url: `${process.env.EXPO_PUBLIC_API_URL}/api/trpc`,
+        transformer: superjson,
+        async headers() {
+          const {
+            data: { session },
+          } = await supabase.auth.getSession();
+          return session?.access_token
+            ? { Authorization: `Bearer ${session.access_token}` }
+            : {};
+        },
+      }),
+    ],
+  });
+}

package/templates/apps/mobile/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@{{PACKAGE_SCOPE_SAFE}}/mobile",
+  "version": "0.1.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "dev": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "build:dev": "eas build --profile development --platform all",
+    "build:uat": "eas build --profile uat --platform all",
+    "build:production": "eas build --profile production --platform all",
+    "update:uat": "eas update --channel uat",
+    "update:production": "eas update --channel production",
+    "lint": "eslint . --ext .ts,.tsx",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "{{PACKAGE_SCOPE}}/api": "workspace:*",
+    "{{PACKAGE_SCOPE}}/auth": "workspace:*",
+    "{{PACKAGE_SCOPE}}/ui": "workspace:*",
+    "{{PACKAGE_SCOPE}}/validators": "workspace:*",
+    "@supabase/supabase-js": "^2.45.0",
+    "@react-native-async-storage/async-storage": "^2.0.0",
+    "@tanstack/react-query": "^5.56.0",
+    "@trpc/client": "^11.0.0",
+    "@trpc/react-query": "^11.0.0",
+    "@sentry/react-native": "^5.26.0",
+    "expo": "~52.0.0",
+    "expo-apple-authentication": "^7.1.0",
+    "expo-font": "~13.0.0",
+    "expo-router": "~4.0.0",
+    "expo-status-bar": "~2.0.0",
+    "nativewind": "~4.1.0",
+    "posthog-react-native": "^3.2.0",
+    "react": "18.3.1",
+    "react-native": "0.76.0",
+    "superjson": "^2.2.0",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@types/react": "~18.3.0",
+    "eslint": "^8.57.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.5.0"
+  }
+}

package/templates/apps/mobile/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "{{PACKAGE_SCOPE}}/config/typescript/react-native",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/apps/web/.env.development.example

@@ -0,0 +1,22 @@
+# Supabase (development project)
+DATABASE_URL=postgresql://postgres:postgres@localhost:54322/postgres
+SUPABASE_URL=http://localhost:54321
+SUPABASE_ANON_KEY=
+SUPABASE_SERVICE_ROLE_KEY=
+NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+
+# Sentry (optional — leave empty to disable)
+SENTRY_DSN=
+SENTRY_AUTH_TOKEN=
+NEXT_PUBLIC_SENTRY_DSN=
+
+# PostHog (optional)
+NEXT_PUBLIC_POSTHOG_KEY=
+POSTHOG_KEY=
+
+# Google Analytics (optional)
+NEXT_PUBLIC_GA_MEASUREMENT_ID=
+
+# App
+APP_URL=http://localhost:3000

package/templates/apps/web/app/(auth)/login/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { createBrowserClient } from "{{PACKAGE_SCOPE}}/auth/client";
+import { Button } from "{{PACKAGE_SCOPE}}/ui/web/button";
+import { Input } from "{{PACKAGE_SCOPE}}/ui/web/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "{{PACKAGE_SCOPE}}/ui/web/card";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const supabase = createBrowserClient();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleLogin(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const { error } = await supabase.auth.signInWithPassword({ email, password });
+
+    if (error) {
+      setError(error.message);
+      setLoading(false);
+      return;
+    }
+
+    router.push("/dashboard");
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 px-4">
+      <div className="mb-8 flex flex-col items-center gap-2">
+        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-lg font-bold text-primary-foreground">
+          A
+        </div>
+        <span className="text-xl font-semibold text-foreground">{{PROJECT_NAME}}</span>
+      </div>
+
+      <Card className="w-full max-w-sm shadow-md">
+        <CardHeader className="space-y-1 pb-4">
+          <CardTitle className="text-xl">Welcome back</CardTitle>
+          <CardDescription>Sign in to your account to continue</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleLogin} className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1.5" suppressHydrationWarning>
+              <label htmlFor="email" className="text-sm font-medium text-foreground">
+                Email
+              </label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="flex flex-col gap-1.5" suppressHydrationWarning>
+              <div className="flex items-center justify-between">
+                <label htmlFor="password" className="text-sm font-medium text-foreground">
+                  Password
+                </label>
+                <a href="/forgot-password" className="text-xs text-primary hover:underline">
+                  Forgot password?
+                </a>
+              </div>
+              <Input
+                id="password"
+                type="password"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+
+            {error && <p className="text-sm text-destructive">{error}</p>}
+
+            <Button type="submit" size="lg" className="w-full" disabled={loading}>
+              {loading ? "Signing in…" : "Sign in"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <p className="mt-6 text-sm text-muted-foreground">
+        Don&apos;t have an account?{" "}
+        <a href="/register" className="font-medium text-primary hover:underline">
+          Sign up
+        </a>
+      </p>
+    </div>
+  );
+}

package/templates/apps/web/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,21 @@
+import { api } from "@/lib/trpc/server";
+import { Card, CardContent, CardHeader, CardTitle } from "{{PACKAGE_SCOPE}}/ui/web/card";
+
+export default async function DashboardPage() {
+  const user = await api.user.me();
+
+  return (
+    <main className="container mx-auto p-8">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle>Welcome back</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">
+            {user.displayName ?? user.email}
+          </p>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

package/templates/apps/web/app/(dashboard)/layout.tsx

@@ -0,0 +1,14 @@
+import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
+
+import { createServerClient } from "{{PACKAGE_SCOPE}}/auth/server";
+
+export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const cookieStore = await cookies();
+  const supabase = createServerClient(cookieStore);
+  const { data: { user } } = await supabase.auth.getUser();
+
+  if (!user) redirect("/login");
+
+  return <>{children}</>;
+}

package/templates/apps/web/app/api/trpc/[trpc]/route.ts

@@ -0,0 +1,32 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+import { cookies } from "next/headers";
+
+import { appRouter } from "{{PACKAGE_SCOPE}}/api";
+import { db } from "{{PACKAGE_SCOPE}}/db";
+import { createServerClient } from "{{PACKAGE_SCOPE}}/auth/server";
+
+async function createContext() {
+  const cookieStore = await cookies();
+  const supabase = createServerClient(cookieStore);
+  const { data: { session } } = await supabase.auth.getSession();
+
+  return {
+    db,
+    session: session ?? null,
+    user: session?.user ?? null,
+  };
+}
+
+const handler = (req: Request) =>
+  fetchRequestHandler({
+    endpoint: "/api/trpc",
+    req,
+    router: appRouter,
+    createContext,
+    onError:
+      process.env.NODE_ENV === "development"
+        ? ({ error }) => console.error("tRPC error:", error)
+        : undefined,
+  });
+
+export { handler as GET, handler as POST };

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

@@ -0,0 +1,51 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background:   0 0% 100%;
+    --foreground:   222.2 84% 4.9%;
+    --card:         0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary:      221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary:    210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted:        210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent:       210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive:  0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border:       214.3 31.8% 91.4%;
+    --input:        214.3 31.8% 91.4%;
+    --ring:         221.2 83.2% 53.3%;
+    --radius:       0.5rem;
+  }
+
+  .dark {
+    --background:   222.2 84% 4.9%;
+    --foreground:   210 40% 98%;
+    --card:         222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary:      217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary:    217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted:        217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent:       217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive:  0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border:       217.2 32.6% 17.5%;
+    --input:        217.2 32.6% 17.5%;
+    --ring:         224.3 76.3% 48%;
+  }
+}
+
+@layer base {
+  * { @apply border-border; }
+  body { @apply bg-background text-foreground; }
+}

package/templates/apps/web/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+
+import { TRPCProvider } from "@/lib/trpc/provider";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
+
+export const metadata: Metadata = {
+  title: "{{PROJECT_NAME}}",
+  description: "Built with the Pilotprojects monorepo boilerplate",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.variable} font-sans antialiased`}>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <TRPCProvider>{children}</TRPCProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/templates/apps/web/lib/trpc/client.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { createTRPCReact } from "@trpc/react-query";
+
+import type { AppRouter } from "{{PACKAGE_SCOPE}}/api";
+
+export const trpc = createTRPCReact<AppRouter>();

package/templates/apps/web/lib/trpc/provider.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink } from "@trpc/client";
+import superjson from "superjson";
+
+import { trpc } from "./client";
+
+function getBaseUrl() {
+  if (typeof window !== "undefined") return "";
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+}
+
+export function TRPCProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () => new QueryClient({ defaultOptions: { queries: { staleTime: 60_000 } } }),
+  );
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        httpBatchLink({
+          url: `${getBaseUrl()}/api/trpc`,
+          transformer: superjson,
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  );
+}

package/templates/apps/web/lib/trpc/server.ts

@@ -0,0 +1,20 @@
+import { createCallerFactory } from "@trpc/server";
+import { cookies } from "next/headers";
+
+import { appRouter } from "{{PACKAGE_SCOPE}}/api";
+import { db } from "{{PACKAGE_SCOPE}}/db";
+import { createServerClient } from "{{PACKAGE_SCOPE}}/auth/server";
+
+const createCaller = createCallerFactory(appRouter);
+
+export const api = createCaller(async () => {
+  const cookieStore = await cookies();
+  const supabase = createServerClient(cookieStore);
+  const { data: { session } } = await supabase.auth.getSession();
+
+  return {
+    db,
+    session: session ?? null,
+    user: session?.user ?? null,
+  };
+});

package/templates/apps/web/middleware.ts

@@ -0,0 +1,10 @@
+import { updateSession } from "{{PACKAGE_SCOPE}}/auth/middleware";
+import type { NextRequest } from "next/server";
+
+export async function middleware(request: NextRequest) {
+  return updateSession(request);
+}
+
+export const config = {
+  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
+};

package/templates/apps/web/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@{{PACKAGE_SCOPE_SAFE}}/web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev --turbo",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "start": "next start"
+  },
+  "dependencies": {
+    "{{PACKAGE_SCOPE}}/api": "workspace:*",
+    "{{PACKAGE_SCOPE}}/auth": "workspace:*",
+    "{{PACKAGE_SCOPE}}/ui": "workspace:*",
+    "{{PACKAGE_SCOPE}}/validators": "workspace:*",
+    "@supabase/supabase-js": "^2.45.0",
+    "@supabase/ssr": "^0.5.0",
+    "@tanstack/react-query": "^5.56.0",
+    "@trpc/client": "^11.0.0",
+    "@trpc/react-query": "^11.0.0",
+    "@trpc/server": "^11.0.0",
+    "@sentry/nextjs": "^8.30.0",
+    "next": "15.0.0",
+    "posthog-js": "^1.161.0",
+    "posthog-node": "^4.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "superjson": "^2.2.0",
+    "zod": "^3.23.0",
+    "@next/third-parties": "^14.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "15.0.0",
+    "tailwindcss": "^3.4.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "typescript": "^5.5.0"
+  }
+}

package/templates/apps/web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/apps/web/sentry.client.config.ts

@@ -0,0 +1,10 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NODE_ENV,
+  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.2 : 1.0,
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+  integrations: [Sentry.replayIntegration()],
+});

package/templates/apps/web/sentry.edge.config.ts

@@ -0,0 +1,6 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+  tracesSampleRate: 0.1,
+});

package/templates/apps/web/sentry.server.config.ts

@@ -0,0 +1,7 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+  environment: process.env.NODE_ENV,
+  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.2 : 1.0,
+});

package/templates/apps/web/tailwind.config.ts

@@ -0,0 +1,12 @@
+import { preset } from "{{PACKAGE_SCOPE}}/ui/tailwind-preset";
+import type { Config } from "tailwindcss";
+
+export default {
+  presets: [preset],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "../../packages/ui/src/web/**/*.{ts,tsx}",
+  ],
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config;

package/templates/apps/web/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "{{PACKAGE_SCOPE}}/config/typescript/nextjs",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "noEmit": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/apps/web/types/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/templates/base/.prettierrc.js

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+module.exports = {
+  semi: true,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "all",
+  printWidth: 100,
+  plugins: ["prettier-plugin-tailwindcss"],
+};

package/templates/base/_gitignore

@@ -0,0 +1,30 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Build outputs
+dist/
+.next/
+out/
+
+# Environment variables
+.env
+.env.local
+.env.development
+.env.uat
+.env.production
+!.env.*.example
+
+# Turbo
+.turbo/
+
+# Expo
+.expo/
+apps/mobile/android/
+apps/mobile/ios/
+
+# Misc
+.DS_Store
+*.pem
+coverage/