Chapter 7: React SPA Foundation - TypeScript, Vite & shadcn

[jrbrowning]

React SPA Foundation - Visualizing Our Workshop

Chapter 7 adds an isolated frontend to the dedicated backend application (ollama-tools-api) from chapters 1-6.

While Python offers front-end solutions like Streamlit, JavaScript (and increasingly TypeScript) remains the primary language for front-end development. Our backend infrastructure provides model access through the CLI. This chapter builds a front end from scratch.

(Missed a chapter? Find them here. The main branch contains the latest code, synchronized with the most recent chapter. Review earlier chapters by selecting the corresponding branch.)

Single Page Application (SPA)

The JavaScript SPA ecosystem offers multiple frameworks: React, Vue.js, Svelte, and Angular. This tutorial uses React, the current market leader as of August 2025.

We'll use a fixed npm version through nvm (Node Version Manager), which manages different Node versions via a .nvmrc file on startup. See Prerequisites and Setup .

For package management, npm remains the standard. Alternatives include pnpm (stores a central version locally for reference) and Yarn (uses parallel installation for speed). Each manager uses different lock file configurations, though all share the same package.json structure.

Local development requires a server to render the React app. While Create React App (CRA) provides quick setup, it includes unnecessary overhead for production applications. This tutorial uses Vite.js, a build tool and development server with fast response times and essential features like hot module replacement (saving a file automatically updates the UI).

Our component library is shadcn/ui, which allows individual component installation as needed. The components/ui directory contains the foundation for our UI elements.

Getting Started

For startup, use: nvm i; npm i; npm run start

This command chain ensures:

• nvm i - Installs or confirms the correct Node version from .nvmrc
• npm i - Installs project dependencies
• npm run start - Launches the development server

The nvm i command safely checks whether the required Node version exists, installing it if needed or confirming it's already present. Including this step makes the command portable across projects with different Node requirements, regardless of your system's default version.

Course Prompts
For this chapter, try using these prompts:

Option 1: Copilot - Explain something in the codebase:

Examples:

ex: @workspace Which shadcn components are available?
ex: @workspace How does vite.js work in this repo?