Convex Demos

The System Tables Example App demonstrates how to programmatically interact with Convex system tables to manage file storage and scheduled functions.

Key features include:

• File Storage Integration: An extension of the Convex chat tutorial that adds image uploading capabilities using Convex file storage.
• Scheduled Functions: The ability to schedule messages to be sent in the future.
• Admin Interface: Uses system tables to expose an interface for managing stored files and scheduled messages.

This example demonstrates implementing user management and authentication within a chat application. It utilizes Auth0 for the authentication flow.

Key features include:

• User Persistence: Upon successful login, user information is automatically persisted to a users table.
• Authenticated Messaging: Messages sent by users are programmatically associated with their specific user record.
• Session Management: Provides UI flows for both logging in and logging out.

This demo demonstrates how to integrate Convex with the Next.js App Router to achieve Server-Side Rendering (SSR). It specifically covers:

1. Preloading data for Client Components: Using the Convex Next.js integration to fetch data on the server so it is available immediately when the client component hydrates.
2. Server-side Data Operations: Performing queries and mutations directly from Server Actions or Route Handlers (API Routes) instead of relying solely on client-side hooks.

# To run this specific demo:
npm install
npm run dev

This example demonstrates the standard pattern for building type-safe Convex applications:

• Convex Functions: Written in .ts files within the convex/ directory.
• React Components: Written in .tsx files for frontend integration.
• Data Modeling: A Convex schema is defined in convex/schema.ts. This schema automatically generates TypeScript types specific to your application's data model, ensuring end-to-end type safety between your database and your functions/frontend.

This pattern allows you to track per-tab or per-browser data in a database table without requiring a user to be logged in. It uses convex-helpers to wrap Convex functions and custom React hooks to manage the session state on the client.

To implement this pattern, you must:

1. Wrap your application in a SessionProvider inside your ConvexProvider.
2. Define backend functions using queryWithSession (or the mutation/action equivalents).
3. Access the session ID via ctx.session._id within your function handler.
4. Use useSessionQuery (or the mutation/action equivalents) in your React components to interact with these functions.

// 1. Wrap your app
<ConvexProvider client={convex}>
  <SessionProvider>
    <App />
  </SessionProvider>
</ConvexProvider>

The withZod helper library allows you to validate both input and output arguments for Convex functions using Zod schemas. This provides a middleware-like pattern for ensuring type safety and data integrity at the function boundary. For a deep dive into the implementation pattern, refer to the official Convex blog post on wrappers as middleware.

// Implementation details are located in ./convex/lib/withZod.ts

This application demonstrates how to implement application-level error handling in Convex. Instead of generic system errors, you can throw specific errors from your functions that the client can catch and react to.

In this specific demo, custom errors are thrown under the following conditions:

1. Attempting to send a message that exceeds 50 characters in length.
2. Attempting to list more than 20 messages.

For detailed implementation patterns, refer to the official Application Errors documentation.