10 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/client.tsx:
--------------------------------------------------------------------------------
1 | import { StartClient } from "@tanstack/react-start";
2 | import { StrictMode } from "react";
3 | import { hydrateRoot } from "react-dom/client";
4 | import { createRouter } from "./router";
5 |
6 | const router = createRouter();
7 |
8 | hydrateRoot(
9 | document,
10 | {title}
11 | 12 | {actions} 13 |
10 | {content}
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/use-cases/testimonials.ts:
--------------------------------------------------------------------------------
1 | import { createTestimonial, getTestimonials } from "~/data-access/testimonials";
2 | import { type TestimonialCreate } from "~/db/schema";
3 |
4 | export async function createTestimonialUseCase(data: TestimonialCreate) {
5 | return await createTestimonial(data);
6 | }
7 |
8 | export async function getTestimonialsUseCase() {
9 | return await getTestimonials();
10 | }
11 |
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: "3.9"
2 | services:
3 | wdc-tanstack-starter-kit-db:
4 | image: postgres:17
5 | restart: always
6 | container_name: wdc-tanstack-starter-kit-db
7 | ports:
8 | - 5432:5432
9 | environment:
10 | POSTGRES_PASSWORD: example
11 | PGDATA: /data/postgres
12 | volumes:
13 | - postgres:/data/postgres
14 |
15 | volumes:
16 | postgres:
17 |
--------------------------------------------------------------------------------
/drizzle/migrate/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "Used for installing and running the migration on the Dockerfile runner.",
3 | "license": "MIT",
4 | "scripts": {
5 | "db:migrate": "tsx ./migrate.ts"
6 | },
7 | "dependencies": {
8 | "dotenv": "16.4.5",
9 | "drizzle-orm": "0.32.1",
10 | "postgres": "3.4.4",
11 | "tsx": "^4.16.2",
12 | "typescript": "5.5.4"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/utils/storage/index.ts:
--------------------------------------------------------------------------------
1 | import type { IStorage } from "./storage.interface";
2 | import { R2Storage } from "./r2";
3 |
4 | let storage: IStorage | null = null;
5 |
6 | // Storage provider factory/singleton - R2 only
7 | export function getStorage(): { storage: IStorage; type: "r2" } {
8 | if (!storage) {
9 | storage = new R2Storage();
10 | }
11 |
12 | return { storage, type: "r2" };
13 | }
14 |
--------------------------------------------------------------------------------
/drizzle/0006_right_sunfire.sql:
--------------------------------------------------------------------------------
1 | DROP INDEX "progress_user_id_segment_id_idx";--> statement-breakpoint
2 | ALTER TABLE "app_progress" ADD CONSTRAINT "app_progress_segmentId_app_segment_id_fk" FOREIGN KEY ("segmentId") REFERENCES "public"."app_segment"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
3 | CREATE UNIQUE INDEX "progress_user_segment_unique_idx" ON "app_progress" USING btree ("userId","segmentId");
--------------------------------------------------------------------------------
/src/hooks/use-debounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export function useDebounce
10 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | yarn.lock
4 |
5 | .DS_Store
6 | .cache
7 | .env
8 | .env.postgres
9 | .vercel
10 | .output
11 | .vinxi
12 |
13 | /build/
14 | /api/
15 | /server/build
16 | /public/build
17 | .vinxi
18 | # Sentry Config File
19 | .env.sentry-build-plugin
20 | /test-results/
21 | /playwright-report/
22 | /blob-report/
23 | /playwright/.cache/
24 | files/*
25 | backups/*
26 | .nitro/
27 | .tanstack/
--------------------------------------------------------------------------------
/src/components/ui/stat.tsx:
--------------------------------------------------------------------------------
1 | import { type ReactNode } from "react";
2 |
3 | interface StatProps {
4 | label: string;
5 | value: string;
6 | }
7 |
8 | export function Stat({ label, value }: StatProps) {
9 | return (
10 | About
11 |12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. 13 |
14 |
11 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/AppSidebar.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Sidebar,
3 | SidebarContent,
4 | SidebarFooter,
5 | SidebarGroup,
6 | SidebarHeader,
7 | } from "~/components/ui/sidebar";
8 |
9 | export function AppSidebar() {
10 | return (
11 | {value}
12 | {label}
13 |
10 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/hooks/use-window-size.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export function useWindowSize() {
4 | const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
5 |
6 | useEffect(() => {
7 | const handleResize = () => {
8 | setWindowSize({ width: window.innerWidth, height: window.innerHeight });
9 | };
10 | handleResize();
11 | window.addEventListener("resize", handleResize);
12 | return () => window.removeEventListener("resize", handleResize);
13 | }, []);
14 |
15 | return windowSize;
16 | }
17 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "esModuleInterop": true,
5 | "jsx": "react-jsx",
6 | "moduleResolution": "Bundler",
7 | "module": "ESNext",
8 | "target": "ES2022",
9 | "skipLibCheck": true,
10 | "strictNullChecks": true,
11 | "isolatedModules": true,
12 | "resolveJsonModule": true,
13 | "allowJs": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "baseUrl": ".",
16 | "verbatimModuleSyntax": false,
17 | "paths": {
18 | "~/*": ["./src/*"]
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/drizzle/migrate/migrate.ts:
--------------------------------------------------------------------------------
1 | // This file is to get the migration to run in the Dockerfile right
2 | // before the service runs.
3 |
4 | import "dotenv/config";
5 | import { drizzle } from "drizzle-orm/postgres-js";
6 | import postgres from "postgres";
7 | import { migrate } from "drizzle-orm/postgres-js/migrator";
8 | import { env } from "~/utils/env";
9 |
10 | const pg = postgres(env.DATABASE_URL!);
11 | const database = drizzle(pg);
12 |
13 | async function main() {
14 | await migrate(database, { migrationsFolder: ".." });
15 | await pg.end();
16 | }
17 |
18 | main();
19 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 |
3 | import tsConfigPaths from "vite-tsconfig-paths";
4 | import tailwindcss from "@tailwindcss/vite";
5 | import { tanstackStart } from "@tanstack/react-start/plugin/vite";
6 | import viteReact from "@vitejs/plugin-react";
7 |
8 | export default defineConfig({
9 | server: { port: 3000 },
10 | ssr: { noExternal: ["react-dropzone"] },
11 | plugins: [
12 | tailwindcss(),
13 | tsConfigPaths(),
14 | tanstackStart({ target: "node-server", customViteReactPlugin: true }),
15 | viteReact(),
16 | ],
17 | });
18 |
--------------------------------------------------------------------------------
/src/data-access/testimonials.ts:
--------------------------------------------------------------------------------
1 | import { database } from "~/db";
2 | import {
3 | type Testimonial,
4 | type TestimonialCreate,
5 | testimonials,
6 | } from "~/db/schema";
7 |
8 | export async function createTestimonial(data: TestimonialCreate) {
9 | return await database.insert(testimonials).values(data).returning();
10 | }
11 |
12 | export async function getTestimonials() {
13 | return await database.query.testimonials.findMany({
14 | with: {
15 | profile: true,
16 | },
17 | orderBy: (testimonials, { desc }) => [desc(testimonials.createdAt)],
18 | });
19 | }
20 |
--------------------------------------------------------------------------------
/drizzle/0007_loose_maximus.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE "app_module" (
2 | "id" serial PRIMARY KEY NOT NULL,
3 | "title" text NOT NULL,
4 | "order" integer NOT NULL,
5 | "created_at" timestamp DEFAULT now() NOT NULL,
6 | "updated_at" timestamp DEFAULT now() NOT NULL
7 | );
8 | --> statement-breakpoint
9 | ALTER TABLE "app_segment" ALTER COLUMN "moduleId" TYPE integer USING "moduleId"::integer;
10 | --> statement-breakpoint
11 | ALTER TABLE "app_segment" ADD CONSTRAINT "app_segment_moduleId_app_module_id_fk" FOREIGN KEY ("moduleId") REFERENCES "public"."app_module"("id") ON DELETE cascade ON UPDATE no action;
--------------------------------------------------------------------------------
/drizzle/0010_red_maestro.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE "app_testimonial" (
2 | "id" serial PRIMARY KEY NOT NULL,
3 | "userId" serial NOT NULL,
4 | "content" text NOT NULL,
5 | "emojis" text NOT NULL,
6 | "displayName" text NOT NULL,
7 | "permissionGranted" boolean DEFAULT false NOT NULL,
8 | "created_at" timestamp DEFAULT now() NOT NULL,
9 | "updated_at" timestamp DEFAULT now() NOT NULL
10 | );
11 | --> statement-breakpoint
12 | ALTER TABLE "app_testimonial" ADD CONSTRAINT "app_testimonial_userId_app_user_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."app_user"("id") ON DELETE cascade ON UPDATE no action;
--------------------------------------------------------------------------------
/src/routes/learn/$slug/-components/admin-controls.tsx:
--------------------------------------------------------------------------------
1 | import { type Segment } from "~/db/schema";
2 | import { EditVideoButton } from "./edit-video-button";
3 | import { DeleteSegmentButton } from "./delete-segment-button";
4 |
5 | interface AdminControlsProps {
6 | currentSegment: Segment;
7 | }
8 |
9 | export function AdminControls({ currentSegment }: AdminControlsProps) {
10 | return (
11 | Not found
11 |The segment you are looking for does not exist.
12 | Start learning 13 |
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/use-cases/progress.ts:
--------------------------------------------------------------------------------
1 | import { Segment } from "~/db/schema";
2 | import { UserId } from "./types";
3 | import {
4 | getProgress,
5 | markAsWatched,
6 | getAllProgressForUser,
7 | } from "~/data-access/progress";
8 |
9 | export async function markAsWatchedUseCase(
10 | userId: UserId,
11 | segmentId: Segment["id"]
12 | ) {
13 | const progress = await getProgress(userId, segmentId);
14 | if (!progress) {
15 | return markAsWatched(userId, segmentId);
16 | }
17 | }
18 |
19 | export async function getAllProgressForUserUseCase(userId: UserId) {
20 | return getAllProgressForUser(userId);
21 | }
22 |
--------------------------------------------------------------------------------
/src/hooks/use-prevent-tab-close.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 |
3 | export function usePreventTabClose(shouldPrevent: boolean) {
4 | useEffect(() => {
5 | function handleBeforeUnload(event: BeforeUnloadEvent) {
6 | if (shouldPrevent) {
7 | event.preventDefault();
8 | // event.returnValue = ""; // required for most browsers to show the dialog
9 | }
10 | }
11 |
12 | window.addEventListener("beforeunload", handleBeforeUnload);
13 | return () => {
14 | window.removeEventListener("beforeunload", handleBeforeUnload);
15 | };
16 | }, [shouldPrevent]);
17 | }
18 |
--------------------------------------------------------------------------------
/src/routes/learn/$slug/-components/edit-video-button.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "@tanstack/react-router";
2 | import { Button } from "~/components/ui/button";
3 | import { Edit } from "lucide-react";
4 | import { type Segment } from "~/db/schema";
5 |
6 | interface EditVideoButtonProps {
7 | currentSegment: Segment;
8 | }
9 |
10 | export function EditVideoButton({ currentSegment }: EditVideoButtonProps) {
11 | return (
12 |
13 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/fn/storage.ts:
--------------------------------------------------------------------------------
1 | import { createServerFn } from "@tanstack/react-start";
2 | import { adminMiddleware } from "~/lib/auth";
3 | import { z } from "zod";
4 | import { getStorage } from "~/utils/storage";
5 |
6 | export const getPresignedUploadUrlFn = createServerFn({ method: "POST" })
7 | .middleware([adminMiddleware])
8 | .validator(
9 | z.object({
10 | videoKey: z.string(),
11 | })
12 | )
13 | .handler(async ({ data }) => {
14 | const { storage } = getStorage();
15 | const presignedUrl = await storage.getPresignedUploadUrl(data.videoKey);
16 |
17 | return { presignedUrl, videoKey: data.videoKey };
18 | });
19 |
--------------------------------------------------------------------------------
/src/utils/env.ts:
--------------------------------------------------------------------------------
1 | export const env = {
2 | DATABASE_URL: process.env.DATABASE_URL!,
3 | GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID!,
4 | GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET!,
5 | HOST_NAME: process.env.HOST_NAME!,
6 | NODE_ENV: process.env.NODE_ENV!,
7 | STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY!,
8 | STRIPE_PRICE_ID: process.env.STRIPE_PRICE_ID!,
9 | STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET!,
10 | RECAPTCHA_SECRET_KEY: process.env.RECAPTCHA_SECRET_KEY!,
11 | MAILING_LIST_ENDPOINT: process.env.MAILING_LIST_ENDPOINT!,
12 | MAILING_LIST_PASSWORD: process.env.MAILING_LIST_PASSWORD!,
13 | };
14 |
--------------------------------------------------------------------------------
/src/routes/learn/-components/container.tsx:
--------------------------------------------------------------------------------
1 | export function Container({ children }: { children: React.ReactNode }) {
2 | return (
3 |
4 | {/* Background decoration */}
5 | {/* */}
6 |
7 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/utils/storage/storage.interface.ts:
--------------------------------------------------------------------------------
1 | export interface IStorage {
2 | upload(key: string, data: Buffer): Promise
8 |
10 | {children}
9 |
13 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/routes/learn/$slug/-components/feedback-button.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "@tanstack/react-router";
2 | import { MessageSquare } from "lucide-react";
3 | import { Button } from "~/components/ui/button";
4 |
5 | export function FloatingFeedbackButton() {
6 | return (
7 |
8 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/db/clear.ts:
--------------------------------------------------------------------------------
1 | import "dotenv/config";
2 |
3 | import { database, pool } from "./index";
4 | import { sql } from "drizzle-orm";
5 |
6 | async function main() {
7 | const tablesSchema = database._.schema;
8 | if (!tablesSchema) throw new Error("Schema not loaded");
9 |
10 | await database.execute(sql.raw(`DROP SCHEMA IF EXISTS "drizzle" CASCADE;`));
11 |
12 | await database.execute(sql.raw(`DROP SCHEMA public CASCADE;`));
13 | await database.execute(sql.raw(`CREATE SCHEMA public;`));
14 | await database.execute(sql.raw(`GRANT ALL ON SCHEMA public TO postgres;`));
15 | await database.execute(sql.raw(`GRANT ALL ON SCHEMA public TO public;`));
16 | await database.execute(
17 | sql.raw(`COMMENT ON SCHEMA public IS 'standard public schema';`)
18 | );
19 | await pool.end();
20 | }
21 |
22 | main();
23 |
--------------------------------------------------------------------------------
/src/routes/learn/$slug/-components/content-panel.tsx:
--------------------------------------------------------------------------------
1 | import { FileText } from "lucide-react";
2 | import { type Segment } from "~/db/schema";
3 | import { MarkdownContent } from "~/routes/learn/-components/markdown-content";
4 |
5 | interface ContentPanelProps {
6 | currentSegment: Segment;
7 | }
8 |
9 | export function ContentPanel({ currentSegment }: ContentPanelProps) {
10 | if (currentSegment.content) {
11 | return (
12 | Unauthorized
14 |15 | You are not authorized to view this content. 16 |
17 | 18 |
13 |
15 | );
16 | }
17 |
18 | return (
19 |
20 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as LabelPrimitive from "@radix-ui/react-label"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "~/lib/utils"
6 |
7 | const labelVariants = cva(
8 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
9 | )
10 |
11 | const Label = React.forwardRef<
12 | React.ElementRefNo lesson content available for this segment.
22 |
8 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/routes/unauthenticated.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 | import { Button } from "~/components/ui/button";
3 | import { LogIn } from "lucide-react";
4 |
5 | export const Route = createFileRoute("/unauthenticated")({
6 | component: RouteComponent,
7 | });
8 |
9 | function RouteComponent() {
10 | return (
11 |
9 |
22 | Purchase Cancelled
10 |11 | Your purchase was cancelled. No charges were made. 12 |
13 |
14 |
18 | Return to Purchase Page
19 |
20 |
21 |
12 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "~/lib/utils"
4 |
5 | const Input = React.forwardRefAuthentication Required
14 |15 | You must be logged in to view this content. Please sign in to continue. 16 |
17 | 18 | 19 | 20 |
6 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/data-access/progress.ts:
--------------------------------------------------------------------------------
1 | import { and, eq } from "drizzle-orm";
2 | import { progress, Progress } from "~/db/schema";
3 | import { UserId } from "~/use-cases/types";
4 | import { database } from "~/db";
5 |
6 | export async function getProgress(
7 | userId: UserId,
8 | segmentId: Progress["segmentId"]
9 | ) {
10 | const progressEntry = await database.query.progress.findFirst({
11 | where: and(eq(progress.segmentId, segmentId), eq(progress.userId, userId)),
12 | });
13 | return progressEntry;
14 | }
15 |
16 | export async function getAllProgressForUser(userId: UserId) {
17 | return database.query.progress.findMany({
18 | where: eq(progress.userId, userId),
19 | });
20 | }
21 |
22 | export async function markAsWatched(
23 | userId: UserId,
24 | segmentId: Progress["segmentId"]
25 | ) {
26 | await database.insert(progress).values({ segmentId, userId });
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
3 |
4 | import { cn } from "~/lib/utils"
5 |
6 | const Separator = React.forwardRef<
7 | React.ElementRef
7 | {children ||
9 | The page you are looking for does not exist.
} 8 |10 | 16 | 20 | Start Over 21 | 22 |
23 |
20 | {title && {title} }
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |
10 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 | export function getTimeAgo(date: Date) {
8 | const now = new Date();
9 | const diffInSeconds = Math.floor((date.getTime() - now.getTime()) / 1000);
10 |
11 | const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
12 |
13 | const ranges = [
14 | { unit: "second", seconds: 60 },
15 | { unit: "minute", seconds: 60 * 60 },
16 | { unit: "hour", seconds: 60 * 60 * 24 },
17 | { unit: "day", seconds: 60 * 60 * 24 * 7 },
18 | { unit: "week", seconds: 60 * 60 * 24 * 30 },
19 | { unit: "month", seconds: 60 * 60 * 24 * 365 },
20 | { unit: "year", seconds: Infinity },
21 | ] as const;
22 |
23 | for (const range of ranges) {
24 | if (Math.abs(diffInSeconds) < range.seconds) {
25 | const value = Math.round(
26 | diffInSeconds / (range.seconds / (range.unit === "second" ? 1 : 60))
27 | );
28 | return rtf.format(value, range.unit);
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Web Dev Cody
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/use-cases/util.ts:
--------------------------------------------------------------------------------
1 | import { ZodTypeAny, z } from "zod";
2 |
3 | type ValidatedCallbackOptions<
4 | CallbackInput,
5 | OutputValidation extends ZodTypeAny,
6 | InputValidation extends ZodTypeAny
7 | > = {
8 | outputs?: OutputValidation;
9 | inputs?: InputValidation;
10 | handler: InputValidation extends ZodTypeAny
11 | ? (input: z.inferAssignments
11 | {assignments.length === 0 ? ( 12 |No assignments available yet.
13 | ) : ( 14 |-
15 | {assignments.map((assignment, index) => (
16 |
-
17 |
23 |
24 | Assignment {index + 1} 25 | 26 |
27 | ))}
28 |
13 | {prevSegment ? (
14 |
20 | ) : (
21 |
22 | )}
23 | {nextSegment && (
24 |
30 | )}
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/data-access/comments.ts:
--------------------------------------------------------------------------------
1 | import { and, desc, eq, isNull } from "drizzle-orm";
2 | import { database } from "~/db";
3 | import { CommentCreate, comments } from "~/db/schema";
4 |
5 | export type CommentsWithUser = Awaited
16 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/docker-compose.prod.yml:
--------------------------------------------------------------------------------
1 | version: "3.9"
2 | services:
3 | wdc-tanstack-starter-kit-db:
4 | image: postgres:17
5 | restart: always
6 | container_name: wdc-tanstack-starter-kit-db
7 | ports:
8 | - 127.0.0.1:5432:5432
9 | env_file:
10 | - .env.postgres
11 | volumes:
12 | - postgres:/data/postgres
13 |
14 | wdc-tanstack-starter-kit-app:
15 | build:
16 | context: .
17 | dockerfile: Dockerfile
18 | image: wdc-tanstack-starter-kit-app
19 | env_file:
20 | - .env
21 | restart: always
22 | container_name: wdc-tanstack-starter-kit-app
23 | volumes:
24 | - app_files:/app/files
25 |
26 | caddy:
27 | image: caddy:2
28 | restart: always
29 | container_name: wdc-tanstack-starter-kit-caddy
30 | ports:
31 | - "80:80"
32 | - "443:443"
33 | volumes:
34 | - ./Caddyfile:/etc/caddy/Caddyfile
35 | - caddy_data:/data
36 | - caddy_config:/config
37 | depends_on:
38 | - wdc-tanstack-starter-kit-app
39 |
40 | # tunnel:
41 | # container_name: cloudflared-tunnel
42 | # image: cloudflare/cloudflared
43 | # restart: unless-stopped
44 | # command: tunnel run
45 | # environment:
46 | # - TUNNEL_TOKEN=mytokengoeshere
47 |
48 | volumes:
49 | postgres:
50 | caddy_data:
51 | caddy_config:
52 | app_files:
53 |
--------------------------------------------------------------------------------
/src/components/ModeToggle.tsx:
--------------------------------------------------------------------------------
1 | import { Moon, Sun } from "lucide-react";
2 |
3 | import { Button } from "~/components/ui/button";
4 | import {
5 | DropdownMenu,
6 | DropdownMenuContent,
7 | DropdownMenuItem,
8 | DropdownMenuTrigger,
9 | } from "~/components/ui/dropdown-menu";
10 | import { useTheme } from "~/components/ThemeProvider";
11 |
12 | export function ModeToggle() {
13 | const { setTheme } = useTheme();
14 |
15 | return (
16 | No Learning Content Available
17 |18 | {isAdmin 19 | ? "You have not added any learning content yet." 20 | : "The course owner has not added any learning content yet. Please check back later."} 21 |
22 | {isAdmin ? ( 23 | 27 | Create a Module 28 | 29 | ) : ( 30 | 34 | Back to Home 35 | 36 | )} 37 |
30 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/hooks/mutations/use-delete-comment.ts:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from "@tanstack/react-query";
2 | import { useLoaderData } from "@tanstack/react-router";
3 | import { deleteCommentFn } from "~/fn/comments";
4 | import { getCommentsQuery } from "~/lib/queries/comments";
5 | import { useAuth } from "../use-auth";
6 |
7 | export function useDeleteComment() {
8 | const queryClient = useQueryClient();
9 | const { segment } = useLoaderData({ from: "/learn/$slug/_layout/" });
10 | const user = useAuth();
11 | return useMutation({
12 | mutationFn: (commentId: { commentId: number }) =>
13 | deleteCommentFn({ data: commentId }),
14 | onSuccess: () => {
15 | queryClient.invalidateQueries(getCommentsQuery(segment.id));
16 | },
17 | onMutate: (variables) => {
18 | if (!user || !navigator.onLine) throw new Error("Something went wrong");
19 | const previousComments = queryClient.getQueryData(
20 | getCommentsQuery(segment.id).queryKey
21 | );
22 | queryClient.setQueryData(getCommentsQuery(segment.id).queryKey, (old) =>
23 | old?.filter((comment) => comment.id !== variables.commentId)
24 | );
25 | return { previousComments };
26 | },
27 | onError: (_, __, context) => {
28 | queryClient.setQueryData(
29 | getCommentsQuery(segment.id).queryKey,
30 | context?.previousComments
31 | );
32 | },
33 | });
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as PopoverPrimitive from "@radix-ui/react-popover";
3 |
4 | import { cn } from "~/lib/utils";
5 |
6 | const Popover = PopoverPrimitive.Root;
7 |
8 | const PopoverTrigger = PopoverPrimitive.Trigger;
9 |
10 | const PopoverAnchor = PopoverPrimitive.Anchor;
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef
10 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/routes/api/login/google/index.ts:
--------------------------------------------------------------------------------
1 | import { createServerFileRoute } from "@tanstack/react-start/server";
2 | import { generateCodeVerifier, generateState } from "arctic";
3 | import { googleAuth } from "~/utils/auth";
4 | import { setCookie } from "@tanstack/react-start/server";
5 |
6 | const MAX_COOKIE_AGE_SECONDS = 60 * 10;
7 |
8 | export const ServerRoute = createServerFileRoute("/api/login/google/").methods({
9 | GET: async ({ request }) => {
10 | const url = new URL(request.url);
11 | const redirectUri = url.searchParams.get("redirect_uri") || "/";
12 |
13 | const state = generateState();
14 | const codeVerifier = generateCodeVerifier();
15 | const authorizationInfo = googleAuth.createAuthorizationURL(
16 | state,
17 | codeVerifier,
18 | ["profile", "email"]
19 | );
20 |
21 | setCookie("google_oauth_state", state, {
22 | path: "/",
23 | httpOnly: true,
24 | secure: true,
25 | sameSite: "lax",
26 | maxAge: MAX_COOKIE_AGE_SECONDS,
27 | });
28 |
29 | setCookie("google_code_verifier", codeVerifier, {
30 | path: "/",
31 | httpOnly: true,
32 | secure: true,
33 | sameSite: "lax",
34 | maxAge: MAX_COOKIE_AGE_SECONDS,
35 | });
36 |
37 | setCookie("google_redirect_uri", redirectUri, {
38 | path: "/",
39 | httpOnly: true,
40 | secure: true,
41 | sameSite: "lax",
42 | maxAge: MAX_COOKIE_AGE_SECONDS,
43 | });
44 |
45 | return Response.redirect(authorizationInfo.href);
46 | },
47 | });
48 |
--------------------------------------------------------------------------------
/src/styles/animations.css:
--------------------------------------------------------------------------------
1 | @keyframes tilt {
2 | 0%, 50%, 100% {
3 | transform: rotate(0deg);
4 | }
5 | 25% {
6 | transform: rotate(0.5deg);
7 | }
8 | 75% {
9 | transform: rotate(-0.5deg);
10 | }
11 | }
12 |
13 | @keyframes float {
14 | 0%, 100% {
15 | transform: translateY(0);
16 | }
17 | 50% {
18 | transform: translateY(-10px);
19 | }
20 | }
21 |
22 | @keyframes pulse {
23 | 0%, 100% {
24 | opacity: 1;
25 | transform: scale(1);
26 | }
27 | 50% {
28 | opacity: 0.5;
29 | transform: scale(1.05);
30 | }
31 | }
32 |
33 | @keyframes shimmer {
34 | 0% {
35 | background-position: 200% 0;
36 | }
37 | 100% {
38 | background-position: -200% 0;
39 | }
40 | }
41 |
42 | @keyframes glow {
43 | 0%, 100% {
44 | box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
45 | }
46 | 50% {
47 | box-shadow: 0 0 30px rgba(52, 211, 153, 0.6);
48 | }
49 | }
50 |
51 | @keyframes border-flow {
52 | 0% {
53 | background-position: 0% 50%;
54 | }
55 | 50% {
56 | background-position: 100% 50%;
57 | }
58 | 100% {
59 | background-position: 0% 50%;
60 | }
61 | }
62 |
63 | .animate-tilt {
64 | animation: tilt 1s ease-in-out infinite;
65 | }
66 |
67 | .animate-float {
68 | animation: float 3s ease-in-out infinite;
69 | }
70 |
71 | .animate-pulse-slow {
72 | animation: pulse 2s ease-in-out infinite;
73 | }
74 |
75 | .animate-shimmer {
76 | animation: shimmer 6s linear infinite;
77 | }
78 |
79 | .animate-glow {
80 | animation: glow 2s ease-in-out infinite;
81 | }
--------------------------------------------------------------------------------
/src/hooks/mutations/use-edit-comment.ts:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from "@tanstack/react-query";
2 | import { updateCommentFn, UpdateCommentSchema } from "~/fn/comments";
3 | import { useLoaderData } from "@tanstack/react-router";
4 | import { useAuth } from "../use-auth";
5 | import { getCommentsQuery } from "~/lib/queries/comments";
6 |
7 | export function useEditComment() {
8 | const { segment } = useLoaderData({ from: "/learn/$slug/_layout/" });
9 | const user = useAuth();
10 | const queryClient = useQueryClient();
11 | return useMutation({
12 | mutationFn: (variables: UpdateCommentSchema) =>
13 | updateCommentFn({ data: variables }),
14 | onSuccess: () => {
15 | queryClient.invalidateQueries(getCommentsQuery(segment.id));
16 | },
17 | onMutate: (variables) => {
18 | if (!user || !navigator.onLine) throw new Error("Something went wrong");
19 | const previousComments = queryClient.getQueryData(
20 | getCommentsQuery(segment.id).queryKey
21 | );
22 | queryClient.setQueryData(getCommentsQuery(segment.id).queryKey, (old) =>
23 | old?.map((comment) =>
24 | comment.id === variables.commentId
25 | ? { ...comment, content: variables.content }
26 | : comment
27 | )
28 | );
29 | return { previousComments };
30 | },
31 | onError: (_, __, context) => {
32 | queryClient.setQueryData(
33 | getCommentsQuery(segment.id).queryKey,
34 | context?.previousComments
35 | );
36 | },
37 | });
38 | }
39 |
--------------------------------------------------------------------------------
/src/use-cases/modules.ts:
--------------------------------------------------------------------------------
1 | import {
2 | getModules,
3 | getModuleByTitle,
4 | createModule,
5 | getModulesWithSegments,
6 | reorderModules,
7 | deleteModule,
8 | } from "~/data-access/modules";
9 | import type { ModuleCreate } from "~/db/schema";
10 |
11 | export async function getModulesUseCase() {
12 | return getModules();
13 | }
14 |
15 | export async function createModuleUseCase(module: ModuleCreate) {
16 | return createModule(module);
17 | }
18 |
19 | export async function getOrCreateModuleUseCase(title: string) {
20 | const existingModule = await getModuleByTitle(title);
21 | if (existingModule) {
22 | return existingModule;
23 | }
24 |
25 | // Get all modules to determine the next order number
26 | const modules = await getModules();
27 | const maxOrder = modules.reduce(
28 | (max, module) => Math.max(max, module.order),
29 | -1
30 | );
31 | const nextOrder = maxOrder + 1;
32 |
33 | return createModule({ title, order: nextOrder });
34 | }
35 |
36 | export async function getModulesWithSegmentsUseCase() {
37 | const modulesWithSegments = await getModulesWithSegments();
38 |
39 | // Sort segments within each module by order
40 | return modulesWithSegments.map((module) => ({
41 | ...module,
42 | segments: module.segments.sort((a, b) => a.order - b.order),
43 | }));
44 | }
45 |
46 | export async function reorderModulesUseCase(
47 | updates: { id: number; order: number }[]
48 | ) {
49 | return reorderModules(updates);
50 | }
51 |
52 | export async function deleteModuleUseCase(moduleId: number) {
53 | return deleteModule(moduleId);
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/DefaultCatchBoundary.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ErrorComponent,
3 | Link,
4 | rootRouteId,
5 | useMatch,
6 | useRouter,
7 | } from '@tanstack/react-router'
8 | import type { ErrorComponentProps } from '@tanstack/react-router'
9 |
10 | export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
11 | const router = useRouter()
12 | const isRoot = useMatch({
13 | strict: false,
14 | select: (state) => state.id === rootRouteId,
15 | })
16 |
17 | console.error(error)
18 |
19 | return (
20 |
11 |
37 |
12 |
21 |
22 |
23 |
24 |
36 |
25 |
35 |
26 |
28 |
29 |
34 | New Segment
30 |31 | Create a learning segment 32 |
33 |
21 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/utils/session.ts:
--------------------------------------------------------------------------------
1 | import { type UserId } from "~/use-cases/types";
2 | import { createSession, generateSessionToken, validateRequest } from "./auth";
3 | import { AuthenticationError } from "~/use-cases/errors";
4 | import { getCookie, setCookie } from "@tanstack/react-start/server";
5 | import { env } from "./env";
6 |
7 | const SESSION_COOKIE_NAME = "session";
8 |
9 | export async function setSessionTokenCookie(
10 | token: string,
11 | expiresAt: Date
12 | ): Promise
23 |
31 | {isRoot ? (
32 |
36 | Home
37 |
38 | ) : (
39 | {
43 | e.preventDefault()
44 | window.history.back()
45 | }}
46 | >
47 | Go Back
48 |
49 | )}
50 |
51 |
14 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/routes/learn/add.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 | import { z } from "zod";
3 | import { assertAuthenticatedFn } from "~/fn/auth";
4 | import {
5 | getUniqueModuleNamesFn,
6 | AddSegmentHeader,
7 | useAddSegment,
8 | } from "./-components/add-segment";
9 | import { Container } from "./-components/container";
10 | import { SegmentForm } from "./-components/segment-form";
11 | import { Plus } from "lucide-react";
12 |
13 | const addSegmentSearchSchema = z.object({
14 | moduleTitle: z.string().optional(),
15 | });
16 |
17 | export const Route = createFileRoute("/learn/add")({
18 | component: RouteComponent,
19 | beforeLoad: () => assertAuthenticatedFn(),
20 | validateSearch: addSegmentSearchSchema,
21 | loader: async () => {
22 | const moduleNames = await getUniqueModuleNamesFn();
23 | return { moduleNames };
24 | },
25 | });
26 |
27 | function RouteComponent() {
28 | const { moduleNames } = Route.useLoaderData();
29 | const search = Route.useSearch();
30 | const { onSubmit, isSubmitting, uploadProgress } = useAddSegment();
31 |
32 | return (
33 |
15 |
46 |
16 |
31 |
32 |
17 |
19 |
20 |
30 | 21 | {currentSegment.title} 22 |
23 | {currentSegment.length && ( 24 |
25 |
33 | {isAdmin && currentSegment.isPremium && (
34 |
38 |
41 | )}
42 |
43 | {isAdmin &&
45 |
34 |
36 |
55 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/TODO.md:
--------------------------------------------------------------------------------
1 | # Bugs
2 |
3 | - when deleting a segment the app crashes (I think it's related to logic for redirecting the user to a previous segment)
4 | - when reordering modules, the navigation buttons do not seem to navigate the correct order of modules... are we sorting the modules by order? are we correctly updating the order on modules when we re-arrange them?
5 | - clicking on the delete module button expands the accordion but it should prevent default
6 | - it's not possible to dismiss the delete dialog when clicking outside the dialog, but I would think a better UX would be to allow it. research what's good UX and fix if it is an issue
7 |
8 | # Features
9 |
10 | - show confetti when a user completes a module
11 | - change "new video" to "complete module" when it's the last video in the module
12 | - add metric that users can see how many other users completed this segment (help drive more motivation maybe?)
13 | - add the ability for an admin to email all the premium users in the system to let them know new segments or modules are created. Add some type of MJLM editor / preview feature. This should use AWS SES. Provide a generic update template one can start editing. Hopefully support markdown to generate the MJML and send out the styled emails.
14 | - analytics for admins to see which students are finishing which segments
15 | - analytics for admins to get notifications when students comments on segments with a built in way to respond directly on the same notification page
16 | - analytics for when users view the site, sign up, and purchase by day
17 | - analytics on how the ratio between views, sign ups, premiums
18 | - gamification maybe? badges?
19 | - certificates on completion?
20 | - the ability to pick custom lucide-icons for the modules
21 | - editing the segment should change the nested layout, not go to a new page
22 | - experiment with having "new segment" show a modal with the form
23 | - load up a testimonial modal / dialog when clicking the testimonial button instead of a separate page.
24 |
--------------------------------------------------------------------------------
/src/routes/learn/$slug/edit.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 | import { assertAuthenticatedFn } from "~/fn/auth";
3 | import {
4 | getUniqueModuleNamesFn,
5 | getSegmentFn,
6 | EditSegmentHeader,
7 | useEditSegment,
8 | } from "../-components/edit-segment";
9 | import { Container } from "../-components/container";
10 | import { SegmentForm } from "../-components/segment-form";
11 | import { Edit } from "lucide-react";
12 |
13 | export const Route = createFileRoute("/learn/$slug/edit")({
14 | component: RouteComponent,
15 | beforeLoad: () => assertAuthenticatedFn(),
16 | loader: async ({ params }) => {
17 | const { segment } = await getSegmentFn({ data: { slug: params.slug } });
18 | const moduleNames = await getUniqueModuleNamesFn();
19 | return { segment, moduleNames };
20 | },
21 | });
22 |
23 | function RouteComponent() {
24 | const { segment, moduleNames } = Route.useLoaderData();
25 | const { onSubmit, isSubmitting, uploadProgress } = useEditSegment(segment);
26 |
27 | return (
28 |
29 |
31 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/utils/storage/helpers.ts:
--------------------------------------------------------------------------------
1 | import { getPresignedUploadUrlFn } from "~/fn/storage";
2 | import { getVideoDuration, formatDuration } from "~/utils/video-duration";
3 |
4 | export interface UploadProgress {
5 | loaded: number;
6 | total: number;
7 | percentage: number;
8 | }
9 |
10 | export interface UploadResult {
11 | videoKey: string;
12 | duration: string; // formatted duration like "2:34"
13 | durationSeconds: number; // raw duration in seconds
14 | }
15 |
16 | export async function uploadVideoWithPresignedUrl(
17 | key: string,
18 | file: File,
19 | onProgress?: (progress: UploadProgress) => void
20 | ): Promise
9 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/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
10 |
14 |
15 |
22 |
23 |
24 |
42 |
43 |
44 |
11 |
13 |
25 | {/* Skeleton for mobile navigation content */}
26 | {Array.from({ length: 3 }).map((_, index) => (
27 |
41 |
28 |
39 | ))}
40 |
29 |
38 |
30 |
37 |
32 |
35 |
29 |
47 | );
48 | }
49 |
50 | return (
51 | 30 | No Learning Content Available 31 |
32 |33 | {isAdmin 34 | ? "You have not added any learning content yet. Get started by creating your first module!" 35 | : "The course is still under development. Please check back later."} 36 |
37 | {isAdmin ? ( 38 | 41 | ) : ( 42 | 45 | )} 46 |
52 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/src/routes/learn/-components/edit-segment/use-edit-segment.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useNavigate, useParams } from "@tanstack/react-router";
3 | import { updateSegmentFn } from "./server-functions";
4 | import { type SegmentFormValues } from "../segment-form";
5 | import {
6 | uploadVideoWithPresignedUrl,
7 | type UploadProgress,
8 | } from "~/utils/storage/helpers";
9 | import { generateRandomUUID } from "~/utils/uuid";
10 | import { usePreventTabClose } from "~/hooks/use-prevent-tab-close";
11 |
12 | export function useEditSegment(segment: any) {
13 | const navigate = useNavigate();
14 | const params = useParams({ from: "/learn/$slug/edit" });
15 | const slug = params.slug;
16 | const [isSubmitting, setIsSubmitting] = useState(false);
17 | const [uploadProgress, setUploadProgress] = useStateWelcome to the Course
53 |54 | Ready to start learning? Click below to begin with the first lesson. 55 |
56 | 61 |
22 | {/* Skeleton for 3-4 modules */}
23 | {Array.from({ length: 3 }).map((_, index) => (
24 |
49 |
25 |
47 | ))}
48 |
26 |
46 |
27 |
45 |
28 |
44 |
29 |
43 |
30 |
38 |
31 |
33 |
34 |
37 |
39 |
42 |
21 | {/* Tab Headers */}
22 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/drizzle/0000_complex_harrier.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE "app_accounts" (
2 | "id" serial PRIMARY KEY NOT NULL,
3 | "userId" serial NOT NULL,
4 | "googleId" text,
5 | CONSTRAINT "app_accounts_googleId_unique" UNIQUE("googleId")
6 | );
7 | --> statement-breakpoint
8 | CREATE TABLE "app_attachment" (
9 | "id" serial PRIMARY KEY NOT NULL,
10 | "segmentId" serial NOT NULL,
11 | "fileName" text NOT NULL,
12 | "fileKey" text NOT NULL,
13 | "created_at" timestamp DEFAULT now() NOT NULL
14 | );
15 | --> statement-breakpoint
16 | CREATE TABLE "app_profile" (
17 | "id" serial PRIMARY KEY NOT NULL,
18 | "userId" serial NOT NULL,
19 | "displayName" text,
20 | "imageId" text,
21 | "image" text,
22 | "bio" text DEFAULT '' NOT NULL,
23 | CONSTRAINT "app_profile_userId_unique" UNIQUE("userId")
24 | );
25 | --> statement-breakpoint
26 | CREATE TABLE "app_segment" (
27 | "id" serial PRIMARY KEY NOT NULL,
28 | "title" text NOT NULL,
29 | "content" text NOT NULL,
30 | "order" integer NOT NULL,
31 | "moduleId" text NOT NULL,
32 | "videoKey" text,
33 | "created_at" timestamp DEFAULT now() NOT NULL,
34 | "updated_at" timestamp DEFAULT now() NOT NULL
35 | );
36 | --> statement-breakpoint
37 | CREATE TABLE "app_session" (
38 | "id" text PRIMARY KEY NOT NULL,
39 | "userId" serial NOT NULL,
40 | "expires_at" timestamp with time zone NOT NULL
41 | );
42 | --> statement-breakpoint
43 | CREATE TABLE "app_user" (
44 | "id" serial PRIMARY KEY NOT NULL,
45 | "email" text,
46 | "emailVerified" timestamp,
47 | CONSTRAINT "app_user_email_unique" UNIQUE("email")
48 | );
49 | --> statement-breakpoint
50 | ALTER TABLE "app_accounts" ADD CONSTRAINT "app_accounts_userId_app_user_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."app_user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
51 | ALTER TABLE "app_attachment" ADD CONSTRAINT "app_attachment_segmentId_app_segment_id_fk" FOREIGN KEY ("segmentId") REFERENCES "public"."app_segment"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
52 | ALTER TABLE "app_profile" ADD CONSTRAINT "app_profile_userId_app_user_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."app_user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
53 | ALTER TABLE "app_session" ADD CONSTRAINT "app_session_userId_app_user_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."app_user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
54 | CREATE INDEX "user_id_google_id_idx" ON "app_accounts" USING btree ("userId","googleId");--> statement-breakpoint
55 | CREATE INDEX "sessions_user_id_idx" ON "app_session" USING btree ("userId");
--------------------------------------------------------------------------------
/src/routes/learn/-components/course-segments.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | SidebarGroup,
3 | SidebarGroupContent,
4 | SidebarGroupLabel,
5 | SidebarMenu,
6 | SidebarMenuItem,
7 | SidebarMenuButton,
8 | } from "~/components/ui/sidebar";
9 |
10 | interface Segment {
11 | id: string;
12 | title: string;
13 | }
14 |
15 | interface CourseSegmentsProps {
16 | segments: Segment[];
17 | currentSegmentId: string;
18 | variant?: "mobile" | "desktop";
19 | }
20 |
21 | export function CourseSegments({
22 | segments,
23 | currentSegmentId,
24 | variant = "desktop",
25 | }: CourseSegmentsProps) {
26 | if (variant === "mobile") {
27 | return (
28 |
23 |
35 |
47 |
48 |
49 | {/* Tab Content */}
50 |
51 | {activeTab === "content" && (
52 |
63 |
29 | {segments.map((segment) => (
30 |
37 |
44 | );
45 | }
46 |
47 | return (
48 |
38 | {segment.id}
39 |
40 | {segment.title}
41 |
42 | ))}
43 |
19 |
28 | );
29 | }
30 |
31 | return (
32 |
20 |
21 |
25 |
26 |
27 |
33 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/src/routes/success.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 | import { useFirstSegment } from "~/hooks/use-first-segment";
3 | import Confetti from "react-confetti";
4 | import { Button } from "~/components/ui/button";
5 | import { useEffect, useState } from "react";
6 | import { useWindowSize } from "~/hooks/use-window-size";
7 |
8 | export const Route = createFileRoute("/success")({ component: RouteComponent });
9 |
10 | function RouteComponent() {
11 | const [cofettiPieces, setCofettiPieces] = useState(100);
12 | const { data: firstSegment, isLoading } = useFirstSegment();
13 | const { width, height } = useWindowSize();
14 |
15 | useEffect(() => {
16 | const timeout = setTimeout(() => {
17 | setCofettiPieces(0);
18 | }, 5000);
19 |
20 | return () => clearTimeout(timeout);
21 | }, []);
22 |
23 | return (
24 |
34 | {/* User Info */}
35 |
76 |
36 | 
44 |
53 |
54 |
45 |
52 | 46 | {profile?.displayName} 47 |
48 | {user.isPremium && ( 49 |Premium Member
50 | )} 51 |
58 |
59 |
66 |
67 |
68 |
69 |
73 |
74 |
75 |
25 | {/* Background gradient similar to homepage */}
26 |
27 |
28 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/routes/learn/-components/mobile-navigation.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "~/components/ui/button";
2 | import {
3 | Sheet,
4 | SheetContent,
5 | SheetHeader,
6 | SheetTitle,
7 | SheetTrigger,
8 | } from "~/components/ui/sheet";
9 | import { Menu, Plus } from "lucide-react";
10 | import type { Module, Progress, Segment } from "~/db/schema";
11 | import { NavigationItems } from "./navigation-items";
12 | import { UserMenu } from "./user-menu";
13 | import { useState } from "react";
14 | import { useRouter } from "@tanstack/react-router";
15 | interface ModuleWithSegments extends Module {
16 | segments: Segment[];
17 | }
18 |
19 | interface MobileNavigationProps {
20 | modules: ModuleWithSegments[];
21 | currentSegmentId: number;
22 | isAdmin: boolean;
23 | isPremium: boolean;
24 | progress: Progress[];
25 | }
26 |
27 | export function MobileNavigation({
28 | modules,
29 | currentSegmentId,
30 | isAdmin,
31 | isPremium,
32 | progress,
33 | }: MobileNavigationProps) {
34 | const [open, setOpen] = useState(false);
35 | const router = useRouter();
36 |
37 | return (
38 |
31 |
69 |
32 |
68 |
33 |
67 |
34 |
48 |
49 | 50 | Payment Successful! 51 |
52 |53 | Thank you for your purchase. Your order has been confirmed. 54 |
55 | 66 |
52 |
63 |
53 | 
58 |
59 | The 20 React Challenges Course
60 |
61 |
62 |
58 |
59 | The 20 React Challenges Course
60 |
61 |
64 | setOpen(false)}
71 | />
72 | {isAdmin && (
73 |
84 | )}
85 |
86 |
87 | {/* User menu at the bottom */}
88 |
10 | {/* Subtle gradient overlay */}
11 |
12 |
13 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/src/routes/-components/footer.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "@tanstack/react-router";
2 | import { useFirstSegment } from "~/hooks/use-first-segment";
3 |
4 | export function FooterSection() {
5 | const firstSegment = useFirstSegment();
6 |
7 | return (
8 |
92 | );
93 | }
94 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tanstack-start-example-basic-react-query",
3 | "private": true,
4 | "sideEffects": false,
5 | "type": "module",
6 | "scripts": {
7 | "dev": "npm run docker:up && vite dev",
8 | "build": "vite build",
9 | "start": "npm run db:migrate && node .output/server/index.mjs",
10 | "docker:up": "docker compose up -d",
11 | "docker:down": "docker compose down",
12 | "db:push": "drizzle-kit push --config=drizzle.config.ts",
13 | "db:migrate": "tsx ./src/db/migrate.ts",
14 | "db:generate": "drizzle-kit generate --config=drizzle.config.ts",
15 | "db:studio": "drizzle-kit studio",
16 | "db:clear": "tsx ./src/db/clear.ts",
17 | "db:seed": "tsx ./src/db/seed.ts",
18 | "db:reset": "npm run db:clear && npm run db:migrate && npm run db:seed",
19 | "stripe:webhook": "stripe listen --forward-to http://localhost:3000/api/stripe/webhook",
20 | "upload:videos": "tsx ./scripts/upload-videos-to-r2.ts"
21 | },
22 | "dependencies": {
23 | "@aws-sdk/client-s3": "^3.850.0",
24 | "@aws-sdk/lib-storage": "^3.850.0",
25 | "@aws-sdk/s3-request-presigner": "^3.850.0",
26 | "@hello-pangea/dnd": "^18.0.1",
27 | "@hookform/resolvers": "^5.2.0",
28 | "@radix-ui/react-alert-dialog": "^1.1.14",
29 | "@radix-ui/react-checkbox": "^1.3.2",
30 | "@radix-ui/react-dialog": "^1.1.14",
31 | "@radix-ui/react-dropdown-menu": "^2.1.15",
32 | "@radix-ui/react-label": "^2.1.7",
33 | "@radix-ui/react-popover": "^1.1.14",
34 | "@radix-ui/react-progress": "^1.1.7",
35 | "@radix-ui/react-separator": "^1.1.7",
36 | "@radix-ui/react-slot": "^1.2.3",
37 | "@radix-ui/react-switch": "^1.2.5",
38 | "@radix-ui/react-toast": "^1.2.14",
39 | "@radix-ui/react-tooltip": "^1.2.7",
40 | "@stripe/stripe-js": "^7.6.1",
41 | "@tailwindcss/vite": "^4.1.11",
42 | "@tanstack/react-query": "^5.83.0",
43 | "@tanstack/react-query-devtools": "^5.83.0",
44 | "@tanstack/react-router": "^1.130.2",
45 | "@tanstack/react-router-with-query": "^1.130.2",
46 | "@tanstack/react-start": "^1.130.2",
47 | "arctic": "^3.7.0",
48 | "class-variance-authority": "^0.7.1",
49 | "clsx": "^2.1.1",
50 | "cmdk": "^1.1.1",
51 | "drizzle-orm": "^0.44.3",
52 | "entities": "^6.0.1",
53 | "framer-motion": "^12.23.10",
54 | "js-cookie": "^3.0.5",
55 | "lucide-react": "^0.528.0",
56 | "nprogress": "^0.2.0",
57 | "pg": "^8.16.3",
58 | "react": "^19.1.0",
59 | "react-confetti": "^6.4.0",
60 | "react-dom": "^19.1.0",
61 | "react-dropzone": "^14.3.8",
62 | "react-google-recaptcha": "^3.1.0",
63 | "react-hook-form": "^7.61.1",
64 | "react-markdown": "^10.1.0",
65 | "react-use": "^17.6.0",
66 | "redaxios": "^0.5.1",
67 | "sonner": "^2.0.6",
68 | "stripe": "^18.3.0",
69 | "tailwind-merge": "^3.3.1",
70 | "tw-animate-css": "^1.3.6",
71 | "uuid": "^11.1.0",
72 | "vite": "^7.0.6",
73 | "zod": "^4.0.10"
74 | },
75 | "devDependencies": {
76 | "@tailwindcss/typography": "^0.5.16",
77 | "@tanstack/react-router-devtools": "^1.130.2",
78 | "@types/js-cookie": "^3.0.6",
79 | "@types/node": "^24.1.0",
80 | "@types/nprogress": "^0.2.3",
81 | "@types/pg": "^8.15.4",
82 | "@types/react": "^19.1.8",
83 | "@types/react-dom": "^19.1.6",
84 | "@types/react-google-recaptcha": "^2.1.9",
85 | "drizzle-kit": "^0.31.4",
86 | "tailwindcss": "^4.1.11",
87 | "typescript": "^5.8.3",
88 | "vite-tsconfig-paths": "^5.1.4"
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/src/use-cases/segments.ts:
--------------------------------------------------------------------------------
1 | import {
2 | createSegment,
3 | deleteSegment,
4 | getSegmentById,
5 | getSegments,
6 | updateSegment,
7 | getSegmentAttachments,
8 | deleteAttachment,
9 | getSegmentBySlug,
10 | } from "~/data-access/segments";
11 | import type { Segment, SegmentCreate } from "~/db/schema";
12 | import { eq } from "drizzle-orm";
13 | import { getOrCreateModuleUseCase } from "./modules";
14 | import { database } from "~/db";
15 | import { segments } from "~/db/schema";
16 | import { getStorage } from "~/utils/storage";
17 |
18 | export async function getSegmentsUseCase() {
19 | return getSegments();
20 | }
21 |
22 | export async function getSegmentBySlugUseCase(slug: Segment["slug"]) {
23 | return getSegmentBySlug(slug);
24 | }
25 |
26 | export async function getSegmentByIdUseCase(id: Segment["id"]) {
27 | return getSegmentById(id);
28 | }
29 |
30 | export async function addSegmentUseCase(
31 | segment: SegmentCreate & { moduleTitle: string }
32 | ) {
33 | // Get or create the module
34 | const module = await getOrCreateModuleUseCase(segment.moduleTitle);
35 |
36 | // Create the segment with the module's ID
37 | return createSegment({ ...segment, moduleId: module.id });
38 | }
39 |
40 | export async function editSegmentUseCase(
41 | id: number,
42 | segment: Partial
14 |
60 |
61 | {/* Bottom border with gradient */}
62 |
63 |
15 |
23 |
24 |
25 |
26 |
46 |
47 | {/* Decorative elements */}
48 |
27 |
45 |
28 |
33 |
29 |
31 |
32 |
34 |
44 |
35 |
40 | 36 | Edit Content 37 |
38 |41 | Update and enhance your learning segment 42 |
43 |
49 |
50 |
54 |
58 |
59 |
28 |
38 | );
39 | }
40 |
41 | if (error) {
42 | return (
43 |
29 |
37 |
30 |
35 |
31 |
33 | Loading video...
36 |
44 |
56 | );
57 | }
58 |
59 | if (data) {
60 | return (
61 |
70 | );
71 | }
72 |
73 | return null;
74 | }
75 |
76 | export const getVideoUrlFn = createServerFn({ method: "GET" })
77 | .validator(z.object({ segmentId: z.number() }))
78 | .handler(async ({ data }) => {
79 | const { storage, type } = getStorage();
80 |
81 | if (type !== "r2") {
82 | return { videoUrl: `/api/segments/${data.segmentId}/video` };
83 | }
84 |
85 | const user = await getAuthenticatedUser();
86 |
87 | const segment = await getSegmentByIdUseCase(data.segmentId);
88 | if (!segment) throw new Error("Segment not found");
89 | if (!segment.videoKey) throw new Error("Video not attached to segment");
90 |
91 | if (segment.isPremium) {
92 | if (!user) throw new AuthenticationError();
93 | if (!user.isPremium && !user.isAdmin) {
94 | throw new Error("You don't have permission to access this video");
95 | }
96 | }
97 |
98 | const url = await storage.getPresignedUrl(segment.videoKey);
99 | return { videoUrl: url };
100 | });
101 |
--------------------------------------------------------------------------------
/src/routes/-components/newsletter.tsx:
--------------------------------------------------------------------------------
1 | import { createServerFn } from "@tanstack/react-start";
2 | import { z } from "zod";
3 | import { env } from "~/utils/env";
4 | import { Button } from "~/components/ui/button";
5 | import { useNewsletterSubscription } from "~/hooks/use-newsletter-subscription";
6 |
7 | declare global {
8 | interface Window {
9 | grecaptcha: any;
10 | }
11 | }
12 |
13 | export const subscribeFn = createServerFn()
14 | .validator(
15 | z.object({ email: z.string().email(), recaptchaToken: z.string() })
16 | )
17 | .handler(async ({ data }) => {
18 | const response = await fetch(
19 | "https://www.google.com/recaptcha/api/siteverify",
20 | {
21 | method: "POST",
22 | headers: { "Content-Type": "application/x-www-form-urlencoded" },
23 | body: `secret=${env.RECAPTCHA_SECRET_KEY}&response=${data.recaptchaToken}`,
24 | }
25 | );
26 | const json = (await response.json()) as {
27 | success: boolean;
28 | score: number;
29 | };
30 |
31 | if (!json.success) {
32 | throw new Error("invalid recaptcha token");
33 | }
34 |
35 | if (json.score < 0.5) {
36 | throw new Error("recaptcha score too low");
37 | }
38 |
39 | const params = new URLSearchParams();
40 | params.append("email", data.email);
41 | await fetch(env.MAILING_LIST_ENDPOINT, {
42 | method: "POST",
43 | headers: {
44 | Authorization: `Bearer ${env.MAILING_LIST_PASSWORD}`,
45 | "Content-Type": "application/x-www-form-urlencoded",
46 | },
47 | body: params.toString(),
48 | });
49 | });
50 |
51 | export function NewsletterSection() {
52 | const { email, setEmail, isSubmitted, isLoading, handleSubmit } =
53 | useNewsletterSubscription();
54 |
55 | return (
56 |
45 |
55 |
46 |
48 |
49 |
54 | Unable to load video
50 |51 | Please try refreshing the page 52 |
53 |
58 |
97 |
59 |
96 | 60 | /subscribe 61 |
62 |63 | Join our community to receive early access to new content and 64 | special discounts reserved for subscribers. 65 |
66 | 67 | {isSubmitted ? ( 68 |
69 |
78 | ) : (
79 |
94 | )}
95 |
70 |
77 | 71 | Thank you for subscribing! 72 |
73 |74 | We'll be in touch soon with updates and exclusive content. 75 |
76 |
77 |
81 | Delete Module
82 |
83 |
84 |
78 |
80 |