⚙️ iOS App Development Starter Pack

Welcome to Hack@Brown's iOS App Development starter pack! We'll walk you through building your first app and give you a quick look at a bunch of reusable features that you can use for your future projects. After working through this pack, you should be comfortable with navigating Xcode and beginning your journey into creating components, tab views, and interactable/updateable features.

As you work through this starter pack, feel free to reference the files in the repo to see what a completed project looks like. A great tool you can use to learn is "Show Quick Help" by right-clicking keywords in Xcode to view their documentation as you code.

📚 Table of Contents

1. Getting Started
2. Swift Fundamentals
3. Header Component
4. Tab View
5. Interact/Update Object

🏕️ Getting Started

Before we begin coding, set up the following:

• Download Xcode from the App Store with the latest MacOS here (Windows is not supported)
• Open Xcode and "Create New Project..."
• Select App, name your project, change the interface to SwiftUI, and choose Swift as the language
• With a new project opened, you should see [Name].App, ContentView, and Assets created for you

🔰 Swift Fundamentals

The three components of the project below will teach you some of the most important building blocks in Swift.

• vars: Variables that store types of data. Modifying a var with @State will link it to a view and update it if its value changes.
• struct: Models an instance with specified values, method, properties, functionality. Similar to a class, which Swift also supports.
• Graphical Stacks: Layout collections that frame elements horizontally, vertically, or on top of each other (HStack,VStack,ZStack).
• View: A declared type on struct/var that contributes to building the app interface that is displayed in ContentView and the app itself.
• Closure: A chunk of code that can be stored in a variable and called upon later like a method. Can remember and interact with values from their creation.

For a video tutorial on using Xcode and learning parts of Swift, see this and that.

🎩 Header Component

The goal is to create a reusable header that will appear across all tabs, which will be later implemented

• Create a new folder in your project folder called components by right-clicking the latter
• Use Command⌘ + N to create a new Swift file in the folder called Header
• Import SwiftUI and create a struct with the type View
• Within the struct, create a var to store a String for the title and the var body, which should implement a ZStack within it with Color and Text(String)

To see the finished component, select ContentView, and enable a preview screen by going to Editor -> Canvas. By calling the struct (AppHeader) with a title argument (AppHeader(title: "Test")), the canvas will compile and display your header.

📂 Tab View

At the bottom of our App, we want to have a row of buttons to switch between five tabs. We can use Swift's TabView feature for this.

• Create a new folder in the App folder named Views and five new Swift files for different Views
• After importing SwiftUI in each, create a new struct with the type View and a var body
• In the body, create a VStack that calls the header component, generates text that displays the name of the tab, and Spacer()s that push the header to the top and center the text.
• With all five views completed, create a TabView in ContentView that calls all five views and .tabItem to create matching Labels with names and icons (use systemImage to access Swift's built-in icons)

💥 Interact/Update Object

On one of the tabs, we will implement a grid of emojis that can be interacted with, and in response, create emojis that fall down the screen. See files EmojiGrid and DropView for comments and overall structure.

EmojiGrid

To structure an interactable grid of six emojis, we will split its creation into unit cells and a grid that combines them.

• Create a new Swift file under components and import SwiftUI
• Use a View struct that models an EmojiCell with a String variable to dictate its appearance and a closure variable to react to .onTapGesture
• In the var body, attach the gesture recognizer .onTapGesture to the emoji text and assign its action to the closure
• Use a new view struct below that models the EmojiGrid and create a String array of emojis, an array of GridItem(.flexible()) to format columns, and a closure variable, which passes the emoji as a String to the view, that is triggered by each cell's closure
• In the var body, create a LazyVGrid and pass the previous array formatting as its parameter
• Use a loop afterwards to create multiple EmojiCells ForEach emoji in the stored array, where each cell is linked to the grid's closure so that taps can trigger the parent's action

DropView

The tab under Views that will be used should have the capability of creating, storing, and updating emojis as they are tapped into existence and removed once they fall off screen

• Create a separate Identifiable struct that acts as a data model for every emoji that is dropped with variables to track its UUID(), String, CGFloat coordinates and velocities
• In the View struct, create updateable @State variables that automatically trigger view updates for an array of currently dropped emojis, the width of the screen, and the height of the screen
• Use a ZStack to organize all dropped emojis to render in the back first, a VStack for the header and emoji grid, and a GeometryReader to measure the width and height when Color.clear.onAppear occurs
• When creating EmojiGrid, define/delegate its closure using random positions and velocities with CGFloat.random(in:\[min\]...\[max\] to create a new instance of the Identifiable struct that should be appended to the @State array
• On completion of the ZStack, begin a Timer with .scheduledTimer that repeatedly increments the position of the emoji by its velocity and checks a condition for it to be removed

🎉 Congratulations!

Having completed this pack, you now have a ticket to begin your journey through the world of app development. Whether it be tabs or closures in games or programs, we're excited to see what you can do and hope you enjoy your time at Hack@Brown 2026. With that... Happy Hacking!