An Xcode project for building real SwiftUI features from scratch. Each exercise gives you a working mock API and a target screen — you implement it using modern SwiftUI patterns.
Companion to the Modern SwiftUI Patterns series on pixelper.com.
Requires: Xcode 15+, iOS 17+
git clone https://github.com/christopherkmoore/SwiftUIBuilder.git
cd SwiftUIBuilder
open SwiftUIBuilder.xcodeprojOr regenerate with XcodeGen:
brew install xcodegen && xcodegen generateLoading & Error States — A user list that goes through loading, error, and empty states. Uses ContentUnavailableView for both the error (with a retry button) and the empty case. Data loads via .task on appear.
Building Robust Lists: Loading & Error States · ContentUnavailableView for Empty States
Pull-to-Refresh — A post list with .refreshable, showing a "last updated" timestamp formatted as a relative date using Text(.relative(to:)).
Pull-to-Refresh with .refreshable · Displaying Relative Dates
Search & Filter with Debounce — A product list with a debounced search field (300ms), a category picker, and an "in stock only" toggle. Cancels the previous search task before starting a new one.
Search & Filter with Debouncing · Multi-Filter Product Lists
Adaptive Grid with List/Grid Toggle — A product grid using GridItem(.adaptive(minimum: 150)) that adapts to screen width. Toggles to a list layout with a smooth opacity transition.
Photo Galleries with LazyVGrid · Adaptive Grids for Responsive Layouts · Animating Grid/List Mode Transitions
3-Column Photo Grid — A fixed 3-column grid with ZStack title overlays using .ultraThinMaterial, category filtering via a segmented picker, and a detail sheet on tap.
Modal Presentations — A product list that uses all five modal patterns: sheet, fullScreenCover, confirmationDialog, alert, and sheet-to-fullscreen transitions. Data flows back from the sheet via a closure.
Complete Guide to Modal Presentations · Confirmation Dialogs & Swipe Actions · Passing Data Back from Modals
Master-Detail with NavigationStack — A user list that navigates to a detail view showing the user's profile and posts. Both levels load their own data asynchronously and handle loading, error, and empty states independently.
Master-Detail with NavigationStack · Value-Based NavigationLink
Form Validation — A registration form with real-time validation across text fields, a secure field, picker, stepper, and toggle. The submit button stays disabled until all fields pass. Includes a password strength meter (weak / medium / strong) with regex and scoring logic.
Shared State with EnvironmentObject — A CartManager owned by a parent view and injected as an @EnvironmentObject. Child views add and remove items; a cart badge in the toolbar updates live. A modal sheet shows the full cart with editing and checkout.
@StateObject vs @ObservedObject · Building a Shopping Cart with EnvironmentObject