Front End Development with React, Vite.js and Bootstrap

Why Smarter. Front end courses usually build one app from scratch, so students never see what a team’s codebase looks like once it has grown, or how its quality is kept up. Smarter’s web console is a real, maintained front end, organized so that a student can work on one page without having to understand all of them:

  • One small React app per page. An npm workspace of twenty-four packages, built on React 19, TypeScript and Vite: a list page for each resource, the dashboard, a manifest editor, a terminal emulator, the chat, and the shared @smarter/common, with its sortable headers, tabbed list views and fetchDjangoUrl, which sends the session cookie and the CSRF token. The smarter-*-list apps are near-identical, so the guardrail list explains them all.

  • Quality tools already set up. One shared Storybook configuration with Mock Service Worker, about 150 Vitest and Testing Library test files with every story rendered as a test, and one ESLint configuration with accessibility rules and no warnings allowed. make react-test and make react-lint run the same checks as the CI workflow’s react job.

  • A real integration with a backend. Each app is hosted by a Django template that passes the session and the API’s URL as data attributes, and a template tag that reads Vite’s build manifest. See Full Stack Development with Django and React.

  • A published component. The chat interface, smarter-chat, is built on the chatscope UI kit, renders Markdown with math and Mermaid diagrams, shows a prompt’s progress through Server-Sent Events, applies an LLMClient’s styles as CSS custom properties, and is published to npm as @smarter.sh/ui-chat, with TypeScript types generated from the server’s Pydantic contract.

The console is styled with the Keen Bootstrap theme, by an explicit decision (ADR 026), so students also learn to work within a design system rather than around it.

What the course covers. React in one picture: components, JSX, props, state, effects and the rules of hooks; TypeScript for props, state, events and API responses; the web console’s workspace; components in isolation with Storybook, args, controls and Mock Service Worker; styling with Bootstrap, and responsive layout; accessibility, from semantic HTML to WCAG 2.2; server data, session authentication and CSRF; context and custom hooks; testing with Vitest and Testing Library; Vite, the build manifest and bundle size; Django integration; and the chat interface, from Server-Sent Events to embedding it in a page of one’s own.

Look at.

Each course plan lists every file that it uses under Smarter in the Source Code.

Read. Developing Smarter Chat, Embedding Smarter Chat, Django-React Integration, ADR 019 on React.

Exercises.

  • Run make react-storybook APP=smarter-guardrail-list and study a list page’s components in isolation, then write a new story for a state that has none, such as an empty list or an error.

  • Add a column, a filter or a sort to a list page, with a Vitest test, and get make react-test and make react-lint passing.

  • Embed a deployed LLMClient in a page of their own with the @smarter.sh/ui-chat npm package, and brand it from the LLMClient’s manifest.

Course plans. Three complete, ready-to-teach plans, each with a schedule, graded assignments and rubrics, two capstone projects, recommended texts, further study and technical prerequisites. See Course Formats and Grading for what the formats have in common.

See the Smarter Instructor Guide to install Smarter and set up a class.