SwiftUI & iOS 16 App Development - Instagram & TikTok

Create a car listing row in SwiftUI for a car dealership app, learning how to design a clean car list with image sizing and aspect ratio fit, and manage assets.

Learn to lay out an image and text with VStack and HStack in SwiftUI, align to leading, adjust fonts and bold, add a price with a spacer, and apply padding.

Pass data into car rows in a SwiftUI list to render each car’s name, image, and price, and prepare a data model for fetching car data.

Learn to define a car data model in swiftui by creating a car struct with image, name, and price, and preview a car object within views.

Create a car list by defining a car data model with ids, populating a hard-coded array, and displaying the cars in a navigation view using an id-based iteration.

Learn how the @State property enables mutating view data in SwiftUI by storing a variable in a shared, managed storage, allowing dynamic updates like changing a name with a button.

Explore the differences between observed object, environment object, and state object in SwiftUI, and see how a view model and published properties enable data sharing and user interface updates.

Explore binding variables and navigation links in SwiftUI, creating a profile view navigated via links and updated by a binding username in a text field.

Explore identifiable and decodable protocols by building a human data type with a unique id, then decoding json from a server using jsondecoder to populate models.

Navigate frontend food ordering by exploring kitchen types and food types, click items to view details, and place orders with a button, backend not implemented.

Create a new project, rename the main file to lists, and add content, assets, and a JSON resources file to prepare for the next steps.

Create a SwiftUI food item card with a hard-coded image, aspect fit, and shadow. Add a title and a two-line description beneath, aligned leading and padded for lists.

Create a food data service by building a food model and a data loader, decode JSON with JSONDecoder, and define a codable, identifiable food with Italian and Chinese cases.

Create a reusable food row in SwiftUI that displays food items in a horizontal scroll view, grouped by kitchen name, with a bold title and future navigation to details.

Create a navigation view with the top bar title 'Food delivery', build a dictionary of food categories, and group menu items to display a categorized list ready for detail views.

Create a food detail view by overlaying the food name on a large image with a zstack, then present a descriptive body text and clean, full-width layout.

Build a bottom order now button in SwiftUI, style with white text on a dark rounded rectangle, add padding and spacers, and enable tapping items to open a detail view.

Demonstrates wiring a SwiftUI navigation link from a food row to a food detail screen by passing the selected food, using identifiable data and plain button style.

Build a tic tac toe app while exploring game logic, loops, animations, SwiftUI interface, alerts, and data storage in an engaging iOS 16 app development module.

we begin building a tic tac toe app in SwiftUI, creating a 3x3 grid of squares with dark mode navigation, dynamic sizing, and ready to implement X and O moves.

The lecture guides implementing tic tac toe gameplay: manage nine moves with a moves array, track current user, place X or zero on tap, and animate valid moves.

Learn to implement tic tac toe game logic using functions to check moves and determine a winner, covering horizontal, vertical, and diagonal patterns for two players.

Implement final game over logic for tic tac toe, triggering a winner alert, a play again option, and resetting moves to nine empty strings with animation.

Explore how to manage video in apps with AVPlayer and integrate UIKit views into SwiftUI in the TikTok intro chapter.

Learn to build a TikTok-inspired main user interface in SwiftUI for iOS 16, including a bottom five-item menu, right-side actions, and asset and video integration.

Build a video model in SwiftUI by defining a Video struct with an identifiable id, a player, and a replay, and group videos into a dedicated folder.

Master playing videos with AVPlayer in a TikTok-like SwiftUI app by integrating AVKit, bridging UIKit with SwiftUI via UIViewRepresentable, and leveraging Apple documentation for learning.

Create a scrollable video player with a ui scroll view behind the menu, wiring data and configuring paging.

Learn how to build a SwiftUI–UIKit coordinator that links a scrollable UI with multiple subviews, computes the current video index from the scroll offset, and updates view frames dynamically.

Stop all other videos and play only the current one using a current index and parent data to control playback, then add a replay option for the next video.

Implement end of video logic with an action at item end and a notification center update. Add a replay button to toggle replay and auto play the first video.

Build an app that shows current cryptocurrency prices by fetching data from the CoinMarketCap API, using an API key and rest get requests.

Explore how APIs work, from http requests and rest principles to json data, headers, and authentication with api keys; understand get and post operations and typical response codes.

Fetch crypto prices from an API using Alamofire in a SwiftUI app, add Alamofire via Swift Package Manager, and build header-based HTTP requests.

Create a data model to decode nested json from the API and populate it with coin data (id, slug, symbol, price in USD) for display.

Fetch json data from an api to populate the crypto data model, decode into coins in the view model, publish them, and display symbols in the content view via mvvm.

Build a clean crypto price UI in SwiftUI using asset logos and a view model that fetches and parses JSON to drive the data.

Build an Instagram clone using mvvm architecture with a SwiftUI frontend and Firebase backend, delivering posts, likes, comments, profiles, search, follows, DMs, and notifications.

