Building Doggram

Tags: SwiftUI

Learn how to build a complete social networking app from start to finish in Swift! [front-end + back-end]

Last updated 2022-01-10 | 4.7

- How to build an Instagram-like app from scratch writing 100% in Swift!
- Create beautiful screens using SwiftUI (front-end development)
- Implement popular features such as liking & commenting on posts

What you'll learn

How to build an Instagram-like app from scratch writing 100% in Swift!
Create beautiful screens using SwiftUI (front-end development)
Implement popular features such as liking & commenting on posts
Create a real database using Google Firebase Firestore (back-end development)
Manage user onboarding (Sign in with Apple + Google) and account creation
Build custom algorithms to download posts
Manage data efficiently using UserDefaults
image compression
image caches and multithreading
Optimize uploading and downloading tasks for a better user experience
Track user behavior using Firebase Analytics
Implement custom animations and haptics (vibrations)
Optimize screens for all iPhone sizes
in both light & dark mode
Implement alerts
action sheets
and other pop-ups to give users realtime feedback
Write safe and professional code to avoid crashes!

* Requirements

* Xcode 12.0 or higher (free to download on Mac)
* Google email account (free to create)
* Apple Developer Account (optional)

Description

  • How to build an Instagram-like app from scratch writing 100% in Swift!
  • Create beautiful screens using SwiftUI (front-end development)
  • Implement popular features such as liking & commenting on posts
  • Create a real database using Google Firebase Firestore (back-end development)
  • Manage user onboarding (Sign in with Apple + Google) and account creation
  • Build custom algorithms to download posts
  • Manage data efficiently using UserDefaults, image compression, image caches and multithreading
  • Optimize uploading and downloading tasks for a better user experience
  • Track user behavior using Firebase Analytics
  • Implement custom animations and haptics (vibrations)
  • Optimize screens for all iPhone sizes, in both light & dark mode
  • Implement alerts, action sheets, and other pop-ups to give users realtime feedback
  • Write safe and professional code to avoid crashes!

Course content

4 sections • 67 lectures

Introduction Preview 01:55

An introduction to DogGram!


Throughout this course, we will be building an app that looks and works a lot like Instagram. We will start with a blank project and create the full app together, using Xcode and writing 100% in Swift. We will use SwiftUI for the front-end and Google Firebase for the back-end. We will cover everything from creating user accounts to liking users' posts.


By the end of the course, you will be able to create your own social networking app that can be put into the App Store.

Course Overview Preview 04:02

A brief overview of the main topics that this course will cover. The goal is to cover all of the core topics that you will need to be able to create your own social networking apps!

Setting Up Xcode Preview 08:56

We will download Xcode and set up our DogGram project.

App Icon & Launch Screen Preview 08:37

We will set up the app's icon and launch screen.

Adding the tab bar (TabView) Preview 10:55

We will create the tab bar shown at the bottom of our app's interface.

Creating the Feed screen and a template for posts (FeedView & PostView) Preview 15:35

We will create the app's home page, which will be a feed that displays recent posts. We will also create the template view for our posts.

Setting up a data structure for posts (PostModel) Preview 19:03

We will create the PostModel, which will hold the data behind each of the posts in our app.

Creating the Comments screen (CommentsView) Preview 07:23

We will create a screen to display the comments for each post.

Creating subviews to display comments (MessagesView) Preview 21:15

We will create a subview that will display a comment on the comments screen.

Creating the Browse screen (BrowseView) Preview 21:17

We will begin to create the browse screen, which is the 2nd tab on our app.

Adding a custom grid to display posts (ImageGridView) Preview 18:02

We will create a reusable grid view to display a several post images that will be used on the Browse and Profile screens.

Creating the Upload screen (UploadView) Preview 08:48

We will create the Upload screen, which will be the 3rd tab in our app.

Uploading images from the camera and photo library (ImagePicker) Preview 21:45

We will convert a UIImagePickerController into SwiftUI format so that we can begin to import images from the camera roll and photo library.

Create screen to upload a new post (PostImageView) Preview 18:40

We will create a screen to prepare to upload an image and add a caption to the post.

Creating the Profile screen (ProfileView) Preview 12:44

