├── .prettierrc
├── .eslintrc.json
├── .env.test
├── next.config.mjs
├── app
    ├── (splash)
    │   ├── page.tsx
    │   ├── GetStarted
    │   │   ├── ConvexLogo.tsx
    │   │   └── GetStarted.tsx
    │   └── layout.tsx
    ├── product
    │   ├── Chat
    │   │   ├── ChatIntro.tsx
    │   │   ├── randomName.ts
    │   │   ├── MessageList.tsx
    │   │   ├── Message.tsx
    │   │   └── Chat.tsx
    │   ├── page.tsx
    │   └── layout.tsx
    ├── layout.tsx
    ├── globals.css
    └── signin
    │   └── page.tsx
├── postcss.config.mjs
├── convex
    ├── http.ts
    ├── auth.config.ts
    ├── schema.ts
    ├── users.ts
    ├── _generated
    │   ├── api.js
    │   ├── api.d.ts
    │   ├── dataModel.d.ts
    │   ├── server.js
    │   └── server.d.ts
    ├── helpers.ts
    ├── auth.ts
    ├── tsconfig.json
    ├── tests.ts
    ├── messages.ts
    └── README.md
├── lib
    └── utils.ts
├── components
    ├── Code.tsx
    ├── ConvexClientProvider.tsx
    ├── ThemeToggle.tsx
    ├── ui
    │   ├── input.tsx
    │   ├── toggle.tsx
    │   ├── toggle-group.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   └── dropdown-menu.tsx
    ├── UserMenu.tsx
    └── GitHubLogo.tsx
├── components.json
├── e2e-tests
    ├── signout.spec.ts
    ├── signin.spec.ts
    └── README.md
├── .gitignore
├── tsconfig.json
├── middleware.ts
├── Justfile
├── README.md
├── public
    └── convex.svg
├── package.json
├── run-e2e-tests.sh
├── tailwind.config.ts
├── playwright.config.ts
├── backendHarness.js
└── LICENSE.txt


/.prettierrc:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals",
3 |   "ignorePatterns": ["convex/_generated"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.env.test:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_CONVEX_URL=http://127.0.0.1:3210
2 | NEXT_PUBLIC_E2E_TEST=true
3 | AUTH_E2E_TEST_SECRET=foobarbaz
4 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: false,
4 | };
5 | 
6 | export default nextConfig;
7 | 