Create an Instagram clone project by structuring files into model, view, and view model folders, plus util and api, then add Firebase and Kingfisher via the Swift Package Manager.

Build an Instagram-like tab view with five tab screens: feed, search, notifications, upload post, and profile, organized under a main group with a content view as the initial screen.

Create an Instagram-style feed cell in SwiftUI with a profile image, edge-to-edge post image, and a bottom action bar using SF symbols for like, comment, and share.

Learn to build an Instagram-style feed with a scroll view and a lazy v stack, styling posts with padding, usernames, captions, likes, and timestamps, while using lazy loading for performance.

design a reusable post grid view in SwiftUI for profile and search, using a lazy grid with a three-column layout, square images clipped for a clean look.

Create an Instagram-like search bar in SwiftUI with a custom bound text field, magnifying glass overlay, and a cancel button that manages editing and keyboard dismissal.

Create a search-driven instagram-style view with a user list and profile image, username, and full name, using a top search bar to toggle between the list and explorer grid.

Build the Instagram notifications view in SwiftUI, featuring a notification cell with avatar, username, message, timestamp, and a follow button in a scroll view with a lazy stack.

Develop an Instagram style post upload flow by implementing a SwiftUI image picker to select a photo from the user’s gallery, then process and upload it to servers.

Build an Instagram style upload post flow in SwiftUI, integrating the image picker, optional image display, caption input, and a post button.

Create a reusable multi-line text area in SwiftUI by replacing a single-line text field with a bound text and placeholder, using a text editor, padding, and configurable placeholder.

Finish the UI by implementing the profile header view with a profile image, name, bio, and a three-item user stats row. Create a reusable user stats subview using string interpolation.

Create a reusable custom text field and a custom secure field in SwiftUI to build an Instagram login UI. Implement placeholders, binding, and icons for email and password.

Finish the registration UI by building pixel-perfect custom text fields with a translucent background and borders, add a password field, forgot password, and a sign-in navigation flow using SwiftUI.

Align sign-in and register text fields in SwiftUI with leading padding. Add email, username, and full name fields, use SF symbols, and refine navigation and layout.

Build a forgot password flow in SwiftUI by binding the email across views, hiding the navigation bar, and returning to sign in, with upcoming Firebase backend integration.

Integrate firebase to power the backend for an iOS instagram clone, configuring the firebase project, adding the config file, and enabling realtime database, storage, and email authentication.

Explore implementing authentication in a SwiftUI app with a view model and Firebase, registering users via email and password and routing to the main content.

This lecture explains static instances and a shared view model. It finishes register by storing email, username, and full name in Firestore under users with uid using a data dictionary.

Implement an email-password login using firebase, handle errors, and publish the firebase user as the user session to drive sign-in versus main view via the view model's environment object.

Learn to implement an Instagram-style main view with a tab view inside a navigation view, using a binding selected index and a computed tab title derived via switch statements.

Create a user data type in SwiftUI, with id, username, email, and profile image, conforming to Identifiable and tied to Firestore document IDs for use in views.

Create a logout feature in a SwiftUI Instagram-like app by adding a navigation bar logout button, signing out from Firebase, and resetting the user session with error handling.

Fetches user properties from database via a firestore function, links the firebase user session to a user document, and populates the view model with the current user for profile view.

Enable users to upload and preview profile pictures in a SwiftUI iOS app, show a placeholder, and use Kingfisher to load images from a URL via an image picker sheet.

Upload the profile image to storage, obtain its download URL, and update the Firestorm store to display the image in the user’s profile header.

Use guard let to obtain the user id, reference the storage image url in the users collection, update the profile image field, and preview with Kingfisher.

Fix the profile image bug by displaying the uploaded image immediately instead of the placeholder, using a user image that updates after upload, Firebase, and a simple padding tweak.

Build an Instagram-style profile header in SwiftUI, with edit profile or follow buttons and a DM option, using is current user logic and a profile view model.

Learn to implement an UploadPostViewModel to upload images and captions to storage, create post data with timestamp and user information, and support error handling and UI integration.

Test image upload flow and caption entry in a SwiftUI app, introducing a dedicated image uploader for post and profile images with Firebase storage.

Implement an image uploader that uploads profile or post images to the correct storage references using a computed file path and a switch between the profile and post cases.

Explore building an Instagram style feed with SwiftUI and Firebase, modeling a post with owner username, image url, caption, and timestamp, and fetching posts from Firestore to display.

Build a search view in SwiftUI that fetches users from Firestore, exposes them via a published list, and filters results by a lowercased query over names and usernames.

Develop a grid view model for a SwiftUI app by creating an observable object with a published posts array fetched from the server, powering the explore page with all posts.

Configure a grid view model to fetch posts for explorer or profile using an enum-driven configuration, apply horizontal padding, and filter Firebase posts by the owner uid.

Enable profile navigation from posts and search results in a SwiftUI feed by adding navigation links and a feed cell view model to fetch and pass user to the profile.