We will create the Profile screen, which will be the 4th tab in our app.

Finishing the Profile screen (ProfileView) Preview 12:21

We will finish creating the Profile screen.

Creating the Settings screen (SettingsView) Preview 26:07

We will create the settings screen in our app.

Creating a screen to edit user's name and bio (SettingsEditTextView) Preview 11:51

We will create a screen that will be used to edit a user's display name and bio.

Creating a screen to edit user's profile picture (SettingsEditImageView) Preview 16:08

We will create a screen that will be used to edit a user's profile picture.

Creating a screen to funnel new users to sign up (SignUpView) Preview 09:45

The SignUpView will be displayed to new users who are not signed in and it will bring them to the onboarding screens.

Creating a screen to sign in users (OnboardingView) Preview 11:25

We will begin to create the onboarding flow in our app, giving users the ability to sign in and create profiles.

Adding a screen to create new accounts (OnboardingViewPart2) Preview 14:06

We will finish the onboarding flow in our app, giving users the ability to sign in and create profiles.

Adding a custom heart animation to like posts (LikeAnimationView) Preview 17:59

Adding a heart animation will be an awesome user experience when users like posts in our app.

Adding the ability to share and report posts Preview 17:51

We will add code to allow users to share and report posts!

Supporting Dark Mode! Preview 20:56

We will add support so that our app looks good in both Dark and Light modes.

User Interface: Section Complete! Preview 04:35

Congrats!!! We've finished the core navigation in our app and it's time to start incorporating the database. Let's bring DogGram to life!


-> You can find the completed source code for the end of Section 1 in the attached resources folder.

Connecting Google Firebase & Adding Cocoapods Preview 20:18

We will connect our app to Google Firebase, set up Firestore & Storage, and add Cocoapods to our project.

Implementing Sign In With Apple Preview 21:38

We will add the ability for users to sign into our app using their Apple account.

Implementing Sign In With Google Preview 15:58

We will add the ability for users to sign into our app using their Google account.

Authenticating users into Google Firebase Preview 13:19

We will authenticate and connect our users accounts to Google Firebase.

Moving Data Through the Onboarding Process Preview 06:35

We will update our onboarding screens to move new user data from the signing in process through the account creation process.

Begin: Creating a new user in our database Preview 25:25

We will start to create functions that will upload new user accounts into our database.

Uploading Images to Storage Preview 21:12

We will create functions to upload images to Google Firebase Storage.

Logging in a user into DogGram Preview 09:54

After connecting users to Firebase, we will now log them into our app.

Setting Up UserDefaults (@AppStorage) Preview 12:40

We will set up UserDefaults (also known as @AppStorage in SwiftUI) to persist data in our app.

Finish: Creating a new user in our database Preview 15:28

We will finish the functions that create new users in our database!

Logging Out Users Preview 11:10

Now that we have successfully logged in our first user, we will now add functions to also log them out.

Signing in again ; checking if a user already exists in our database Preview 17:49

We will finish our onboarding functions by adding logic to check if a user signing in is a returning user (already exists in our database) or a new user.

Uploading a post to the database Preview 28:08

We will create functions to upload posts to the database.

Downloading profile images Preview 20:25

We will create functions to download and display profile images.

Downloading posts for a user's profile Preview 22:19

We will download posts for a user's profile and sort them chronologically.

Downloading post images Preview 11:18

We will create functions to download and display images on posts.

Downloading posts for the Feed and Browse tabs Preview 11:10

We will download posts for the Feed tab (sorted by most recent) and the Browse tab (to highlight random posts).

Adding Extra Posts & Users (no coding!) Preview 13:08

Now that we have the ability to create user accounts and upload/download posts, we will use this video to create another user account and upload a few more posts. This extra content will give our a more realistic feel.

Adding a LazyView Preview 10:29

We will add a custom LazyView in order to avoid our app making excess calls to the database.

Liking posts Preview 19:04

We will finish our functions to like and unlike posts and have them update to the database in real time.

Reporting posts Preview 14:12

We will create functions to upload posts that have been anonymously reported to our database.

Uploading comments Preview 26:26

We will add functionality to upload comments to the database.

Downloading comments Preview 15:56

