Skip to main content

Course Overview

This page covers the overall philosophy and motivations behind the course. For detailed information about grading and policies, see the syllabus.

Why 61D?​

After taking an introductory computer science course, such as Berkeley's CS61A or Harvard CS50, there is no immediately obvious next step for learning how to design, build, and deploy a modern full stack application.

Knowledge of functions, loops, recursion, and data structures is foundational — but it is not enough to actually ship a real web application. Even after completing a computer science degree, many students have never:

  • Built a production-style user interface
  • Designed a relational database schema
  • Created a backend API
  • Connected a frontend to persistent data
  • Deployed a live application

61D bridges that gap.

Designed to be taken after a first-semester university-level computer science course, 61D teaches a focused, opinionated, modern stack for building full stack applications from scratch. The course is structured to be accessible to students with no prior web development experience, while still maintaining professional engineering standards.

All course materials are open source and free. The goal of 61D is simple: to be the default next step for students who want to move from “I can code” to “I can build and ship software.”

Technologies We Cover​

61D focuses on a coherent, modern full-stack ecosystem built around TypeScript. Rather than surveying dozens of tools, the course teaches one integrated stack deeply, so that students understand how all parts of a real application fit together.

Core Foundations​

  • Git & GitHub — Version control and collaboration
  • JavaScript & TypeScript - Modern application development with static typing
  • Developer Tooling — Command line workflows, debugging, formatting, and project structure

Frontend​

  • React — Component-based UI development
  • Tailwind CSS — Utility-first styling
  • Next.js — React framework for building full stack applications
  • React Hook Form + Zod — Type-safe form handling and validation

Backend​

  • tRPC — End-to-end type-safe API development
  • Drizzle ORM — Type-safe database access
  • PostgreSQL — Relational database fundamentals

APIs​

Students will learn how to design backend routes and interact with third-party APIs.

This stack enables students to build real applications with persistent data, structured APIs, and modern frontend architecture, without unnecessary abstraction layers.

Course Content​

Lectures​

All course content is covered in a structured sequence of 10 core lectures. Lectures combine conceptual foundations with live coding demonstrations. Most lectures include starter repositories that students can follow along with and extend.

Readings​

Readings serve as concise references and cheat sheets for lecture material. They include:

  • Code snippets
  • Concept summaries
  • Links to official documentation
  • Optional supplemental resources

The goal is to reduce friction and provide clear guidance without overwhelming students.

Labs​

Weekly labs align with the lecture modules and focus on guided application of concepts. Labs are designed to reinforce material, provide hands-on practice, and create space for questions.

Assignments​

All major concepts are practiced in coding assignments. Each assignment includes:

  • Starter code
  • Clear specifications
  • Required functionality
  • A submission rubric

Assignments begin highly guided and gradually require more independent implementation.

Assignments progressively build real application components, including:

  1. Git workflow and repository management
  2. TypeScript fundamentals
  3. Building a React-based todo application
  4. Creating validated forms
  5. Connecting frontend to backend APIs
  6. Modeling and querying relational databases

The goal is not open-ended exploration, but deliberate practice of core engineering patterns.

Projects​

The course includes two projects:

Project 1 — Frontend Application​

Students build an in-browser image format converter using React and browser APIs.

This project reinforces:

  • Component structure
  • State management
  • File handling
  • UI design

Project 2/Final Project — Final Full Stack Application​

Students design and implement a complete full-stack application using the course stack.

More info will be released as we approach the project release.

The name of the course is inspired by the naming of UC Berkeley lower division computer science courses. CS 61A, 61B, and 61C are official courses, and 61D represents the next step: applied software development.