Implement a like button in SwiftUI to like or unlike posts and update the post's like count in the store, while tracking who liked each post.

Fix the like state by checking the user's presence in the post's Firestore likes subcollection, update the did like property, and reflect changes in the UI on app refresh.

Learn to implement undo like and update post and user likes in the backend, refresh the UI with timestamps, and compute like text for a SwiftUI feed cell.

Fixes image upload issues and profile image consistency by replacing post owner image URLs with the owner UID, fetching the latest profile image from users, and updating posts accordingly.

Implement a follow function in the profile view model by updating Firestore with current user following and target user follower records, and test changes in Firebase.

Refactor follow and unfollow logic into a reusable user service in the API folder, adding a static function and completion handler to support uses across view models while integrating Firebase.

Implement reusable follow and unfollow functions in the user service and profile view model, update the did follow state, and reflect changes in the follow button UI via firestorm data.

Learn to implement and reuse a check follow function in SwiftUI for Instagram-like profiles, syncing server data to toggle the following button and safeguard against the current user's profile.

Build a user stats feature by modeling a user stats type with followers, following, and posts, load counts from Firebase, and connect it to the profile view model with defaults.

Create a per-user notifications model and view model to send and store notifications in Firebase Firestore, including types like follow, like, and comment, with timestamps, post IDs, and user details.

Fetch and display notifications triggered by likes and follows via the notifications model. Query Firestore’s notifications collection, order by timestamp, map to objects, and render in the notifications view.

Explore how to build a generic notification cell in SwiftUI that supports follow, like, and post notifications, navigates to a user's profile, and conditionally shows a post image.

Create a notification cell view model to manage timestamps and feed data in a SwiftUI Instagram feed, wiring the view model to the notification model and view for proper updates.

Fetches the notification user from the users collection using the user id, attaches the data to the notification, and prepares the display for the follow-back action in the next video.

Add follow back functionality to Instagram notifications using the existing profile follow logic and a user service, updating the notification button to follow or following.

Implement a navigation link from notifications to the corresponding post by fetching the post from the post collection and directing users to that post.

Fixes a feed cell navigation bug by wrapping content in a scroll view to keep items in view when navigated, and applies the same fix to the post view.

Create a SwiftUI comment UI for an Instagram-style app, with a comment cell showing profile image, username, comment, and timestamp, and a Firebase-populated comments view with navigation and scrolling.

Explore building a custom comment input view in SwiftUI for Instagram posts, featuring a text field, a send button, a top divider, and binding-driven input handling.

Learn to build a comments view model in SwiftUI, upload comments to Firebase Firestore, and trigger post-owner notifications while wiring the comments input view to the post context.

Build a comment model and fetch comments from Firebase Firestore with a snapshot listener. Update the SwiftUI view in real time and ensure timestamps, usernames, and owner fields render correctly.

The lecture explains how to replace loading all profile views with a custom lazy view in SwiftUI, reducing processing power waste on the search page and improving scalability.

Develop messaging feature in SwiftUI for Instagram & iOS 16 course by building a chat view with a message input, a text field, and a send button navigated from profiles.

Implement a messaging feature in SwiftUI using a messages view model as an observable object, and store conversations in Firebase Firestore between two users.

Fetch messages in real time by passing the user id to the messages view model. Create a message model from Firestore snapshots and wire real-time updates for chat display.

Build a SwiftUI chat UI by rendering messages in a lazy scroll view, using a reusable MessageBubble shape with conditional alignment, profile images, and timestamps.

Align own messages to the right and others to the left, with profile images on the corresponding sides. Order messages by timestamp and enable automatic scrolling to the last message.

Add a hashable protocol that inherits from equatable to hash each message and enable automatic scrolling to the bottom when new messages arrive or when the chat view appears.

Learn to implement an edit profile flow in SwiftUI by presenting a sheet to edit your bio, updating it in Firebase, and displaying the bio in the profile view.

Explore Swift basics by creating a blank playground, declaring var and let, and using string, integer, and double types with the print function.

Learn how booleans drive if-else logic with true and false values, and compare heights using equal, not equal, greater than, and less than operators.

Learn how to use optionals to safely handle data from servers or APIs in SwiftUI, including optional binding, nil checks, and do-catch style error handling.

Master basic operators in Swift, including unary, binary, and ternary, with assignment, arithmetic, mode operator, and compound assignment operators. Explore tuples and the ternary conditional operator.

Learn to work with strings and string operations, arrays, for-in loops, and enumerated indexing in Swift, including appending, removing items, zero-based indices, and string interpolation.

Learn how to use dictionaries in Swift to map airport codes to names, access values, and apply control flow and loops, including any type and server data scenarios.

Explore switch statements with character cases, including the first and last letters of the alphabet, and implement simple functions to compute powers using for loops, parameters, and return values.

Explore advanced function concepts in Swift, including functions that do not require input values, typed parameters such as name: String, and returning min and max from an array with examples.