Overview/Glossary/Extensions

5 days / 20 hours

IT Issue Reporting Web Application Bootcamp

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

Start Day 1 Extension Map

Day 1

Static Prototype and Git

Understand web workflow and create a static issue reporting prototype.

Hour 1Basic Website WorkflowFrontend, backend, database, request/response, CRUD, and project framing.Hour 2HTML FoundationSemantic HTML, form fields, labels, inputs, textarea, and button structure.Hour 3CSS FoundationSelectors, box model, form styling, layout, and responsive basics.Hour 4Issue List and GitStatic issue list, status badges, README, and GitHub push.

Day 2

Next.js and TypeScript Models

Move from static pages to a Next.js app and make the data model explicit.

Hour 1Next.js SetupProject setup, App Router, page, layout, global styles, and dev server.Hour 2Convert Static to Next.jsMove HTML/CSS prototype into TSX and Next.js app structure.Hour 3TypeScript Data ModelIssue, IssueStatus, mock data, mapping arrays, and data-driven rendering.Hour 4Components and RoutingComponent extraction, shared types, mock data files, and basic routes.

Day 3

Tailwind and Mock CRUD

Improve UI and practice CRUD flow before the real database.

Hour 1Tailwind Setup and UtilitiesTailwind setup, spacing, typography, colors, layout, and state utilities.Hour 2Tailwind Components and Responsive UIStatus badges, issue list, form layout, responsive behavior, and empty states.Hour 3Form State and ValidationClient state, FormData, validation results, error state, and mock create.Hour 4Mock CRUD and Database PrepMock update, close concept, filters, database transition, and Server Actions preview.

Day 4

Supabase Read/Create and Deploy

Connect the app to a real database and reach a deployment checkpoint.

Hour 1Supabase Setup and SchemaSupabase project, issues table, status enum, seed data, and environment variables.Hour 2Read from SupabaseServer client, database row mapping, getIssues, list page, and detail page.Hour 3Create with Server ActionsServer Actions, server-side validation, createIssue, and form integration.Hour 4Deploy CheckpointProduction environment variables, Vercel deployment, and deploy verification.

Day 5

Admin Update, Auth, RLS, and Security

Add real-world access control and security thinking around the CRUD system.

Hour 1Auth Flow and Supabase SSRAuthentication, authorization, session, cookies, Supabase SSR, and server client setup.Hour 2Login, Logout, and Protected PagesPrepared accounts, login form, logout action, requireUser, and protected routes.Hour 3Authorization, RLS, and AdminUSER/ADMIN roles, profiles, created_by, RLS policies, admin page, and update status.Hour 4Security, LLM-Safe Coding, and Final DemoOWASP mapping, deployment checks, LLM-safe workflow, security checklist, and final demo.