--------------------------------------------------------------------------------
/app/(splash)/page.tsx:
--------------------------------------------------------------------------------
1 | import { GetStarted } from "@/app/(splash)/GetStarted/GetStarted";
2 | 
3 | export default function HomePage() {
4 |   return <GetStarted />;
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/convex/http.ts:
--------------------------------------------------------------------------------
1 | import { httpRouter } from "convex/server";
2 | import { auth } from "./auth";
3 | 
4 | const http = httpRouter();
5 | 
6 | auth.addHttpRoutes(http);
7 | 
8 | export default http;
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/convex/auth.config.ts:
--------------------------------------------------------------------------------
 1 | // eslint-disable-next-line import/no-anonymous-default-export
 2 | export default {
 3 |   providers: [
 4 |     {
 5 |       domain: process.env.CONVEX_SITE_URL,
 6 |       applicationID: "convex",
 7 |     },
 8 |   ],
 9 | };
10 | 


--------------------------------------------------------------------------------
/components/Code.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from "react";
 2 | 
 3 | export const Code = ({ children }: { children: ReactNode }) => {
 4 |   return (
 5 |     <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
 6 |       {children}
 7 |     </code>
 8 |   );
 9 | };
10 | 


--------------------------------------------------------------------------------
/convex/schema.ts:
--------------------------------------------------------------------------------
 1 | import { defineSchema, defineTable } from "convex/server";
 2 | import { v } from "convex/values";
 3 | import { authTables } from "@convex-dev/auth/server";
 4 | 
 5 | export default defineSchema({
 6 |   ...authTables,
 7 |   messages: defineTable({
 8 |     userId: v.id("users"),
 9 |     body: v.string(),
10 |   }),
11 | });
12 | 


--------------------------------------------------------------------------------
/convex/users.ts:
--------------------------------------------------------------------------------
 1 | import { getAuthUserId } from "@convex-dev/auth/server";
 2 | import { query } from "./_generated/server";
 3 | 
 4 | export const viewer = query({
 5 |   args: {},
 6 |   handler: async (ctx) => {
 7 |     const userId = await getAuthUserId(ctx);
 8 |     return userId !== null ? ctx.db.get(userId) : null;
 9 |   },
10 | });
11 | 


--------------------------------------------------------------------------------
/app/product/Chat/ChatIntro.tsx:
--------------------------------------------------------------------------------
 1 | export function ChatIntro() {
 2 |   return (
 3 |     <div className="flex flex-col gap-2">
 4 |       <h1 className=" text-lg font-semibold md:text-2xl">Chat</h1>
 5 |       <p className="hidden sm:block text-sm text-muted-foreground">
 6 |         Open this app in multiple browser windows to see the real-time database
 7 |         in action
 8 |       </p>
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "stone",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/app/product/Chat/randomName.ts:
--------------------------------------------------------------------------------
 1 | const namesList =
 2 |   "Robert,Linda,Daniel,Anthony,Donald,Paul,Kevin,Brian,Patricia,Jennifer," +
 3 |   "Elizabeth,William,Richard,Jessica,Lisa,Nancy,Matthew,Ashley,Kimberly," +
 4 |   "Donna,Kenneth,Melissa";
 5 | const names = namesList.split(",");
 6 | 
 7 | export function randomName(): string {
 8 |   const picked = names[Math.floor(Math.random() * names.length)];
 9 |   return Math.random() > 0.5 ? picked.slice(0, 3) : picked;
10 | }
11 | 


--------------------------------------------------------------------------------
/convex/_generated/api.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated `api` utility.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * To regenerate, run `npx convex dev`.
 8 |  * @module
 9 |  */
10 | 
11 | import { anyApi } from "convex/server";
12 | 
13 | /**
14 |  * A utility for referencing Convex functions in your app's API.
15 |  *
16 |  * Usage:
17 |  * ```js
18 |  * const myFunctionReference = api.myModule.myFunction;
19 |  * ```
20 |  */
21 | export const api = anyApi;
22 | export const internal = anyApi;
23 | 


--------------------------------------------------------------------------------
/components/ConvexClientProvider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { ConvexAuthNextjsProvider } from "@convex-dev/auth/nextjs";
 4 | import { ConvexReactClient } from "convex/react";
 5 | import { ReactNode } from "react";
 6 | 
 7 | const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 8 | 
 9 | export default function ConvexClientProvider({
10 |   children,
11 | }: {
12 |   children: ReactNode;
13 | }) {
14 |   return (
15 |     <ConvexAuthNextjsProvider client={convex}>
16 |       {children}
17 |     </ConvexAuthNextjsProvider>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/e2e-tests/signout.spec.ts:
--------------------------------------------------------------------------------
 1 | import { test, expect } from "@playwright/test";
 2 | 
 3 | test("signout works", async ({ page }) => {
 4 |   await page.goto("/signin");
 5 | 
 6 |   // await page.getByRole("link").getByText("Get Started").first().click();
 7 | 
 8 |   await page.getByLabel("Secret").fill(process.env.AUTH_E2E_TEST_SECRET!);
 9 | 
10 |   await page.getByRole("button").getByText("Sign in with secret").click();
11 | 
12 |   await page.getByRole("button", { name: "user menu" }).click();
13 | 
14 |   await page.getByRole("menuitem").getByText("Sign out").click();
15 | });
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 
38 | # Ignored for the template, you probably want to remove it:
39 | package-lock.json
40 | 


--------------------------------------------------------------------------------
/convex/helpers.ts:
--------------------------------------------------------------------------------
 1 | import { authTables } from "@convex-dev/auth/server";
 2 | import { internalMutation } from "./_generated/server";
 3 | import { v } from "convex/values";
 4 | 
 5 | // Deletes all auth-related data.
 6 | // Just for demoing purposes, feel free to delete.
 7 | export const reset = internalMutation({
 8 |   args: { forReal: v.string() },
 9 |   handler: async (ctx, args) => {
10 |     if (args.forReal !== "I know what I'm doing") {
11 |       throw new Error("You must know what you're doing to reset the database.");
12 |     }
13 |     for (const table of Object.keys(authTables)) {
14 |       for (const { _id } of await ctx.db.query(table as any).collect()) {
15 |         await ctx.db.delete(_id);
16 |       }
17 |     }
18 |   },
19 | });
20 | 


--------------------------------------------------------------------------------
/e2e-tests/signin.spec.ts:
--------------------------------------------------------------------------------
 1 | import { test, expect } from "@playwright/test";
 2 | 
 3 | test("signin fails correctly", async ({ page }) => {
 4 |   await page.goto("/");
 5 | 
 6 |   await page.getByRole("link").getByText("Get Started").first().click();
 7 | 
 8 |   await page
 9 |     .getByLabel("Secret")
10 |     .fill(
11 |       "for the love of all mighty please don't set this as the secret value",
12 |     );
13 | 
14 |   // Record the alert message
15 |   let message = "";
16 |   page.on("dialog", (dialog) => {
17 |     message = dialog.message();
18 |     dialog.accept();
19 |   });
20 | 
21 |   await page.getByRole("button").getByText("Sign in with secret").click();
22 | 
23 |   // Need to wait for the dialog to appear, it's async
24 |   await expect.poll(async () => message).toBe("Invalid secret");
25 | });
26 | 


--------------------------------------------------------------------------------
/components/ThemeToggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 4 | import { DesktopIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons";
 5 | import { useTheme } from "next-themes";
 6 | 
 7 | export function ThemeToggle() {
 8 |   const { theme, setTheme } = useTheme();
 9 |   return (
10 |     <ToggleGroup type="single" size="sm" onValueChange={setTheme} value={theme}>
11 |       <ToggleGroupItem value="light" aria-label="Light">
12 |         <SunIcon />
13 |       </ToggleGroupItem>
14 |       <ToggleGroupItem value="dark" aria-label="Dark">
15 |         <MoonIcon />
16 |       </ToggleGroupItem>
17 |       <ToggleGroupItem value="system" aria-label="System">
18 |         <DesktopIcon />
19 |       </ToggleGroupItem>
20 |     </ToggleGroup>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/app/product/Chat/MessageList.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode, useEffect, useRef } from "react";
 2 | 
 3 | export function MessageList({
 4 |   messages,
 5 |   children,
 6 | }: {
 7 |   messages: unknown;
 8 |   children: ReactNode;
 9 | }) {
10 |   const messageListRef = useRef<HTMLOListElement>(null);
11 | 
12 |   // Scrolls the list down when new messages
13 |   // are received or sent.
14 |   useEffect(() => {
15 |     if (messageListRef.current) {
16 |       messageListRef.current.scrollTo({
17 |         top: messageListRef.current.scrollHeight,
18 |         behavior: "smooth",
19 |       });
20 |     }
21 |   }, [messages]);
22 |   return (
23 |     <ol
24 |       ref={messageListRef}
25 |       className="flex grow flex-col gap-4 overflow-y-auto scroll-smooth px-8 py-4"
26 |     >
27 |       {children}
28 |     </ol>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": [
 4 |       "dom",
 5 |       "dom.iterable",
 6 |       "esnext"
 7 |     ],
 8 |     "allowJs": true,
 9 |     "skipLibCheck": true,
10 |     "strict": true,
11 |     "noEmit": true,
12 |     "esModuleInterop": true,
13 |     "module": "esnext",
14 |     "moduleResolution": "bundler",
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "jsx": "preserve",
18 |     "incremental": true,
19 |     "plugins": [
20 |       {
21 |         "name": "next"
22 |       }
23 |     ],
24 |     "paths": {
25 |       "@/*": [
26 |         "./*"
27 |       ]
28 |     },
29 |     "target": "ES2017"
30 |   },
31 |   "include": [
32 |     "next-env.d.ts",
33 |     "**/*.ts",
34 |     "**/*.tsx",
35 |     ".next/types/**/*.ts"
36 |   ],
37 |   "exclude": [
38 |     "node_modules"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/convex/auth.ts:
--------------------------------------------------------------------------------
 1 | import { ConvexCredentials } from "@convex-dev/auth/providers/ConvexCredentials";
 2 | import GitHub from "@auth/core/providers/github";
 3 | import { convexAuth } from "@convex-dev/auth/server";
 4 | import { internal } from "./_generated/api";
 5 | 
 6 | export const { auth, signIn, signOut, store } = convexAuth({
 7 |   providers: [
 8 |     GitHub,
 9 |     ConvexCredentials({
10 |       id: "secret",
11 |       authorize: async (params, ctx) => {
12 |         const secret = params.secret;
13 |         if (
14 |           process.env.AUTH_E2E_TEST_SECRET &&
15 |           secret === process.env.AUTH_E2E_TEST_SECRET
16 |         ) {
17 |           const user = await ctx.runQuery(internal.tests.getTestUser);
18 |           return { userId: user!._id };
19 |         }
20 |         throw new Error("Invalid secret");
21 |       },
22 |     }),
23 |   ],
24 | });
25 | 


--------------------------------------------------------------------------------
/convex/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   /* This TypeScript project config describes the environment that
 3 |    * Convex functions run in and is used to typecheck them.
 4 |    * You can modify it, but some settings required to use Convex.
 5 |    */
 6 |   "compilerOptions": {
 7 |     /* These settings are not required by Convex and can be modified. */
 8 |     "allowJs": true,
 9 |     "strict": true,
10 |     "moduleResolution": "Bundler",
11 |     "jsx": "react-jsx",
12 |     "skipLibCheck": true,
13 |     "allowSyntheticDefaultImports": true,
14 | 
15 |     /* These compiler options are required by Convex */
16 |     "target": "ESNext",
17 |     "lib": ["ES2021", "dom"],
18 |     "forceConsistentCasingInFileNames": true,
19 |     "module": "ESNext",
20 |     "isolatedModules": true,
21 |     "noEmit": true
22 |   },
23 |   "include": ["./**/*"],
24 |   "exclude": ["./_generated"]
25 | }
26 | 


--------------------------------------------------------------------------------
/app/product/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Chat } from "@/app/product/Chat/Chat";
 2 | import { ChatIntro } from "@/app/product/Chat/ChatIntro";
 3 | import { UserMenu } from "@/components/UserMenu";
 4 | import { api } from "@/convex/_generated/api";
 5 | import { convexAuthNextjsToken } from "@convex-dev/auth/nextjs/server";
 6 | import { fetchQuery } from "convex/nextjs";
 7 | 
 8 | export default async function ProductPage() {
 9 |   const viewer = await fetchQuery(
10 |     api.users.viewer,
11 |     {},
12 |     { token: await convexAuthNextjsToken() },
13 |   );
14 |   return (
15 |     <main className="flex max-h-screen grow flex-col overflow-hidden">
16 |       <div className="flex items-start justify-between border-b p-4">
17 |         <ChatIntro />
18 |         <UserMenu>{viewer!.name}</UserMenu>
19 |       </div>
20 |       <Chat viewer={viewer!._id} />
21 |     </main>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   convexAuthNextjsMiddleware,
 3 |   createRouteMatcher,
 4 |   nextjsMiddlewareRedirect,
 5 | } from "@convex-dev/auth/nextjs/server";
 6 | 
 7 | const isSignInPage = createRouteMatcher(["/signin"]);
 8 | const isProtectedRoute = createRouteMatcher(["/product(.*)"]);
 9 | 
10 | export default convexAuthNextjsMiddleware(async (request, { convexAuth }) => {
11 |   if (isSignInPage(request) && (await convexAuth.isAuthenticated())) {
12 |     return nextjsMiddlewareRedirect(request, "/product");
13 |   }
14 |   if (isProtectedRoute(request) && !(await convexAuth.isAuthenticated())) {
15 |     return nextjsMiddlewareRedirect(request, "/signin");
16 |   }
17 | });
18 | 
19 | export const config = {
20 |   // The following matcher runs middleware on all routes
21 |   // except static assets.
22 |   matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
23 | };
24 | 


--------------------------------------------------------------------------------
/app/product/Chat/Message.tsx:
--------------------------------------------------------------------------------
 1 | import { Id } from "@/convex/_generated/dataModel";
 2 | import { cn } from "@/lib/utils";
 3 | import { ReactNode } from "react";
 4 | 
 5 | export function Message({
 6 |   authorId,
 7 |   authorName,
 8 |   viewerId,
 9 |   children,
10 | }: {
11 |   authorId: Id<"users">;
12 |   authorName: string;
13 |   viewerId: Id<"users">;
14 |   children: ReactNode;
15 | }) {
16 |   return (
17 |     <li
18 |       className={cn(
19 |         "flex flex-col text-sm",
20 |         authorId === viewerId ? "items-end self-end" : "items-start self-start",
21 |       )}
22 |     >
23 |       <div className="mb-1 text-sm font-medium">{authorName}</div>
24 |       <p
25 |         className={cn(
26 |           "rounded-xl bg-muted px-3 py-2",
27 |           authorId === viewerId ? "rounded-tr-none" : "rounded-tl-none",
28 |         )}
29 |       >
30 |         {children}
31 |       </p>
32 |     </li>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
15 |           className,
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     );
21 |   },
22 | );
23 | Input.displayName = "Input";
24 | 
25 | export { Input };
26 | 


--------------------------------------------------------------------------------
/convex/tests.ts:
--------------------------------------------------------------------------------
 1 | import { createAccount } from "@convex-dev/auth/server";
 2 | import { internal } from "./_generated/api";
 3 | import { internalAction, internalQuery } from "./_generated/server";
 4 | 
 5 | const TEST_USER_EMAIL = "secret@secret.com";
 6 | 
 7 | export const getTestUser = internalQuery({
 8 |   args: {},
 9 |   handler: async (ctx) => {
10 |     return await ctx.db
11 |       .query("users")
12 |       .withIndex("email", (q) => q.eq("email", TEST_USER_EMAIL))
13 |       .unique();
14 |   },
15 | });
16 | 
17 | export const init = internalAction({
18 |   args: {},
19 |   handler: async (ctx) => {
20 |     const existingUser = await ctx.runQuery(internal.tests.getTestUser);
21 |     if (existingUser !== null) {
22 |       console.info("Test user already exists, skipping creation");
23 |       return;
24 |     }
25 |     await createAccount(ctx, {
26 |       provider: "secret",
27 |       account: { id: TEST_USER_EMAIL },
28 |       profile: { email: TEST_USER_EMAIL },
29 |     });
30 |     console.info("Test user created");
31 |   },
32 | });
33 | 


--------------------------------------------------------------------------------
/e2e-tests/README.md:
--------------------------------------------------------------------------------
 1 | # Run the e2e tests
 2 | 
 3 | ## The mostly automated way
 4 | 
 5 | The following instructions require some pre-work, but once you've done the first couple steps once
 6 | you can skip to running the test command at the end. 
 7 | 
 8 | 1. Clone [convex-backend](https://github.com/get-convex/convex-backend)
 9 | 
10 | 1. Follow the instructions in its [README](https://github.com/get-convex/convex-backend/blob/main/README.md) to get it building
11 | 
12 | 1. From the `test-nextjs` directory, run:
13 | 
14 | ```
15 | CONVEX_LOCAL_BACKEND_PATH=/path/to/your/convex-backend npm run test
16 | ```
17 | 
18 | ## The manual way
19 | 
20 | You'll need manage your own Convex deployment to follow these instructions.
21 | 
22 | 1. Set up your Convex deployment for auth ([instructions](https://labs.convex.dev/auth/setup/manual))
23 | 
24 | 1. Create a test user
25 | 
26 |    `npx convex run tests:init`
27 | 
28 | 1. Set up the secret on a Convex backend matching the one in `.env.test`:
29 | 
30 |    `npx convex env set AUTH_E2E_TEST_SECRET <something>`
31 | 
32 | 1. Run `playwright test`


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { ThemeProvider } from "next-themes";
 3 | import { Inter } from "next/font/google";
 4 | import "./globals.css";
 5 | import { ConvexAuthNextjsServerProvider } from "@convex-dev/auth/nextjs/server";
 6 | 
 7 | const inter = Inter({ subsets: ["latin"] });
 8 | 
 9 | export const metadata: Metadata = {
10 |   title: "Create Next App",
11 |   description: "Generated by create next app",
12 |   icons: {
13 |     icon: "/convex.svg",
14 |   },
15 | };
16 | 
17 | export default function RootLayout({
18 |   children,
19 | }: Readonly<{
20 |   children: React.ReactNode;
21 | }>) {
22 |   return (
23 |     // `suppressHydrationWarning` only affects the html tag,
24 |     // and is needed by `ThemeProvider` which sets the theme
25 |     // class attribute on it
26 |     <html lang="en" suppressHydrationWarning>
27 |       <body className={inter.className}>
28 |         <ThemeProvider attribute="class">
29 |           <ConvexAuthNextjsServerProvider>
30 |             {children}
31 |           </ConvexAuthNextjsServerProvider>
32 |         </ThemeProvider>
33 |       </body>
34 |     </html>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/convex/messages.ts:
--------------------------------------------------------------------------------
 1 | import { getAuthUserId } from "@convex-dev/auth/server";
 2 | import { query, mutation } from "./_generated/server";
 3 | import { v } from "convex/values";
 4 | 
 5 | export const list = query({
 6 |   args: {},
 7 |   handler: async (ctx) => {
 8 |     const userId = await getAuthUserId(ctx);
 9 |     if (userId === null) {
10 |       throw new Error("Not signed in");
11 |     }
12 |     // Grab the most recent messages.
13 |     const messages = await ctx.db.query("messages").order("desc").take(100);
14 |     // Reverse the list so that it's in a chronological order.
15 |     return Promise.all(
16 |       messages.reverse().map(async (message) => {
17 |         const { name, email, phone } = (await ctx.db.get(message.userId))!;
18 |         return { ...message, author: name ?? email ?? phone ?? "Anonymous" };
19 |       }),
20 |     );
21 |   },
22 | });
23 | 
24 | export const send = mutation({
25 |   args: { body: v.string() },
26 |   handler: async (ctx, { body }) => {
27 |     const userId = await getAuthUserId(ctx);
28 |     if (userId === null) {
29 |       throw new Error("Not signed in");
30 |     }
31 |     // Send a new message.
32 |     await ctx.db.insert("messages", { body, userId });
33 |   },
34 | });
35 | 


--------------------------------------------------------------------------------
/convex/_generated/api.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated `api` utility.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * To regenerate, run `npx convex dev`.
 8 |  * @module
 9 |  */
10 | 
11 | import type {
12 |   ApiFromModules,
13 |   FilterApi,
14 |   FunctionReference,
15 | } from "convex/server";
16 | import type * as auth from "../auth.js";
17 | import type * as helpers from "../helpers.js";
18 | import type * as http from "../http.js";
19 | import type * as messages from "../messages.js";
20 | import type * as tests from "../tests.js";
21 | import type * as users from "../users.js";
22 | 
23 | /**
24 |  * A utility for referencing Convex functions in your app's API.
25 |  *
26 |  * Usage:
27 |  * ```js
28 |  * const myFunctionReference = api.myModule.myFunction;
29 |  * ```
30 |  */
31 | declare const fullApi: ApiFromModules<{
32 |   auth: typeof auth;
33 |   helpers: typeof helpers;
34 |   http: typeof http;
35 |   messages: typeof messages;
36 |   tests: typeof tests;
37 |   users: typeof users;
38 | }>;
39 | export declare const api: FilterApi<
40 |   typeof fullApi,
41 |   FunctionReference<any, "public">
42 | >;
43 | export declare const internal: FilterApi<
44 |   typeof fullApi,
45 |   FunctionReference<any, "internal">
46 | >;
47 | 


--------------------------------------------------------------------------------
/Justfile:
--------------------------------------------------------------------------------
 1 | set fallback := true
 2 | set shell := ["bash", "-uc"]
 3 | set windows-shell := ["sh", "-uc"]
 4 | 
 5 | # `just --list` (or just `just`) will print all the recipes in
 6 | # the current Justfile. `just RECIPE` will run the macro/job.
 7 | #
 8 | # In several places there are recipes for running common scripts or commands.
 9 | # Instead of `Makefile`s, Convex uses Justfiles, which are similar, but avoid
10 | # several footguns associated with Makefiles, since using make as a macro runner
11 | # can sometimes conflict with Makefiles desire to have some rudimentary
12 | # understanding of build artifacts and associated dependencies.
13 | #
14 | # Read up on just here: https://github.com/casey/just
15 | 
16 | _default:
17 |   @just --list
18 | 
19 | set positional-arguments
20 | 
21 | reset-local-backend:
22 |   cd $CONVEX_LOCAL_BACKEND_PATH; rm -rf convex_local_storage && rm -f convex_local_backend.sqlite3
23 | 
24 | # (*) Run the open source convex backend on port 3210
25 | run-local-backend *ARGS:
26 |   cd $CONVEX_LOCAL_BACKEND_PATH && just run-local-backend --port 3210
27 | 
28 | # This uses the default admin key for local backends, which is safe as long as the backend is
29 | # running locally.
30 | # (*) Run convex CLI commands like `convex dev` against local backend from `just run-local-backend`.
31 | convex command *ARGS:
32 |   cd {{invocation_directory()}}; npx convex {{command}} --admin-key 0135d8598650f8f5cb0f30c34ec2e2bb62793bc28717c8eb6fb577996d50be5f4281b59181095065c5d0f86a2c31ddbe9b597ec62b47ded69782cd --url "http://127.0.0.1:3210" {{ARGS}}
33 | 
34 | 


--------------------------------------------------------------------------------
/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as TogglePrimitive from "@radix-ui/react-toggle";
 5 | import { cva, type VariantProps } from "class-variance-authority";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const toggleVariants = cva(
10 |   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
11 |   {
12 |     variants: {
13 |       variant: {
14 |         default: "bg-transparent",
15 |         outline:
16 |           "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
17 |       },
18 |       size: {
19 |         default: "h-9 px-3",
20 |         sm: "h-8 px-2",
21 |         lg: "h-10 px-3",
22 |       },
23 |     },
24 |     defaultVariants: {
25 |       variant: "default",
26 |       size: "default",
27 |     },
28 |   },
29 | );
30 | 
31 | const Toggle = React.forwardRef<
32 |   React.ElementRef<typeof TogglePrimitive.Root>,
33 |   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
34 |     VariantProps<typeof toggleVariants>
35 | >(({ className, variant, size, ...props }, ref) => (
36 |   <TogglePrimitive.Root
37 |     ref={ref}
38 |     className={cn(toggleVariants({ variant, size, className }))}
39 |     {...props}
40 |   />
41 | ));
42 | 
43 | Toggle.displayName = TogglePrimitive.Root.displayName;
44 | 
45 | export { Toggle, toggleVariants };
46 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to your Convex + Next.js app
 2 | 
 3 | This is a [Convex](https://convex.dev/) project created with [`npm create convex`](https://www.npmjs.com/package/create-convex).
 4 | 
 5 | After the initial setup (<2 minutes) you'll have a working full-stack app using:
 6 | 
 7 | - Convex as your backend (database, server logic)
 8 | - [React](https://react.dev/) as your frontend (web page interactivity)
 9 | - [Next.js](https://nextjs.org/) for optimized web hosting and page routing
10 | - [Tailwind](https://tailwindcss.com/) and [shadcn/ui](https://ui.shadcn.com/) for building great looking accessible UI fast
11 | 
12 | ## Get started
13 | 
14 | If you just cloned this codebase and didn't use `npm create convex`, run:
15 | 
16 | ```
17 | npm install
18 | npm run dev
19 | ```
20 | 
21 | If you're reading this README on GitHub and want to use this template, run:
22 | 
23 | ```
24 | npm create convex@latest -- -t nextjs-shadcn
25 | ```
26 | 
27 | ## Learn more
28 | 
29 | To learn more about developing your project with Convex, check out:
30 | 
31 | - The [Tour of Convex](https://docs.convex.dev/get-started) for a thorough introduction to Convex principles.
32 | - The rest of [Convex docs](https://docs.convex.dev/) to learn about all Convex features.
33 | - [Stack](https://stack.convex.dev/) for in-depth articles on advanced topics.
34 | 
35 | ## Join the community
36 | 
37 | Join thousands of developers building full-stack apps with Convex:
38 | 
39 | - Join the [Convex Discord community](https://convex.dev/community) to get help in real-time.
40 | - Follow [Convex on GitHub](https://github.com/get-convex/), star and contribute to the open-source implementation of Convex.
41 | 


--------------------------------------------------------------------------------
/app/product/layout.tsx:
--------------------------------------------------------------------------------
 1 | import ConvexClientProvider from "@/components/ConvexClientProvider";
 2 | import { cn } from "@/lib/utils";
 3 | import { ChatBubbleIcon, HomeIcon, ReaderIcon } from "@radix-ui/react-icons";
 4 | import Link from "next/link";
 5 | import { ReactNode } from "react";
 6 | 
 7 | export default async function ProductLayout({
 8 |   children,
 9 | }: {
10 |   children: ReactNode;
11 | }) {
12 |   return (
13 |     <ConvexClientProvider>
14 |       <div className="flex min-h-screen w-full">
15 |         <ProductMenu />
16 |         {children}
17 |       </div>
18 |     </ConvexClientProvider>
19 |   );
20 | }
21 | 
22 | function ProductMenu() {
23 |   return (
24 |     <aside className="w-48 border-r bg-muted/40 p-2">
25 |       <nav className="flex h-full max-h-screen flex-col gap-2">
26 |         <MenuLink href="/product" active>
27 |           <ChatBubbleIcon className="h-4 w-4" />
28 |           Chat
29 |         </MenuLink>
30 | 
31 |         <MenuLink href="https://docs.convex.dev">
32 |           <ReaderIcon className="h-4 w-4" />
33 |           Docs
34 |         </MenuLink>
35 |         <MenuLink href="/">
36 |           <HomeIcon className="h-4 w-4" />
37 |           Home
38 |         </MenuLink>
39 |       </nav>
40 |     </aside>
41 |   );
42 | }
43 | 
44 | function MenuLink({
45 |   active,
46 |   href,
47 |   children,
48 | }: {
49 |   active?: boolean;
50 |   href: string;
51 |   children: ReactNode;
52 | }) {
53 |   return (
54 |     <Link
55 |       href={href}
56 |       className={cn(
57 |         "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium  text-muted-foreground transition-all hover:text-primary",
58 |         active && "bg-muted text-primary",
59 |       )}
60 |     >
61 |       {children}
62 |     </Link>
63 |   );
64 | }
65 | 


--------------------------------------------------------------------------------
/public/convex.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg width="100%" height="100%" viewBox="0 0 367 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
 4 |     <g transform="matrix(1,0,0,1,-129.225,-127.948)">
 5 |         <g id="Layer-1" serif:id="Layer 1" transform="matrix(4.16667,0,0,4.16667,0,0)">
 6 |             <g transform="matrix(1,0,0,1,86.6099,107.074)">
 7 |                 <path d="M0,-6.544C13.098,-7.973 25.449,-14.834 32.255,-26.287C29.037,2.033 -2.48,19.936 -28.196,8.94C-30.569,7.925 -32.605,6.254 -34.008,4.088C-39.789,-4.83 -41.69,-16.18 -38.963,-26.48C-31.158,-13.247 -15.3,-5.131 0,-6.544" style="fill:rgb(245,176,26);fill-rule:nonzero;"/>
 8 |             </g>
 9 |             <g transform="matrix(1,0,0,1,47.1708,74.7779)">
10 |                 <path d="M0,-2.489C-5.312,9.568 -5.545,23.695 0.971,35.316C-21.946,18.37 -21.692,-17.876 0.689,-34.65C2.754,-36.197 5.219,-37.124 7.797,-37.257C18.41,-37.805 29.19,-33.775 36.747,-26.264C21.384,-26.121 6.427,-16.446 0,-2.489" style="fill:rgb(141,37,118);fill-rule:nonzero;"/>
11 |             </g>
12 |             <g transform="matrix(1,0,0,1,91.325,66.4152)">
13 |                 <path d="M0,-14.199C-7.749,-24.821 -19.884,-32.044 -33.173,-32.264C-7.482,-43.726 24.112,-25.143 27.557,2.322C27.877,4.876 27.458,7.469 26.305,9.769C21.503,19.345 12.602,26.776 2.203,29.527C9.838,15.64 8.889,-1.328 0,-14.199" style="fill:rgb(238,52,47);fill-rule:nonzero;"/>
14 |             </g>
15 |         </g>
16 |     </g>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "template-nextjs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "npm-run-all --parallel dev:frontend dev:backend",
 7 |     "dev:frontend": "next dev",
 8 |     "dev:backend": "convex dev",
 9 |     "predev": "convex dev --until-success && convex dashboard",
10 |     "build": "next build",
11 |     "start": "next start",
12 |     "lint": "next lint",
13 |     "testExistingBackend": "./run-e2e-tests.sh",
14 |     "test": "node backendHarness.js 'npm run testExistingBackend'"
15 |   },
16 |   "dependencies": {
17 |     "@convex-dev/auth": "0.0.75-alpha.1",
18 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
19 |     "@radix-ui/react-icons": "^1.3.0",
20 |     "@radix-ui/react-slot": "^1.1.0",
21 |     "@radix-ui/react-toggle": "^1.1.0",
22 |     "@radix-ui/react-toggle-group": "^1.1.0",
23 |     "class-variance-authority": "^0.7.0",
24 |     "clsx": "^2.1.1",
25 |     "convex": "1.17.1-alpha.1",
26 |     "next": "15.0.3",
27 |     "next-themes": "^0.4.0",
28 |     "react": "19.0.0-rc-66855b96-20241106",
29 |     "react-dom": "19.0.0-rc-66855b96-20241106",
30 |     "tailwind-merge": "^2.4.0",
31 |     "tailwindcss-animate": "^1.0.7"
32 |   },
33 |   "devDependencies": {
34 |     "@playwright/test": "^1.48.1",
35 |     "@types/node": "^20",
36 |     "@types/react": "npm:types-react@19.0.0-rc.1",
37 |     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
38 |     "eslint": "^8",
39 |     "eslint-config-next": "15.0.3",
40 |     "npm-run-all": "^4.1.5",
41 |     "postcss": "^8",
42 |     "prettier": "3.3.2",
43 |     "tailwindcss": "^3.4.1",
44 |     "typescript": "^5"
45 |   },
46 |   "overrides": {
47 |     "@types/react": "npm:types-react@19.0.0-rc.1",
48 |     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/app/product/Chat/Chat.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Button } from "@/components/ui/button";
 4 | import { Input } from "@/components/ui/input";
 5 | import { api } from "@/convex/_generated/api";
 6 | import { Id } from "@/convex/_generated/dataModel";
 7 | import { useMutation, useQuery } from "convex/react";
 8 | import { FormEvent, useState } from "react";
 9 | import { Message } from "./Message";
10 | import { MessageList } from "./MessageList";
11 | 
12 | export function Chat({ viewer }: { viewer: Id<"users"> }) {
13 |   const [newMessageText, setNewMessageText] = useState("");
14 |   const messages = useQuery(api.messages.list);
15 |   const sendMessage = useMutation(api.messages.send);
16 | 
17 |   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
18 |     event.preventDefault();
19 |     sendMessage({ body: newMessageText })
20 |       .then(() => {
21 |         setNewMessageText("");
22 |       })
23 |       .catch((error) => {
24 |         console.error("Failed to send message:", error);
25 |       });
26 |   };
27 | 
28 |   return (
29 |     <>
30 |       <MessageList messages={messages}>
31 |         {messages?.map((message) => (
32 |           <Message
33 |             key={message._id}
34 |             authorName={message.author}
35 |             authorId={message.userId}
36 |             viewerId={viewer}
37 |           >
38 |             {message.body}
39 |           </Message>
40 |         ))}
41 |       </MessageList>
42 |       <div className="border-t">
43 |         <form onSubmit={handleSubmit} className="flex gap-2 p-4">
44 |           <Input
45 |             value={newMessageText}
46 |             onChange={(event) => setNewMessageText(event.target.value)}
47 |             placeholder="Write a message…"
48 |           />
49 |           <Button type="submit" disabled={newMessageText === ""}>
50 |             Send
51 |           </Button>
52 |         </form>
53 |       </div>
54 |     </>
55 |   );
56 | }
57 | 


--------------------------------------------------------------------------------
/components/UserMenu.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { ThemeToggle } from "@/components/ThemeToggle";
 4 | import { Button } from "@/components/ui/button";
 5 | import {
 6 |   DropdownMenu,
 7 |   DropdownMenuContent,
 8 |   DropdownMenuItem,
 9 |   DropdownMenuLabel,
10 |   DropdownMenuSeparator,
11 |   DropdownMenuTrigger,
12 | } from "@/components/ui/dropdown-menu";
13 | import { useAuthActions } from "@convex-dev/auth/react";
14 | import { PersonIcon } from "@radix-ui/react-icons";
15 | import { useRouter } from "next/navigation";
16 | import { ReactNode } from "react";
17 | 
18 | export function UserMenu({ children }: { children: ReactNode }) {
19 |   return (
20 |     <div className="flex items-center gap-2 text-sm font-medium">
21 |       {children}
22 |       <DropdownMenu>
23 |         <DropdownMenuTrigger asChild>
24 |           <Button
25 |             variant="secondary"
26 |             size="icon"
27 |             className="rounded-full"
28 |             aria-label="user menu"
29 |           >
30 |             <PersonIcon className="h-5 w-5" />
31 |             <span className="sr-only">Toggle user menu</span>
32 |           </Button>
33 |         </DropdownMenuTrigger>
34 |         <DropdownMenuContent align="end">
35 |           <DropdownMenuLabel>{children}</DropdownMenuLabel>
36 |           <DropdownMenuSeparator />
37 |           <DropdownMenuLabel className="flex items-center gap-2 py-0 font-normal">
38 |             Theme
39 |             <ThemeToggle />
40 |           </DropdownMenuLabel>
41 |           <SignOutButton />
42 |         </DropdownMenuContent>
43 |       </DropdownMenu>
44 |     </div>
45 |   );
46 | }
47 | 
48 | function SignOutButton() {
49 |   const { signOut } = useAuthActions();
50 |   const router = useRouter();
51 |   return (
52 |     <DropdownMenuItem
53 |       onClick={() => void signOut().then(() => router.push("/"))}
54 |     >
55 |       Sign out
56 |     </DropdownMenuItem>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/convex/_generated/dataModel.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated data model types.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * To regenerate, run `npx convex dev`.
 8 |  * @module
 9 |  */
10 | 
11 | import type {
12 |   DataModelFromSchemaDefinition,
13 |   DocumentByName,
14 |   TableNamesInDataModel,
15 |   SystemTableNames,
16 | } from "convex/server";
17 | import type { GenericId } from "convex/values";
18 | import schema from "../schema.js";
19 | 
20 | /**
21 |  * The names of all of your Convex tables.
22 |  */
23 | export type TableNames = TableNamesInDataModel<DataModel>;
24 | 
25 | /**
26 |  * The type of a document stored in Convex.
27 |  *
28 |  * @typeParam TableName - A string literal type of the table name (like "users").
29 |  */
30 | export type Doc<TableName extends TableNames> = DocumentByName<
31 |   DataModel,
32 |   TableName
33 | >;
34 | 
35 | /**
36 |  * An identifier for a document in Convex.
37 |  *
38 |  * Convex documents are uniquely identified by their `Id`, which is accessible
39 |  * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids).
40 |  *
41 |  * Documents can be loaded using `db.get(id)` in query and mutation functions.
42 |  *
43 |  * IDs are just strings at runtime, but this type can be used to distinguish them from other
44 |  * strings when type checking.
45 |  *
46 |  * @typeParam TableName - A string literal type of the table name (like "users").
47 |  */
48 | export type Id<TableName extends TableNames | SystemTableNames> =
49 |   GenericId<TableName>;
50 | 
51 | /**
52 |  * A type describing your Convex data model.
53 |  *
54 |  * This type includes information about what tables you have, the type of
55 |  * documents stored in those tables, and the indexes defined on them.
56 |  *
57 |  * This type is used to parameterize methods like `queryGeneric` and
58 |  * `mutationGeneric` to make them type-safe.
59 |  */
60 | export type DataModel = DataModelFromSchemaDefinition<typeof schema>;
61 | 


--------------------------------------------------------------------------------
/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 5 | import { VariantProps } from "class-variance-authority";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | import { toggleVariants } from "@/components/ui/toggle";
 9 | 
10 | const ToggleGroupContext = React.createContext<
11 |   VariantProps<typeof toggleVariants>
12 | >({
13 |   size: "default",
14 |   variant: "default",
15 | });
16 | 
17 | const ToggleGroup = React.forwardRef<
18 |   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
19 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
20 |     VariantProps<typeof toggleVariants>
21 | >(({ className, variant, size, children, ...props }, ref) => (
22 |   <ToggleGroupPrimitive.Root
23 |     ref={ref}
24 |     className={cn("flex items-center justify-center gap-1", className)}
25 |     {...props}
26 |   >
27 |     <ToggleGroupContext.Provider value={{ variant, size }}>
28 |       {children}
29 |     </ToggleGroupContext.Provider>
30 |   </ToggleGroupPrimitive.Root>
31 | ));
32 | 
33 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
34 | 
35 | const ToggleGroupItem = React.forwardRef<
36 |   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
37 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
38 |     VariantProps<typeof toggleVariants>
39 | >(({ className, children, variant, size, ...props }, ref) => {
40 |   const context = React.useContext(ToggleGroupContext);
41 | 
42 |   return (
43 |     <ToggleGroupPrimitive.Item
44 |       ref={ref}
45 |       className={cn(
46 |         toggleVariants({
47 |           variant: context.variant || variant,
48 |           size: context.size || size,
49 |         }),
50 |         className,
51 |       )}
52 |       {...props}
53 |     >
54 |       {children}
55 |     </ToggleGroupPrimitive.Item>
56 |   );
57 | });
58 | 
59 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
60 | 
61 | export { ToggleGroup, ToggleGroupItem };
62 | 


--------------------------------------------------------------------------------
/app/(splash)/GetStarted/ConvexLogo.tsx:
--------------------------------------------------------------------------------
 1 | export const ConvexLogo = ({
 2 |   width,
 3 |   height,
 4 | }: {
 5 |   width?: number;
 6 |   height?: number;
 7 | }) => (
 8 |   <svg
 9 |     xmlns="http://www.w3.org/2000/svg"
10 |     fill="none"
11 |     className="fill-black dark:fill-white"
12 |     viewBox="0 0 126 20"
13 |     width={width ?? 63}
14 |     height={height ?? 10}
15 |   >
16 |     <g clipPath="url(#logo_svg__a)">
17 |       <path d="M3.185 17.467Q.358 14.938.358 10 .357 5.063 3.243 2.533 6.125.004 11.127.003q2.075-.001 3.672.305a11.6 11.6 0 0 1 3.055 1.034v5.339q-2.269-1.133-5.15-1.133-2.54 0-3.749 1.01Q7.744 7.57 7.745 10q-.001 2.35 1.192 3.4 1.19 1.054 3.77 1.053 2.73 0 5.19-1.335v5.585q-2.73 1.295-6.807 1.294c-3.388 0-6.02-.844-7.905-2.53M19.538 9.997q0-4.897 2.653-7.448 2.654-2.55 8-2.549c3.59 0 6.273.85 8.058 2.549q2.67 2.549 2.671 7.448 0 9.996-10.73 9.997-10.652.004-10.652-9.997M32.75 13.4q.786-1.055.786-3.4 0-2.307-.786-3.38-.788-1.073-2.56-1.073-1.73.002-2.5 1.073-.768 1.073-.768 3.38 0 2.35.768 3.4.768 1.054 2.5 1.053 1.77-.002 2.56-1.053M42.603.404h6.767l.193 1.458q1.116-.81 2.845-1.336A12.3 12.3 0 0 1 55.985 0q3.422 0 5 1.782c1.051 1.188 1.576 3.02 1.576 5.505v12.305h-7.228V8.055q0-1.296-.558-1.862c-.372-.38-.995-.565-1.867-.565q-.806 0-1.653.385a4.6 4.6 0 0 0-1.424.992v12.587h-7.228zM62.582.405h7.536l3.461 11.252L77.041.405h7.536l-7.192 19.187H69.77zM86.852 17.942c-2.171-1.714-3.187-4.69-3.187-7.903 0-3.13.808-5.708 2.654-7.49S90.976 0 94.526 0q4.898 0 7.71 2.388 2.81 2.39 2.811 6.517v3.362H91.302c.342.998.775 1.72 1.839 2.166q1.598.67 4.45.668 1.703 0 3.47-.282c.415-.068 1.098-.174 1.458-.254v4.665c-1.796.513-4.19.77-6.89.77-3.632-.003-6.605-.343-8.777-2.058m10.601-9.804c0-.95-1.04-2.995-3.129-2.995-1.884 0-3.129 2.013-3.129 2.995z"></path>
18 |       <path d="M110.723 9.836 103.955.405h7.844l13.843 19.187h-7.92l-3.077-4.292-3.078 4.292h-7.883zM117.548.405h7.808l-5.993 8.4-3.965-5.383z"></path>
19 |     </g>
20 |     <defs>
21 |       <clipPath id="logo_svg__a">
22 |         <path d="M0 0h126v20H0z"></path>
23 |       </clipPath>
24 |     </defs>
25 |   </svg>
26 | );
27 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   },
35 | );
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean;
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button";
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     );
53 |   },
54 | );
55 | Button.displayName = "Button";
56 | 
57 | export { Button, buttonVariants };
58 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | /* To change the theme colors, change the values below
 6 |   or use the "Copy code" button at https://ui.shadcn.com/themes */
 7 | @layer base {
 8 |   :root {
 9 |     --background: 0 0% 100%;
10 |     --foreground: 20 14.3% 4.1%;
11 |     --card: 0 0% 100%;
12 |     --card-foreground: 20 14.3% 4.1%;
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 20 14.3% 4.1%;
15 |     --primary: 24 9.8% 10%;
16 |     --primary-foreground: 60 9.1% 97.8%;
17 |     --secondary: 60 4.8% 95.9%;
18 |     --secondary-foreground: 24 9.8% 10%;
19 |     --muted: 60 4.8% 95.9%;
20 |     --muted-foreground: 25 5.3% 44.7%;
21 |     --accent: 60 4.8% 95.9%;
22 |     --accent-foreground: 24 9.8% 10%;
23 |     --destructive: 0 84.2% 60.2%;
24 |     --destructive-foreground: 60 9.1% 97.8%;
25 |     --border: 20 5.9% 90%;
26 |     --input: 20 5.9% 90%;
27 |     --ring: 20 14.3% 4.1%;
28 |     --radius: 0.5rem;
29 |     --chart-1: 12 76% 61%;
30 |     --chart-2: 173 58% 39%;
31 |     --chart-3: 197 37% 24%;
32 |     --chart-4: 43 74% 66%;
33 |     --chart-5: 27 87% 67%;
34 |   }
35 | 
36 |   .dark {
37 |     --background: 20 14.3% 4.1%;
38 |     --foreground: 60 9.1% 97.8%;
39 |     --card: 20 14.3% 4.1%;
40 |     --card-foreground: 60 9.1% 97.8%;
41 |     --popover: 20 14.3% 4.1%;
42 |     --popover-foreground: 60 9.1% 97.8%;
43 |     --primary: 60 9.1% 97.8%;
44 |     --primary-foreground: 24 9.8% 10%;
45 |     --secondary: 12 6.5% 15.1%;
46 |     --secondary-foreground: 60 9.1% 97.8%;
47 |     --muted: 12 6.5% 15.1%;
48 |     --muted-foreground: 24 5.4% 63.9%;
49 |     --accent: 12 6.5% 15.1%;
50 |     --accent-foreground: 60 9.1% 97.8%;
51 |     --destructive: 0 62.8% 30.6%;
52 |     --destructive-foreground: 60 9.1% 97.8%;
53 |     --border: 12 6.5% 15.1%;
54 |     --input: 12 6.5% 15.1%;
55 |     --ring: 24 5.7% 82.9%;
56 |     --chart-1: 220 70% 50%;
57 |     --chart-2: 160 60% 45%;
58 |     --chart-3: 30 80% 55%;
59 |     --chart-4: 280 65% 60%;
60 |     --chart-5: 340 75% 55%;
61 |   }
62 | }
63 | 
64 | @layer base {
65 |   * {
66 |     @apply border-border;
67 |   }
68 |   body {
69 |     @apply bg-background text-foreground;
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className,
14 |     )}
15 |     {...props}
16 |   />
17 | ));
18 | Card.displayName = "Card";
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ));
30 | CardHeader.displayName = "CardHeader";
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ));
42 | CardTitle.displayName = "CardTitle";
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ));
54 | CardDescription.displayName = "CardDescription";
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ));
62 | CardContent.displayName = "CardContent";
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ));
74 | CardFooter.displayName = "CardFooter";
75 | 
76 | export {
77 |   Card,
78 |   CardHeader,
79 |   CardFooter,
80 |   CardTitle,
81 |   CardDescription,
82 |   CardContent,
83 | };
84 | 


--------------------------------------------------------------------------------
/app/signin/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { GitHubLogo } from "@/components/GitHubLogo";
 4 | import { Button } from "@/components/ui/button";
 5 | import { Input } from "@/components/ui/input";
 6 | import { useAuthActions } from "@convex-dev/auth/react";
 7 | import Link from "next/link";
 8 | import { useRouter } from "next/navigation";
 9 | 
10 | export default function Sign() {
11 |   return (
12 |     <div className="flex min-h-screen w-full">
13 |       <main className="mx-auto my-auto flex-col flex">
14 |         <h2 className="font-semibold text-2xl tracking-tight mb-4">
15 |           Sign in or create an account
16 |         </h2>
17 |         <SignInWithGitHub />
18 |         {process.env.NEXT_PUBLIC_E2E_TEST && <SignInWithSecret />}
19 | 
20 |         <Button variant="link" className="text-muted-foreground" asChild>
21 |           <Link href="/">Cancel</Link>
22 |         </Button>
23 |       </main>
24 |     </div>
25 |   );
26 | }
27 | 
28 | function SignInWithGitHub() {
29 |   const { signIn } = useAuthActions();
30 |   return (
31 |     <Button
32 |       className="flex-1"
33 |       variant="outline"
34 |       type="button"
35 |       onClick={() => void signIn("github", { redirectTo: "/product" })}
36 |     >
37 |       <GitHubLogo className="mr-2 h-4 w-4" /> GitHub
38 |     </Button>
39 |   );
40 | }
41 | 
42 | // Only used in automated e2e tests
43 | function SignInWithSecret() {
44 |   const { signIn } = useAuthActions();
45 |   const router = useRouter();
46 |   return (
47 |     <form
48 |       className="flex flex-col gap-2 mt-8"
49 |       onSubmit={(event) => {
50 |         event.preventDefault();
51 |         const formData = new FormData(event.currentTarget);
52 |         signIn("secret", formData)
53 |           .then(() => {
54 |             router.push("/product");
55 |           })
56 |           .catch(() => {
57 |             window.alert("Invalid secret");
58 |           });
59 |       }}
60 |     >
61 |       Test only: Sign in with a secret
62 |       <Input
63 |         aria-label="Secret"
64 |         type="text"
65 |         name="secret"
66 |         placeholder="secret value"
67 |       />
68 |       <Button className="flex-1" variant="outline" type="submit">
69 |         Sign in with secret
70 |       </Button>
71 |     </form>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/components/GitHubLogo.tsx:
--------------------------------------------------------------------------------
 1 | export function GitHubLogo(props: React.HTMLAttributes<SVGElement>) {
 2 |   return (
 3 |     <svg viewBox="0 0 438.549 438.549" {...props}>
 4 |       <path
 5 |         fill="currentColor"
 6 |         d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
 7 |       ></path>
 8 |     </svg>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/run-e2e-tests.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | set -e
 3 | just convex env set JWT_PRIVATE_KEY -- '"-----BEGIN PRIVATE KEY----- MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDxgLGw9Mgsb0R+ 63hiQW81pHVIcatTws6PCIEvnH/fG6JBtZrQLxfXt3UynHE9oBqhDCKyf/q4QA9S DJMTmtSqHttIAYgPhKNBLe07l3drK/JvTDGYbgV23qVhPlwD4MuQJROCPGGv8Ch3 ce+JUmR6mFAbUH0Id9S38IqpP2VxxnFLqM0YqEuzeoZ7qHkAIOInDSTj4+k4vlrF sZ5iLINhhxuS3DCTOhvud3mvQ7jzRvB7xvciClU0m5kG9esqGPI08FZwaa7qy+Bt F7jgj5Dy4KMnIETSxpRqAeI7yuXPNBSpjWgeNcuX8aqZyhXiallRs+ZF4BVyQBVc 2wLPZlx/AgMBAAECggEAdVKOAGeKb3vGjNob66/aNPcmOwFtuA1lh7sb92NSA7NL Ch0NjqGyNYvcla/Gm6eSCDb7DDh8NtJ4HuYY9Wc8dUD0SnDkBpXrMZj8LP0SeLAq 4MLlPSYF5Y+YTDudPA0TF33LknN/CZfkMNLbCZ1LTvt7vylE9L4ySwHCeyJfR/us KFKj/64BIwfjl1kJcMJi4rQF/ZL1LGrO0E75UzLyhoQ7WtVjU9S7sFV+7lucOcZG PG8ffanXTa5BbhSr/QI2JUDBigAaNa9fAFn7o4smUUUjK3AdbrlHu3DCWZExJmOt SFeJmsMi/gXyoa60L8hSZRpP2VXTrCFJAUYz9K8Q4QKBgQD7T5YXTsujBVV6pr9M tYpuwv5KLI/uMrOU/23I0jmLRSuigWcsLKnq1wffCzvj419k4xCugT6je5BO92WU QAFa/UXsyEk4LfrfnlSMyWhP4kHYPPJ1W7oIZrH4r92yI+pylINb8T/yPANXvgUK 3gzdX4xZTiq1pUcaf9SxJH4s2QKBgQD2AkING6bog9/gBBaxcnR1Hm8tKzP9FkjS IdFzORt24oXAgmQQ6xLXTOnHzGw5TXGrIGFHKItUIgLSUN6fjoXiQfNV5xai6je1 qVVBf6TeAAM3r0+GsJ1fWVweqS6t+LqjzYCl/e6twMk39Q4V+wzJRRzhiud96+fP 23Bh0oHdFwKBgQCHD1WVfyZXnWU7/mNvAV29exQYnuxXUm5K1B+XPsvoOitiMXNW PUawTBIR38K3DZpV6OYtMo6MY7rBhZnU27UexmEPCPC4vZVHGptL8m4aCHnkkZSo V7yaCT76bOGTfFPickhKYFRChdgyDpA9L+rwCgqucCDp8EJPToXrEbaxuQKBgQDC c4J2DfdeLm7VCSZO2GNI9+d00oNjdyvUPLrr0qXs0JxcUDR8UvMvjzHypZidqqNA WnXJ4zhOJhwI1bdCc0tMTkjjC6gO2gdy5gfnn9dXSrdAWqgHlK6v4Vg5PA0TolkU hKk9i3wPhyUFwAOESE4RAToU5NCZ7c/rsk4gZF4VvQKBgQCBBxZTKCymPCiFqPkb sLOtZDEPIOud9Ql8dc/z2rkwhjsERRiGy6b3YR7O+PVRXIJq6nu6hygBr10Imo7G jfFQsT3NlNEwvmu7INDDuhW0UhVjal9OlPuf7VZGGDLMNomyeRdBH4yxzziZsDzl q4CPk75t3by5e9jr9DaU7ZAk2w== -----END PRIVATE KEY-----"'
 4 | just convex env set JWKS='"{\"keys\":[{\"use\":\"sig\",\"kty\":\"RSA\",\"n\":\"8YCxsPTILG9Efut4YkFvNaR1SHGrU8LOjwiBL5x_3xuiQbWa0C8X17d1MpxxPaAaoQwisn_6uEAPUgyTE5rUqh7bSAGID4SjQS3tO5d3ayvyb0wxmG4Fdt6lYT5cA-DLkCUTgjxhr_Aod3HviVJkephQG1B9CHfUt_CKqT9lccZxS6jNGKhLs3qGe6h5ACDiJw0k4-PpOL5axbGeYiyDYYcbktwwkzob7nd5r0O480bwe8b3IgpVNJuZBvXrKhjyNPBWcGmu6svgbRe44I-Q8uCjJyBE0saUagHiO8rlzzQUqY1oHjXLl_GqmcoV4mpZUbPmReAVckAVXNsCz2Zcfw\",\"e\":\"AQAB\"}]}"'
 5 | just convex env set AUTH_E2E_TEST_SECRET foobarbaz
 6 | just convex env set IS_TEST true
 7 | just convex deploy
 8 | just convex run tests:init
 9 | playwright test
10 | 


--------------------------------------------------------------------------------
/app/(splash)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/components/ui/button";
 2 | import Link from "next/link";
 3 | import { ReactNode } from "react";
 4 | 
 5 | export default function SplashPageLayout({
 6 |   children,
 7 | }: {
 8 |   children: ReactNode;
 9 | }) {
10 |   return (
11 |     <div className="flex min-h-screen w-full flex-col">
12 |       <header className="sticky top-0 z-10 flex h-20 border-b bg-background/80 px-4 backdrop-blur md:px-6">
13 |         <nav className="container hidden w-full justify-between gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
14 |           <Link href="/">
15 |             <h1 className="text-base font-semibold">Next.js Template</h1>
16 |           </Link>
17 |           <div className="flex items-center gap-4">
18 |             <SplashPageNav />
19 |           </div>
20 |         </nav>
21 |       </header>
22 |       <main className="flex grow flex-col">{children}</main>
23 |       <footer className="border-t">
24 |         <div className="container py-4 text-sm leading-loose">
25 |           Built with ❤️ at{" "}
26 |           <FooterLink href="https://www.convex.dev/">Convex</FooterLink>.
27 |           Powered by Convex,{" "}
28 |           <FooterLink href="https://nextjs.org/">Next.js</FooterLink> and{" "}
29 |           <FooterLink href="https://ui.shadcn.com/">shadcn/ui</FooterLink>.
30 |         </div>
31 |       </footer>
32 |     </div>
33 |   );
34 | }
35 | 
36 | function FooterLink({ href, children }: { href: string; children: ReactNode }) {
37 |   return (
38 |     <Link
39 |       href={href}
40 |       className="underline underline-offset-4 hover:no-underline"
41 |       target="_blank"
42 |     >
43 |       {children}
44 |     </Link>
45 |   );
46 | }
47 | 
48 | function SplashPageNav() {
49 |   return (
50 |     <>
51 |       <Link
52 |         href="https://docs.convex.dev"
53 |         className="text-muted-foreground transition-colors hover:text-foreground"
54 |       >
55 |         Docs
56 |       </Link>
57 |       <Link
58 |         href="https://stack.convex.dev"
59 |         className="text-muted-foreground transition-colors hover:text-foreground"
60 |       >
61 |         Stack
62 |       </Link>
63 |       <Link
64 |         href="https://www.convex.dev/community"
65 |         className="text-muted-foreground transition-colors hover:text-foreground"
66 |       >
67 |         Discord
68 |       </Link>
69 |       <Link href="/product">
70 |         <Button>Get Started</Button>
71 |       </Link>
72 |     </>
73 |   );
74 | }
75 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config = {
 4 |   darkMode: "selector",
 5 |   content: [
 6 |     "./pages/**/*.{ts,tsx}",
 7 |     "./components/**/*.{ts,tsx}",
 8 |     "./app/**/*.{ts,tsx}",
 9 |     "./src/**/*.{ts,tsx}",
10 |   ],
11 |   safelist: ["dark"],
12 |   prefix: "",
13 |   theme: {
14 |     container: {
15 |       center: true,
16 |       padding: "2rem",
17 |       screens: {
18 |         "2xl": "1400px",
19 |       },
20 |     },
21 |     extend: {
22 |       colors: {
23 |         border: "hsl(var(--border))",
24 |         input: "hsl(var(--input))",
25 |         ring: "hsl(var(--ring))",
26 |         background: "hsl(var(--background))",
27 |         foreground: "hsl(var(--foreground))",
28 |         primary: {
29 |           DEFAULT: "hsl(var(--primary))",
30 |           foreground: "hsl(var(--primary-foreground))",
31 |         },
32 |         secondary: {
33 |           DEFAULT: "hsl(var(--secondary))",
34 |           foreground: "hsl(var(--secondary-foreground))",
35 |         },
36 |         destructive: {
37 |           DEFAULT: "hsl(var(--destructive))",
38 |           foreground: "hsl(var(--destructive-foreground))",
39 |         },
40 |         muted: {
41 |           DEFAULT: "hsl(var(--muted))",
42 |           foreground: "hsl(var(--muted-foreground))",
43 |         },
44 |         accent: {
45 |           DEFAULT: "hsl(var(--accent))",
46 |           foreground: "hsl(var(--accent-foreground))",
47 |         },
48 |         popover: {
49 |           DEFAULT: "hsl(var(--popover))",
50 |           foreground: "hsl(var(--popover-foreground))",
51 |         },
52 |         card: {
53 |           DEFAULT: "hsl(var(--card))",
54 |           foreground: "hsl(var(--card-foreground))",
55 |         },
56 |       },
57 |       borderRadius: {
58 |         lg: "var(--radius)",
59 |         md: "calc(var(--radius) - 2px)",
60 |         sm: "calc(var(--radius) - 4px)",
61 |       },
62 |       keyframes: {
63 |         "accordion-down": {
64 |           from: { height: "0" },
65 |           to: { height: "var(--radix-accordion-content-height)" },
66 |         },
67 |         "accordion-up": {
68 |           from: { height: "var(--radix-accordion-content-height)" },
69 |           to: { height: "0" },
70 |         },
71 |       },
72 |       animation: {
73 |         "accordion-down": "accordion-down 0.2s ease-out",
74 |         "accordion-up": "accordion-up 0.2s ease-out",
75 |       },
76 |     },
77 |   },
78 |   plugins: [require("tailwindcss-animate")],
79 | } satisfies Config;
80 | 
81 | export default config;
82 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, devices } from "@playwright/test";
 2 | 
 3 | /**
 4 |  * Read environment variables from file.
 5 |  * https://github.com/motdotla/dotenv
 6 |  */
 7 | import dotenv from "dotenv";
 8 | import path from "path";
 9 | dotenv.config({ path: path.resolve(__dirname, ".env.test") });
10 | 
11 | /**
12 |  * See https://playwright.dev/docs/test-configuration.
13 |  */
14 | export default defineConfig({
15 |   testDir: "./e2e-tests",
16 |   /* Run tests in files in parallel */
17 |   fullyParallel: true,
18 |   /* Fail the build on CI if you accidentally left test.only in the source code. */
19 |   forbidOnly: !!process.env.CI,
20 |   /* Retry on CI only */
21 |   retries: process.env.CI ? 2 : 0,
22 |   /* Opt out of parallel tests on CI. */
23 |   workers: process.env.CI ? 1 : undefined,
24 |   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
25 |   reporter: "html",
26 |   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
27 |   use: {
28 |     /* Base URL to use in actions like `await page.goto('/')`. */
29 |     baseURL: "http://127.0.0.1:3000",
30 | 
31 |     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
32 |     trace: "on-first-retry",
33 |   },
34 | 
35 |   /* Configure projects for major browsers */
36 |   projects: [
37 |     {
38 |       name: "chromium",
39 |       use: { ...devices["Desktop Chrome"] },
40 |     },
41 | 
42 |     {
43 |       name: "firefox",
44 |       use: { ...devices["Desktop Firefox"] },
45 |     },
46 | 
47 |     {
48 |       name: "webkit",
49 |       use: { ...devices["Desktop Safari"] },
50 |     },
51 | 
52 |     /* Test against mobile viewports. */
53 |     // {
54 |     //   name: 'Mobile Chrome',
55 |     //   use: { ...devices['Pixel 5'] },
56 |     // },
57 |     // {
58 |     //   name: 'Mobile Safari',
59 |     //   use: { ...devices['iPhone 12'] },
60 |     // },
61 | 
62 |     /* Test against branded browsers. */
63 |     // {
64 |     //   name: 'Microsoft Edge',
65 |     //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
66 |     // },
67 |     // {
68 |     //   name: 'Google Chrome',
69 |     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
70 |     // },
71 |   ],
72 | 
73 |   /* Run local dev server before starting the tests */
74 |   webServer: {
75 |     command: process.env.CI
76 |       ? "npm run build && npm run start"
77 |       : "npm run dev:frontend",
78 |     url: "http://127.0.0.1:3000",
79 |     reuseExistingServer: !process.env.CI,
80 |   },
81 | });
82 | 


--------------------------------------------------------------------------------
/convex/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to your Convex functions directory!
 2 | 
 3 | Write your Convex functions here.
 4 | See https://docs.convex.dev/functions for more.
 5 | 
 6 | A query function that takes two arguments looks like:
 7 | 
 8 | ```ts
 9 | // functions.js
10 | import { query } from "./_generated/server";
11 | import { v } from "convex/values";
12 | 
13 | export const myQueryFunction = query({
14 |   // Validators for arguments.
15 |   args: {
16 |     first: v.number(),
17 |     second: v.string(),
18 |   },
19 | 
20 |   // Function implementation.
21 |   handler: async (ctx, args) => {
22 |     // Read the database as many times as you need here.
23 |     // See https://docs.convex.dev/database/reading-data.
24 |     const documents = await ctx.db.query("tablename").collect();
25 | 
26 |     // Arguments passed from the client are properties of the args object.
27 |     console.log(args.first, args.second);
28 | 
29 |     // Write arbitrary JavaScript here: filter, aggregate, build derived data,
30 |     // remove non-public properties, or create new objects.
31 |     return documents;
32 |   },
33 | });
34 | ```
35 | 
36 | Using this query function in a React component looks like:
37 | 
38 | ```ts
39 | const data = useQuery(api.functions.myQueryFunction, {
40 |   first: 10,
41 |   second: "hello",
42 | });
43 | ```
44 | 
45 | A mutation function looks like:
46 | 
47 | ```ts
48 | // functions.js
49 | import { mutation } from "./_generated/server";
50 | import { v } from "convex/values";
51 | 
52 | export const myMutationFunction = mutation({
53 |   // Validators for arguments.
54 |   args: {
55 |     first: v.string(),
56 |     second: v.string(),
57 |   },
58 | 
59 |   // Function implementation.
60 |   handler: async (ctx, args) => {
61 |     // Insert or modify documents in the database here.
62 |     // Mutations can also read from the database like queries.
63 |     // See https://docs.convex.dev/database/writing-data.
64 |     const message = { body: args.first, author: args.second };
65 |     const id = await ctx.db.insert("messages", message);
66 | 
67 |     // Optionally, return a value from your mutation.
68 |     return await ctx.db.get(id);
69 |   },
70 | });
71 | ```
72 | 
73 | Using this mutation function in a React component looks like:
74 | 
75 | ```ts
76 | const mutation = useMutation(api.functions.myMutationFunction);
77 | function handleButtonPress() {
78 |   // fire and forget, the most common way to use mutations
79 |   mutation({ first: "Hello!", second: "me" });
80 |   // OR
81 |   // use the result once the mutation has completed
82 |   mutation({ first: "Hello!", second: "me" }).then((result) =>
83 |     console.log(result),
84 |   );
85 | }
86 | ```
87 | 
88 | Use the Convex CLI to push your functions to a deployment. See everything
89 | the Convex CLI can do by running `npx convex -h` in your project root
90 | directory. To learn more, launch the docs with `npx convex docs`.
91 | 


--------------------------------------------------------------------------------
/backendHarness.js:
--------------------------------------------------------------------------------
 1 | // Taken from https://github.com/get-convex/convex-chess/blob/main/backendHarness.js
 2 | 
 3 | const http = require("http");
 4 | const { spawn, exec, execSync } = require("child_process");
 5 | 
 6 | // Run a command against a fresh local backend, handling setting up and tearing down the backend.
 7 | 
 8 | // Checks for a local backend running on port 3210.
 9 | const parsedUrl = new URL("http://127.0.0.1:3210");
10 | 
11 | async function isBackendRunning(backendUrl) {
12 |   return new Promise ((resolve) => {
13 |   http
14 |   .request(
15 |     {
16 |       hostname: backendUrl.hostname,
17 |       port: backendUrl.port,
18 |       path: "/version",
19 |       method: "GET",
20 |     },
21 |     (res) => {
22 |       resolve(res.statusCode === 200)
23 |     }
24 |   )
25 |   .on("error", () => { resolve(false) })
26 |   .end();
27 |   })
28 | }
29 | 
30 | function sleep(ms) {
31 |   return new Promise((resolve) => setTimeout(resolve, ms));
32 | }
33 | 
34 | const waitForLocalBackendRunning = async (backendUrl) => {
35 |   let isRunning = await isBackendRunning(backendUrl);
36 |   let i = 0
37 |   while (!isRunning) {
38 |     if (i % 10 === 0) {
39 |       // Progress messages every ~5 seconds
40 |       console.log("Waiting for backend to be running...")
41 |     }
42 |     await sleep(500);
43 |     isRunning = await isBackendRunning(backendUrl);
44 |     i += 1
45 |   }
46 |   return
47 | 
48 | }
49 | 
50 | let backendProcess = null
51 | 
52 | function cleanup() {
53 |   if (backendProcess !== null) {
54 |     console.log("Cleaning up running backend")
55 |     backendProcess.kill("SIGTERM")
56 |     execSync("just reset-local-backend")
57 |   }
58 | }
59 | 
60 | async function runWithLocalBackend(command, backendUrl) {
61 |   if (process.env.CONVEX_LOCAL_BACKEND_PATH === undefined) {
62 |     console.error("Please set environment variable CONVEX_LOCAL_BACKEND_PATH first")
63 |     process.exit(1)
64 |   }
65 |   const isRunning = await isBackendRunning(backendUrl);
66 |   if (isRunning) {
67 |     console.error("Looks like local backend is already running. Cancel it and restart this command.")
68 |     process.exit(1)
69 |   }
70 |   execSync("just reset-local-backend")
71 |   backendProcess = exec("CONVEX_TRACE_FILE=1 just run-local-backend")
72 |   await waitForLocalBackendRunning(backendUrl)
73 |   console.log("Backend running! Logs can be found in $CONVEX_LOCAL_BACKEND_PATH/convex-local-backend.log")
74 |   const innerCommand = new Promise((resolve) => {
75 |     const c = spawn(command, { shell: true, stdio: "pipe", env: {...process.env, FORCE_COLOR: true } })
76 |     c.stdout.on('data', (data) => {
77 |       process.stdout.write(data);
78 |     })
79 |     
80 |     c.stderr.on('data', (data) => {
81 |       process.stderr.write(data);
82 |     })
83 |     
84 |     c.on('exit', (code) => {
85 |       console.log('inner command exited with code ' + code.toString())
86 |       resolve(code)
87 |     })
88 |   });
89 |   return innerCommand;
90 | }
91 | 
92 | runWithLocalBackend(process.argv[2], parsedUrl).then((code) => {
93 |   cleanup()
94 |   process.exit(code)
95 | }).catch(() => {
96 |   cleanup()
97 |   process.exit(1)
98 | })
99 | 


--------------------------------------------------------------------------------
/convex/_generated/server.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /**
 3 |  * Generated utilities for implementing server-side Convex query and mutation functions.
 4 |  *
 5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 6 |  *
 7 |  * To regenerate, run `npx convex dev`.
 8 |  * @module
 9 |  */
10 | 
11 | import {
12 |   actionGeneric,
13 |   httpActionGeneric,
14 |   queryGeneric,
15 |   mutationGeneric,
16 |   internalActionGeneric,
17 |   internalMutationGeneric,
18 |   internalQueryGeneric,
19 | } from "convex/server";
20 | 
21 | /**
22 |  * Define a query in this Convex app's public API.
23 |  *
24 |  * This function will be allowed to read your Convex database and will be accessible from the client.
25 |  *
26 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
27 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
28 |  */
29 | export const query = queryGeneric;
30 | 
31 | /**
32 |  * Define a query that is only accessible from other Convex functions (but not from the client).
33 |  *
34 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
35 |  *
36 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
37 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
38 |  */
39 | export const internalQuery = internalQueryGeneric;
40 | 
41 | /**
42 |  * Define a mutation in this Convex app's public API.
43 |  *
44 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
45 |  *
46 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
47 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
48 |  */
49 | export const mutation = mutationGeneric;
50 | 
51 | /**
52 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
53 |  *
54 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
55 |  *
56 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
57 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
58 |  */
59 | export const internalMutation = internalMutationGeneric;
60 | 
61 | /**
62 |  * Define an action in this Convex app's public API.
63 |  *
64 |  * An action is a function which can execute any JavaScript code, including non-deterministic
65 |  * code and code with side-effects, like calling third-party services.
66 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
67 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
68 |  *
69 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
70 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
71 |  */
72 | export const action = actionGeneric;
73 | 
74 | /**
75 |  * Define an action that is only accessible from other Convex functions (but not from the client).
76 |  *
77 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
78 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
79 |  */
80 | export const internalAction = internalActionGeneric;
81 | 
82 | /**
83 |  * Define a Convex HTTP action.
84 |  *
85 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
86 |  * as its second.
87 |  * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
88 |  */
89 | export const httpAction = httpActionGeneric;
90 | 


--------------------------------------------------------------------------------
/app/(splash)/GetStarted/GetStarted.tsx:
--------------------------------------------------------------------------------
  1 | import { ConvexLogo } from "@/app/(splash)/GetStarted/ConvexLogo";
  2 | import { Code } from "@/components/Code";
  3 | import { Button } from "@/components/ui/button";
  4 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
  5 | import {
  6 |   CodeIcon,
  7 |   MagicWandIcon,
  8 |   PlayIcon,
  9 |   StackIcon,
 10 | } from "@radix-ui/react-icons";
 11 | import Link from "next/link";
 12 | import { ReactNode } from "react";
 13 | 
 14 | export const GetStarted = () => {
 15 |   return (
 16 |     <div className="flex grow flex-col">
 17 |       <div className="container mb-20 flex grow flex-col justify-center">
 18 |         <h1 className="mb-8 mt-16 flex flex-col items-center gap-8 text-center text-6xl font-extrabold leading-none tracking-tight">
 19 |           Your app powered by
 20 |           <ConvexLogo width={377} height={44} />
 21 |         </h1>
 22 |         <div className="mb-8 text-center text-lg text-muted-foreground">
 23 |           Build a realtime full-stack app in no time.
 24 |         </div>
 25 |         <div className="mb-16 flex justify-center gap-4">
 26 |           <Button asChild size="lg">
 27 |             <Link href="/product">Get Started</Link>
 28 |           </Button>
 29 |           <Button asChild size="lg" variant="outline">
 30 |             <Link href="https://docs.convex.dev/home">Convex docs</Link>
 31 |           </Button>
 32 |         </div>
 33 |         <div className="flex flex-col gap-4 bg-muted/50 p-12 dark:bg-transparent">
 34 |           <h2 className="mb-1 text-center text-3xl font-bold md:text-4xl ">
 35 |             Next steps
 36 |           </h2>
 37 |           <div className="mb-1 text-center text-muted-foreground">
 38 |             This template is a starting point for building your web application.
 39 |           </div>
 40 |           <div className="grid gap-4 md:grid-cols-2">
 41 |             <Card>
 42 |               <CardHeader>
 43 |                 <CardTitle className="flex gap-2">
 44 |                   <PlayIcon /> Play with the app
 45 |                 </CardTitle>
 46 |               </CardHeader>
 47 |               <CardContent>
 48 |                 Click on{" "}
 49 |                 <Link
 50 |                   href="/product"
 51 |                   className="font-medium underline underline-offset-4 hover:no-underline"
 52 |                 >
 53 |                   Get Started
 54 |                 </Link>{" "}
 55 |                 to see the app in action.
 56 |               </CardContent>
 57 |             </Card>
 58 |             <Card>
 59 |               <CardHeader>
 60 |                 <CardTitle className="flex gap-2">
 61 |                   <StackIcon /> Inspect your database
 62 |                 </CardTitle>
 63 |               </CardHeader>
 64 |               <CardContent>
 65 |                 The{" "}
 66 |                 <Link
 67 |                   href="https://dashboard.convex.dev/"
 68 |                   className="underline underline-offset-4 hover:no-underline"
 69 |                   target="_blank"
 70 |                 >
 71 |                   Convex dashboard
 72 |                 </Link>{" "}
 73 |                 is already open in another window.
 74 |               </CardContent>
 75 |             </Card>
 76 |             <Card>
 77 |               <CardHeader>
 78 |                 <CardTitle className="flex gap-2">
 79 |                   <CodeIcon />
 80 |                   Change the backend
 81 |                 </CardTitle>
 82 |               </CardHeader>
 83 |               <CardContent>
 84 |                 Edit <Code>convex/messages.ts</Code> to change the backend
 85 |                 functionality.
 86 |               </CardContent>
 87 |             </Card>
 88 |             <Card>
 89 |               <CardHeader>
 90 |                 <CardTitle className="flex gap-2">
 91 |                   <MagicWandIcon />
 92 |                   Change the frontend
 93 |                 </CardTitle>
 94 |               </CardHeader>
 95 |               <CardContent>
 96 |                 Edit <Code>app/page.tsx</Code> to change your frontend.
 97 |               </CardContent>
 98 |             </Card>
 99 |           </div>
100 |         </div>
101 |       </div>
102 |       <div className="px-20 pb-20">
103 |         <div className="container">
104 |           <h2 className="mb-6 text-center text-2xl font-bold">
105 |             Helpful resources
106 |           </h2>
107 |           <div className="grid gap-6 md:grid-cols-4">
108 |             <Resource title="Convex Docs" href="https://docs.convex.dev/home">
109 |               Read comprehensive documentation for all Convex features.
110 |             </Resource>
111 |             <Resource title="Stack articles" href="https://stack.convex.dev/">
112 |               Learn about best practices, use cases, and more from a growing
113 |               collection of articles, videos, and walkthroughs.
114 |             </Resource>
115 |             <Resource title="Discord" href="https://www.convex.dev/community">
116 |               Join our developer community to ask questions, trade tips &
117 |               tricks, and show off your projects.
118 |             </Resource>
119 |             <Resource title="Search them all" href="https://search.convex.dev/">
120 |               Get unblocked quickly by searching across the docs, Stack, and
121 |               Discord chats.
122 |             </Resource>
123 |           </div>
124 |         </div>
125 |       </div>
126 |     </div>
127 |   );
128 | };
129 | 
130 | function Resource({
131 |   title,
132 |   children,
133 |   href,
134 | }: {
135 |   title: string;
136 |   children: ReactNode;
137 |   href: string;
138 | }) {
139 |   return (
140 |     <Button
141 |       asChild
142 |       variant="secondary"
143 |       className="flex h-auto flex-col items-start justify-start gap-4 whitespace-normal p-4 font-normal"
144 |     >
145 |       <Link href={href}>
146 |         <div className="text-sm font-bold">{title}</div>
147 |         <div className="text-muted-foreground">{children}</div>
148 |       </Link>
149 |     </Button>
150 |   );
151 | }
152 | 


--------------------------------------------------------------------------------
/convex/_generated/server.d.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /**
  3 |  * Generated utilities for implementing server-side Convex query and mutation functions.
  4 |  *
  5 |  * THIS CODE IS AUTOMATICALLY GENERATED.
  6 |  *
  7 |  * To regenerate, run `npx convex dev`.
  8 |  * @module
  9 |  */
 10 | 
 11 | import {
 12 |   ActionBuilder,
 13 |   HttpActionBuilder,
 14 |   MutationBuilder,
 15 |   QueryBuilder,
 16 |   GenericActionCtx,
 17 |   GenericMutationCtx,
 18 |   GenericQueryCtx,
 19 |   GenericDatabaseReader,
 20 |   GenericDatabaseWriter,
 21 | } from "convex/server";
 22 | import type { DataModel } from "./dataModel.js";
 23 | 
 24 | /**
 25 |  * Define a query in this Convex app's public API.
 26 |  *
 27 |  * This function will be allowed to read your Convex database and will be accessible from the client.
 28 |  *
 29 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 30 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 31 |  */
 32 | export declare const query: QueryBuilder<DataModel, "public">;
 33 | 
 34 | /**
 35 |  * Define a query that is only accessible from other Convex functions (but not from the client).
 36 |  *
 37 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
 38 |  *
 39 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 40 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 41 |  */
 42 | export declare const internalQuery: QueryBuilder<DataModel, "internal">;
 43 | 
 44 | /**
 45 |  * Define a mutation in this Convex app's public API.
 46 |  *
 47 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
 48 |  *
 49 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 50 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 51 |  */
 52 | export declare const mutation: MutationBuilder<DataModel, "public">;
 53 | 
 54 | /**
 55 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
 56 |  *
 57 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
 58 |  *
 59 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 60 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 61 |  */
 62 | export declare const internalMutation: MutationBuilder<DataModel, "internal">;
 63 | 
 64 | /**
 65 |  * Define an action in this Convex app's public API.
 66 |  *
 67 |  * An action is a function which can execute any JavaScript code, including non-deterministic
 68 |  * code and code with side-effects, like calling third-party services.
 69 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
 70 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
 71 |  *
 72 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
 73 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
 74 |  */
 75 | export declare const action: ActionBuilder<DataModel, "public">;
 76 | 
 77 | /**
 78 |  * Define an action that is only accessible from other Convex functions (but not from the client).
 79 |  *
 80 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 81 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
 82 |  */
 83 | export declare const internalAction: ActionBuilder<DataModel, "internal">;
 84 | 
 85 | /**
 86 |  * Define an HTTP action.
 87 |  *
 88 |  * This function will be used to respond to HTTP requests received by a Convex
 89 |  * deployment if the requests matches the path and method where this action
 90 |  * is routed. Be sure to route your action in `convex/http.js`.
 91 |  *
 92 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 93 |  * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
 94 |  */
 95 | export declare const httpAction: HttpActionBuilder;
 96 | 
 97 | /**
 98 |  * A set of services for use within Convex query functions.
 99 |  *
100 |  * The query context is passed as the first argument to any Convex query
101 |  * function run on the server.
102 |  *
103 |  * This differs from the {@link MutationCtx} because all of the services are
104 |  * read-only.
105 |  */
106 | export type QueryCtx = GenericQueryCtx<DataModel>;
107 | 
108 | /**
109 |  * A set of services for use within Convex mutation functions.
110 |  *
111 |  * The mutation context is passed as the first argument to any Convex mutation
112 |  * function run on the server.
113 |  */
114 | export type MutationCtx = GenericMutationCtx<DataModel>;
115 | 
116 | /**
117 |  * A set of services for use within Convex action functions.
118 |  *
119 |  * The action context is passed as the first argument to any Convex action
120 |  * function run on the server.
121 |  */
122 | export type ActionCtx = GenericActionCtx<DataModel>;
123 | 
124 | /**
125 |  * An interface to read from the database within Convex query functions.
126 |  *
127 |  * The two entry points are {@link DatabaseReader.get}, which fetches a single
128 |  * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
129 |  * building a query.
130 |  */
131 | export type DatabaseReader = GenericDatabaseReader<DataModel>;
132 | 
133 | /**
134 |  * An interface to read from and write to the database within Convex mutation
135 |  * functions.
136 |  *
137 |  * Convex guarantees that all writes within a single mutation are
138 |  * executed atomically, so you never have to worry about partial writes leaving
139 |  * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)
140 |  * for the guarantees Convex provides your functions.
141 |  */
142 | export type DatabaseWriter = GenericDatabaseWriter<DataModel>;
143 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
  5 | import {
  6 |   CheckIcon,
  7 |   ChevronRightIcon,
  8 |   DotFilledIcon,
  9 | } from "@radix-ui/react-icons";
 10 | 
 11 | import { cn } from "@/lib/utils";
 12 | 
 13 | const DropdownMenu = DropdownMenuPrimitive.Root;
 14 | 
 15 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 16 | 
 17 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 18 | 
 19 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 20 | 
 21 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 22 | 
 23 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 24 | 
 25 | const DropdownMenuSubTrigger = React.forwardRef<
 26 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 27 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 28 |     inset?: boolean;
 29 |   }
 30 | >(({ className, inset, children, ...props }, ref) => (
 31 |   <DropdownMenuPrimitive.SubTrigger
 32 |     ref={ref}
 33 |     className={cn(
 34 |       "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 35 |       inset && "pl-8",
 36 |       className,
 37 |     )}
 38 |     {...props}
 39 |   >
 40 |     {children}
 41 |     <ChevronRightIcon className="ml-auto h-4 w-4" />
 42 |   </DropdownMenuPrimitive.SubTrigger>
 43 | ));
 44 | DropdownMenuSubTrigger.displayName =
 45 |   DropdownMenuPrimitive.SubTrigger.displayName;
 46 | 
 47 | const DropdownMenuSubContent = React.forwardRef<
 48 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 49 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 50 | >(({ className, ...props }, ref) => (
 51 |   <DropdownMenuPrimitive.SubContent
 52 |     ref={ref}
 53 |     className={cn(
 54 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 55 |       className,
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | ));
 60 | DropdownMenuSubContent.displayName =
 61 |   DropdownMenuPrimitive.SubContent.displayName;
 62 | 
 63 | const DropdownMenuContent = React.forwardRef<
 64 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 65 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 66 | >(({ className, sideOffset = 4, ...props }, ref) => (
 67 |   <DropdownMenuPrimitive.Portal>
 68 |     <DropdownMenuPrimitive.Content
 69 |       ref={ref}
 70 |       sideOffset={sideOffset}
 71 |       className={cn(
 72 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
 73 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 74 |         className,
 75 |       )}
 76 |       {...props}
 77 |     />
 78 |   </DropdownMenuPrimitive.Portal>
 79 | ));
 80 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 81 | 
 82 | const DropdownMenuItem = React.forwardRef<
 83 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 84 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 85 |     inset?: boolean;
 86 |   }
 87 | >(({ className, inset, ...props }, ref) => (
 88 |   <DropdownMenuPrimitive.Item
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 92 |       inset && "pl-8",
 93 |       className,
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ));
 98 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 99 | 
100 | const DropdownMenuCheckboxItem = React.forwardRef<
101 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
102 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
103 | >(({ className, children, checked, ...props }, ref) => (
104 |   <DropdownMenuPrimitive.CheckboxItem
105 |     ref={ref}
106 |     className={cn(
107 |       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
108 |       className,
109 |     )}
110 |     checked={checked}
111 |     {...props}
112 |   >
113 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
114 |       <DropdownMenuPrimitive.ItemIndicator>
115 |         <CheckIcon className="h-4 w-4" />
116 |       </DropdownMenuPrimitive.ItemIndicator>
117 |     </span>
118 |     {children}
119 |   </DropdownMenuPrimitive.CheckboxItem>
120 | ));
121 | DropdownMenuCheckboxItem.displayName =
122 |   DropdownMenuPrimitive.CheckboxItem.displayName;
123 | 
124 | const DropdownMenuRadioItem = React.forwardRef<
125 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
126 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
127 | >(({ className, children, ...props }, ref) => (
128 |   <DropdownMenuPrimitive.RadioItem
129 |     ref={ref}
130 |     className={cn(
131 |       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
132 |       className,
133 |     )}
134 |     {...props}
135 |   >
136 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
137 |       <DropdownMenuPrimitive.ItemIndicator>
138 |         <DotFilledIcon className="h-4 w-4 fill-current" />
139 |       </DropdownMenuPrimitive.ItemIndicator>
140 |     </span>
141 |     {children}
142 |   </DropdownMenuPrimitive.RadioItem>
143 | ));
144 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
145 | 
146 | const DropdownMenuLabel = React.forwardRef<
147 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
148 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
149 |     inset?: boolean;
150 |   }
151 | >(({ className, inset, ...props }, ref) => (
152 |   <DropdownMenuPrimitive.Label
153 |     ref={ref}
154 |     className={cn(
155 |       "px-2 py-1.5 text-sm font-semibold",
156 |       inset && "pl-8",
157 |       className,
158 |     )}
159 |     {...props}
160 |   />
161 | ));
162 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
163 | 
164 | const DropdownMenuSeparator = React.forwardRef<
165 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
166 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
167 | >(({ className, ...props }, ref) => (
168 |   <DropdownMenuPrimitive.Separator
169 |     ref={ref}
170 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
171 |     {...props}
172 |   />
173 | ));
174 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
175 | 
176 | const DropdownMenuShortcut = ({
177 |   className,
178 |   ...props
179 | }: React.HTMLAttributes<HTMLSpanElement>) => {
180 |   return (
181 |     <span
182 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
183 |       {...props}
184 |     />
185 |   );
186 | };
187 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
188 | 
189 | export {
190 |   DropdownMenu,
191 |   DropdownMenuTrigger,
192 |   DropdownMenuContent,
193 |   DropdownMenuItem,
194 |   DropdownMenuCheckboxItem,
195 |   DropdownMenuRadioItem,
196 |   DropdownMenuLabel,
197 |   DropdownMenuSeparator,
198 |   DropdownMenuShortcut,
199 |   DropdownMenuGroup,
200 |   DropdownMenuPortal,
201 |   DropdownMenuSub,
202 |   DropdownMenuSubContent,
203 |   DropdownMenuSubTrigger,
204 |   DropdownMenuRadioGroup,
205 | };
206 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
  1 | 
  2 |                                  Apache License
  3 |                            Version 2.0, January 2004
  4 |                         http://www.apache.org/licenses/
  5 | 
  6 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  7 | 
  8 |    1. Definitions.
  9 | 
 10 |       "License" shall mean the terms and conditions for use, reproduction,
 11 |       and distribution as defined by Sections 1 through 9 of this document.
 12 | 
 13 |       "Licensor" shall mean the copyright owner or entity authorized by
 14 |       the copyright owner that is granting the License.
 15 | 
 16 |       "Legal Entity" shall mean the union of the acting entity and all
 17 |       other entities that control, are controlled by, or are under common
 18 |       control with that entity. For the purposes of this definition,
 19 |       "control" means (i) the power, direct or indirect, to cause the
 20 |       direction or management of such entity, whether by contract or
 21 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 22 |       outstanding shares, or (iii) beneficial ownership of such entity.
 23 | 
 24 |       "You" (or "Your") shall mean an individual or Legal Entity
 25 |       exercising permissions granted by this License.
 26 | 
 27 |       "Source" form shall mean the preferred form for making modifications,
 28 |       including but not limited to software source code, documentation
 29 |       source, and configuration files.
 30 | 
 31 |       "Object" form shall mean any form resulting from mechanical
 32 |       transformation or translation of a Source form, including but
 33 |       not limited to compiled object code, generated documentation,
 34 |       and conversions to other media types.
 35 | 
 36 |       "Work" shall mean the work of authorship, whether in Source or
 37 |       Object form, made available under the License, as indicated by a
 38 |       copyright notice that is included in or attached to the work
 39 |       (an example is provided in the Appendix below).
 40 | 
 41 |       "Derivative Works" shall mean any work, whether in Source or Object
 42 |       form, that is based on (or derived from) the Work and for which the
 43 |       editorial revisions, annotations, elaborations, or other modifications
 44 |       represent, as a whole, an original work of authorship. For the purposes
 45 |       of this License, Derivative Works shall not include works that remain
 46 |       separable from, or merely link (or bind by name) to the interfaces of,
 47 |       the Work and Derivative Works thereof.
 48 | 
 49 |       "Contribution" shall mean any work of authorship, including
 50 |       the original version of the Work and any modifications or additions
 51 |       to that Work or Derivative Works thereof, that is intentionally
 52 |       submitted to Licensor for inclusion in the Work by the copyright owner
 53 |       or by an individual or Legal Entity authorized to submit on behalf of
 54 |       the copyright owner. For the purposes of this definition, "submitted"
 55 |       means any form of electronic, verbal, or written communication sent
 56 |       to the Licensor or its representatives, including but not limited to
 57 |       communication on electronic mailing lists, source code control systems,
 58 |       and issue tracking systems that are managed by, or on behalf of, the
 59 |       Licensor for the purpose of discussing and improving the Work, but
 60 |       excluding communication that is conspicuously marked or otherwise
 61 |       designated in writing by the copyright owner as "Not a Contribution."
 62 | 
 63 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 64 |       on behalf of whom a Contribution has been received by Licensor and
 65 |       subsequently incorporated within the Work.
 66 | 
 67 |    2. Grant of Copyright License. Subject to the terms and conditions of
 68 |       this License, each Contributor hereby grants to You a perpetual,
 69 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 70 |       copyright license to reproduce, prepare Derivative Works of,
 71 |       publicly display, publicly perform, sublicense, and distribute the
 72 |       Work and such Derivative Works in Source or Object form.
 73 | 
 74 |    3. Grant of Patent License. Subject to the terms and conditions of
 75 |       this License, each Contributor hereby grants to You a perpetual,
 76 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 77 |       (except as stated in this section) patent license to make, have made,
 78 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 79 |       where such license applies only to those patent claims licensable
 80 |       by such Contributor that are necessarily infringed by their
 81 |       Contribution(s) alone or by combination of their Contribution(s)
 82 |       with the Work to which such Contribution(s) was submitted. If You
 83 |       institute patent litigation against any entity (including a
 84 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 85 |       or a Contribution incorporated within the Work constitutes direct
 86 |       or contributory patent infringement, then any patent licenses
 87 |       granted to You under this License for that Work shall terminate
 88 |       as of the date such litigation is filed.
 89 | 
 90 |    4. Redistribution. You may reproduce and distribute copies of the
 91 |       Work or Derivative Works thereof in any medium, with or without
 92 |       modifications, and in Source or Object form, provided that You
 93 |       meet the following conditions:
 94 | 
 95 |       (a) You must give any other recipients of the Work or
 96 |           Derivative Works a copy of this License; and
 97 | 
 98 |       (b) You must cause any modified files to carry prominent notices
 99 |           stating that You changed the files; and
100 | 
101 |       (c) You must retain, in the Source form of any Derivative Works
102 |           that You distribute, all copyright, patent, trademark, and
103 |           attribution notices from the Source form of the Work,
104 |           excluding those notices that do not pertain to any part of
105 |           the Derivative Works; and
106 | 
107 |       (d) If the Work includes a "NOTICE" text file as part of its
108 |           distribution, then any Derivative Works that You distribute must
109 |           include a readable copy of the attribution notices contained
110 |           within such NOTICE file, excluding those notices that do not
111 |           pertain to any part of the Derivative Works, in at least one
112 |           of the following places: within a NOTICE text file distributed
113 |           as part of the Derivative Works; within the Source form or
114 |           documentation, if provided along with the Derivative Works; or,
115 |           within a display generated by the Derivative Works, if and
116 |           wherever such third-party notices normally appear. The contents
117 |           of the NOTICE file are for informational purposes only and
118 |           do not modify the License. You may add Your own attribution
119 |           notices within Derivative Works that You distribute, alongside
120 |           or as an addendum to the NOTICE text from the Work, provided
121 |           that such additional attribution notices cannot be construed
122 |           as modifying the License.
123 | 
124 |       You may add Your own copyright statement to Your modifications and
125 |       may provide additional or different license terms and conditions
126 |       for use, reproduction, or distribution of Your modifications, or
127 |       for any such Derivative Works as a whole, provided Your use,
128 |       reproduction, and distribution of the Work otherwise complies with
129 |       the conditions stated in this License.
130 | 
131 |    5. Submission of Contributions. Unless You explicitly state otherwise,
132 |       any Contribution intentionally submitted for inclusion in the Work
133 |       by You to the Licensor shall be under the terms and conditions of
134 |       this License, without any additional terms or conditions.
135 |       Notwithstanding the above, nothing herein shall supersede or modify
136 |       the terms of any separate license agreement you may have executed
137 |       with Licensor regarding such Contributions.
138 | 
139 |    6. Trademarks. This License does not grant permission to use the trade
140 |       names, trademarks, service marks, or product names of the Licensor,
141 |       except as required for reasonable and customary use in describing the
142 |       origin of the Work and reproducing the content of the NOTICE file.
143 | 
144 |    7. Disclaimer of Warranty. Unless required by applicable law or
145 |       agreed to in writing, Licensor provides the Work (and each
146 |       Contributor provides its Contributions) on an "AS IS" BASIS,
147 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 |       implied, including, without limitation, any warranties or conditions
149 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 |       PARTICULAR PURPOSE. You are solely responsible for determining the
151 |       appropriateness of using or redistributing the Work and assume any
152 |       risks associated with Your exercise of permissions under this License.
153 | 
154 |    8. Limitation of Liability. In no event and under no legal theory,
155 |       whether in tort (including negligence), contract, or otherwise,
156 |       unless required by applicable law (such as deliberate and grossly
157 |       negligent acts) or agreed to in writing, shall any Contributor be
158 |       liable to You for damages, including any direct, indirect, special,
159 |       incidental, or consequential damages of any character arising as a
160 |       result of this License or out of the use or inability to use the
161 |       Work (including but not limited to damages for loss of goodwill,
162 |       work stoppage, computer failure or malfunction, or any and all
163 |       other commercial damages or losses), even if such Contributor
164 |       has been advised of the possibility of such damages.
165 | 
166 |    9. Accepting Warranty or Additional Liability. While redistributing
167 |       the Work or Derivative Works thereof, You may choose to offer,
168 |       and charge a fee for, acceptance of support, warranty, indemnity,
169 |       or other liability obligations and/or rights consistent with this
170 |       License. However, in accepting such obligations, You may act only
171 |       on Your own behalf and on Your sole responsibility, not on behalf
172 |       of any other Contributor, and only if You agree to indemnify,
173 |       defend, and hold each Contributor harmless for any liability
174 |       incurred by, or claims asserted against, such Contributor by reason
175 |       of your accepting any such warranty or additional liability.
176 | 
177 |    END OF TERMS AND CONDITIONS
178 | 
179 |    APPENDIX: How to apply the Apache License to your work.
180 | 
181 |       To apply the Apache License to your work, attach the following
182 |       boilerplate notice, with the fields enclosed by brackets "[]"
183 |       replaced with your own identifying information. (Don't include
184 |       the brackets!)  The text should be enclosed in the appropriate
185 |       comment syntax for the file format. We also recommend that a
186 |       file or class name and description of purpose be included on the
187 |       same "printed page" as the copyright notice for easier
188 |       identification within third-party archives.
189 | 
190 |    Copyright 2024 Convex, Inc.
191 | 
192 |    Licensed under the Apache License, Version 2.0 (the "License");
193 |    you may not use this file except in compliance with the License.
194 |    You may obtain a copy of the License at
195 | 
196 |        http://www.apache.org/licenses/LICENSE-2.0
197 | 
198 |    Unless required by applicable law or agreed to in writing, software
199 |    distributed under the License is distributed on an "AS IS" BASIS,
200 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 |    See the License for the specific language governing permissions and
202 |    limitations under the License.
203 | 


--------------------------------------------------------------------------------