FileEditViewTerminal
IT Issue Bootcamp - Visual Studio Code
overview.tsx
Overview/Glossary/Extensions
course.config.ts5 days / 20 hours

IT Issue Reporting Web Application Bootcamp

A code-first course-book for HTML, CSS, TypeScript, Next.js, Tailwind, Supabase, deployment, authentication, roles, RLS, and LLM-safe coding.

Start Day 1Extension Map

src/day-2/index.ts

Next.js and TypeScript Models

Move from static pages to a Next.js app and make the data model explicit.
hour-1.mdxNext.js SetupProject setup, App Router, page, layout, global styles, and dev server.hour-2.mdxConvert Static to Next.jsMove HTML/CSS prototype into TSX and Next.js app structure.hour-3.mdxTypeScript Data ModelIssue, IssueStatus, mock data, mapping arrays, and data-driven rendering.hour-4.mdxComponents and RoutingComponent extraction, shared types, mock data files, and basic routes.

src/day-3/index.ts

Tailwind and Mock CRUD

Improve UI and practice CRUD flow before the real database.
hour-1.mdxTailwind Setup and UtilitiesTailwind setup, spacing, typography, colors, layout, and state utilities.hour-2.mdxTailwind Components and Responsive UIStatus badges, issue list, form layout, responsive behavior, and empty states.hour-3.mdxForm State and ValidationClient state, FormData, validation results, error state, and mock create.hour-4.mdxMock CRUD and Database PrepMock update, close concept, filters, database transition, and Server Actions preview.

src/day-4/index.ts

Supabase CRUD and Deploy

Connect the app to a real database, complete the demo data flow, and reach a deployment checkpoint.
hour-1.mdxSupabase Setup and SchemaSupabase project, issues table, status enum, seed data, and environment variables.hour-2.mdxRead from SupabaseServer client, database row mapping, getIssues, list page, and detail page.hour-3.mdxCreate with Server ActionsServer Actions, server-side validation, createIssue, and form integration.hour-4.mdxDeploy CheckpointUpdate with Server Actions, demo permissions, production checks, and Vercel deployment.

src/day-5/index.ts

Auth, Admin, RLS, and Security

Protect the existing CRUD flow with login, roles, row-level security, and an admin-only update path.
hour-1.mdxAuth Flow and Supabase SSRAuthentication, authorization, session, cookies, Supabase SSR, and server client setup.hour-2.mdxLogin, Logout, and Protected PagesPrepared accounts, login form, logout action, requireUser, and protected routes.hour-3.mdxAuthorization, RLS, and AdminUSER/ADMIN roles, profiles, created_by, RLS policies, admin page, and update status.hour-4.mdxSecurity, LLM-Safe Coding, and Final DemoOWASP mapping, deployment checks, LLM-safe workflow, security checklist, and final demo.