This project is a Proof of Concept (POC) demonstrating the integration between Outseta (for authentication, CRM, and billing) and Convex (as the backend database and serverless functions).
The application is a simple Course Management System where access to courses is gated by Outseta Add-ons.
- Frontend: React 19, Vite, Tailwind CSS, Radix UI (Shadcn/UI)
- Backend: Convex
- Auth & Billing: Outseta
- Language: TypeScript
- Outseta Authentication: Uses Outseta's "Magic Script" and widgets for login, signup, and profile management.
- Course Management: Admins can create, edit, and delete courses. Courses are stored in Convex.
- Content Gating: Access to specific courses is restricted based on the user's purchased Add-ons in Outseta.
- Member Directory: A view that lists members and the courses they have access to, fetching data directly from Outseta's CRM API.
- JWT Validation: Secure communication between the frontend and Convex using Outseta's JWT tokens.
convex/: Backend schema, queries, mutations, and actions.schema.ts: Database schema definition.outseta.ts: Actions for interacting with Outseta API.members.ts: Logic for fetching and mapping member data.
src/: Frontend application code.lib/AuthProvider.tsx: React Context provider for Outseta authentication.lib/outseta-utils.ts: Utilities for decoding JWTs and checking permissions.pages/: Application routes (Home, Admin, Course details, etc.).
docs/: Feature plans and deployment documentation.
You will need to set up the following environment variables:
VITE_OUTSETA_SUBDOMAIN: Your Outseta subdomain.
OUTSETA_API_KEY: Your Outseta API Key.OUTSETA_SUBDOMAIN: Your Outseta subdomain.
-
Install dependencies:
bun install
-
Start the Convex dev server:
bunx convex dev
-
Start the frontend development server:
bun run dev
Detailed feature plans and implementation details can be found in the docs/ directory.