microsoft/frontend-bootcamp

★ 10,796TypeScriptAudience · vibe coderComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What It Does
      Teaches web fundamentals
      Builds React components
      Covers TypeScript basics
      Explains Redux state
    Tech Stack
      HTML CSS JS
      React
      TypeScript
      Fluent UI
    Audience
      Web beginners
      New frontend devs
    Setup
      Node.js required
      VS Code recommended

mindmap root((repo)) What It Does Teaches web fundamentals Builds React components Covers TypeScript basics Explains Redux state Tech Stack HTML CSS JS React TypeScript Fluent UI Audience Web beginners New frontend devs Setup Node.js required VS Code recommended

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Work through a structured two-day course to learn React and TypeScript from scratch.

USE CASE 2

Practice building interactive UI components with step-by-step hands-on exercises.

USE CASE 3

Learn Redux state management with real code examples and guided lessons.

USE CASE 4

Study web development fundamentals as a beginner using Microsoft-backed workshop materials.

Tech stack

TypeScriptJavaScriptReactReduxFluent UIJestNode.js

Getting it running

Difficulty · easy Time to first run · 30min

Requires Node.js, Git, and Visual Studio Code installed before running the local development server.

License not specified in the explanation.

In plain English

This repository contains the materials for a two-day web development workshop created by Microsoft. It is designed to take someone from the very basics of building web pages all the way through more advanced front-end topics, with hands-on exercises at each step. Day one starts with HTML, CSS, and JavaScript, the three foundational technologies of every website. It then introduces React, a popular tool for building user interfaces, and TypeScript, which adds type checking on top of JavaScript to catch mistakes earlier. By the end of day one, you are building small interactive components and learning how state, meaning the data that drives what a page displays, works in React. Day two goes deeper. It covers TypeScript more thoroughly, introduces a Microsoft component library called Fluent UI, explains theming and styling patterns, and then spends several lessons on Redux. Redux is a system for managing data across a whole app rather than just inside a single component. Bonus sections at the end cover making network requests and writing automated tests with Jest. To run the workshop materials on your own computer, you need Node.js, Git, and Visual Studio Code installed. After cloning the repository and running one install command, a local development server starts and you can follow along with each numbered step folder. Each step has its own readme with instructions, and some exercises use CodePen so you do not need to modify local files. The workshop targets beginners and developers who are new to front-end work, though some prior programming experience helps. The README lists additional learning resources at the end for further study.

Copy-paste prompts

Prompt 1

I'm following the microsoft/frontend-bootcamp workshop and I'm stuck on the Redux section. Here is the exercise code: [paste code]. Help me understand what actions, reducers, and the store are doing.

Prompt 2

Using microsoft/frontend-bootcamp's TypeScript examples, explain how to type React component props and state in simple terms for a beginner.

Prompt 3

Help me build a small React component with TypeScript that manages a counter using useState, following the style of the microsoft/frontend-bootcamp exercises.

Prompt 4

I finished Day 1 of microsoft/frontend-bootcamp and want to practice. Give me a mini project that uses HTML, CSS, React components, and state, similar in scope to the workshop exercises.

Prompt 5

I'm new to Fluent UI from microsoft/frontend-bootcamp. Show me how to add a themed Button and TextField to a React component using the Fluent UI library.

Open on GitHub → Explain another repo

← microsoft on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.