We will add functionality to download comments from the database and display them on the screen.

Updating profile statistics: post/like counts Preview 12:45

We will finish the user's profile by adding profile statistic that show the number of posts and likes a user has.

Updating user's display name Preview 28:08

We will add code to update the current user's display name and save it in our database.

Updating user's bio Preview 05:34

We will add code to update the current user's bio and save it in our database.

Updating user's profile picture Preview 11:03

We will add code to update the current user's profile picture and save it in our database.

BONUS: Multi-threading (optimizing app performance) Preview 11:22

We will update the functions to upload and download images so that they utilize background threads to run processes simultaneously and more efficiently throughout the app.

BONUS: Haptics (phone vibrations) Preview 03:35

We will learn how to add phone haptics (vibrations) to the app.

BONUS: Google Analytics (track user behavior!) Preview 12:29

We will learn how to implement Google Analytics to track user behavior in our app.

Google Firebase: Section Complete! Preview 03:17

Congrats!!! You've completed the DogGram course. I really hope you enjoyed it and learned a lot along the way.


Thank you again for choosing my course, stay excited... and happy coding :)


If you're up for a challenge, stick around for the next section!


-> You can find the completed source code for the end of Section 2 in the attached resources folder.

BONUS LECTURE: Continue Learning with FREE SwiftUI courses on my YouTube channel Preview 00:43

Challenges Introduction Preview 01:50

An introduction to the challenges section of the course.

Challenge #1 (EASY): Add Feedback Preview 01:31

Difficulty: EASY


TASK: Add the ability for users to send feedback to the database.


TIPS: Add a row to the SettingsView and have it navigate to the SettingsEditTextView. When you click the button, update the function to upload Feedback to the database (similar to uploading a report).

Challenge #2 (EASY): Segues to Onboarding Preview 01:36

Difficulty: EASY


TASK: Add segues across the app to funnel new users to the onboarding screens. It should only happen when a user tries to click certain buttons while they are not signed in.


TIPS: First find all of the buttons that don't function correctly when a user is not signed in (heart button, import photo button, etc.). Then add a .fullScreenCover, similar to what we did on the SignUpView!

Challenge #3 (EASY): Unlike Animation Preview 01:07

Difficulty: EASY


TASK: Add animation for when a user unlikes a post.


TIPS: You can reuse the LikeAnimationView, but change the icon and color.

Challenge #4 (MEDIUM): Liking Comments Preview 01:11

Difficulty: MEDIUM


TASK: Liking comments in the database!


TIPS: You will first need to update the MessageView to have a like button. Then add the button's logic to like the comment, similar to the logic on the heart button on the posts. When you upload a liked comment to the database, make sure you are updating the comment's document and not the post's document!

Challenge #5 (MEDIUM): Deleting Comments Preview 00:54

Difficulty: MEDIUM


TASK: Add the ability for users to delete their own comments.


TIPS: You first need to show an Alert to ask the user if they want to delete their own comment. Then add functions to delete the comment from the database. If successful, also update the messages on the screen.

Challenge #6 (MEDIUM): Deleting Posts Preview 00:51

Difficulty: MEDIUM


TASK: Add the ability for users to delete their own posts.


TIPS: You can add the option to delete a post within the action sheet shown when a user clicks the ellipsis button. Make sure to have it shown only when it is clicked by a user on their own post. After deleting the document and returning to the My Profile tab, you will need to reload the user's posts to update the UI without the deleted post. (Note: when you delete the post's document, you don't need to delete the post's comment sub-collection.)

Challenge #7 (HARD): Adding Multiple Images in a Single Post Preview 01:52

Difficulty: HARD


TASK: Add the ability for users to upload multiple images in a single post.


TIPS: You need to add multiple image selection into the PostImageView and when uploading a post, you need to track the # of images in a post and label them accordingly in the Storage. When downloading posts, you need to download all of the image and display multiple images within a PostView.

Challenge #8 (HARD): Deleting Accounts Preview 02:05

Difficulty: HARD


TASK: Add the ability for users to delete their accounts


TIPS: When deleting an account, you need to delete all of a user's data in the database. This includes the documents and images for their posts and their personal profile. You then need to log them out of both Firebase and the app.