Build BeReal Clone (IOS 17) - SwiftUI 5 & Firebase

Create a BeReal style feed UI in SwiftUI, implementing a black background, top menu, and a scrollable feed with vertical, horizontal, and z-stacks using SF Symbols and assets.

Build a BeReal style feed cell in SwiftUI by composing ZStack and VStack layers, adding back and front images with overlays, profile info, and bottom-right action icons.

Kick off a BeReal clone project for iOS 17, exploring SwiftUI, Firebase, Storage, and phone OTP authentication, while learning each lesson in detail.

BeReal UI #3 - FeedView guides building a scrollable BeReal-like feed with a main feed cell, caption, location, and comments, using SwiftUI stacks and a reusable three-dots control.

Build the BeReal profile view in SwiftUI with a top menu bar, circular profile image, user name, and a last 14 days memories grid.

Build a BeReal clone settings page in SwiftUI with a profile header, navigable menu items like memories and time zone, and reusable rounded rectangles and stacks.

Create the edit profile view in a BeReal clone app, enabling users to update profile picture, full name, username, bio, and location with SwiftUI UI elements and placeholder handling.

BeReal UI #7 teaches building a time zone view in SwiftUI, featuring a selectable menu for Europe, Americas, West Asia, and East Asia with a save action.

Design and implement a left menu with a search bar in BeReal UI, switchable sections (suggestions, friends, requests) via animation, and handle editing state for the search bar in SwiftUI.

Build the BeReal UI suggestions page with a scrollable left menu, invite friends feature, and reusable suggestion cells using SwiftUI components.

Design the BeReal UI FriendsView in SwiftUI, mirroring the suggestions view with a scrollable list of friend cells, including profile image, name, username, and an x mark.

BeReal UI #11 builds the requests view in left menu, showing a no-requests screen by reusing friends view layout, with a sent button and an overlay reading 'no pending requests'.

Finish the BeReal left menu by building bottom-aligned, gradient-styled capsules for suggestions, friends, and requests; switch views with tap gestures and show the corresponding content using a menu state.

Learn to create a BeReal style main menu with left menu, feed, and profile views using full-width offsets, a menu binding, animated transitions, and vibration feedback.

Design the BeReal settings other view with zstack, vstack, and hstack in SwiftUI, featuring a top menu and a toggle. Add clear cache and delete account actions.

Develop the help and contact us screens for the BeReal clone using reusable chevron button views, standardized button layouts, and SwiftUI stacks to push content to the top.

Build the memories view in the BeReal UI, enabling users to deactivate memories and view activation status, with a stacked layout and a red deactivate memories button.

Develop be real style navigation by connecting profile to a settings hub with SwiftUI navigation links, and implement back navigation using environment dismiss across multiple views.

Design a BeReal style notifications view in SwiftUI, featuring a top bar, a reusable notification button, and toggle-based settings with a save button and dismiss action.

build the enter name view for a BeReal clone using SwiftUI, featuring a custom text field, name state, and a continue button that activates when the name is entered.

Build BeReal's enter age view, extending registration to capture name and birthday (month, day, year) with SwiftUI stacks, text fields, bindings, and input validation, plus a continue button.

Build a custom country code picker in a BeReal clone app using a country picker package, decoding country data, and SwiftUI views for selecting a country.

BeReal UI #22 completes the enter phone number view, letting users pick a country with a flag and code, enter their number, and proceed toward authentication.

BeReal UI #23 presents the enter code view for a six-digit OTP in a SwiftUI authentication flow, with a 60-second countdown and a continue or resend option.

Build a SwiftUI main authentication view that rotates through enter name, enter age, and enter phone number views with an authentication view model and OTP verification and Firebase backend integration.

Explore the backend of the BeReal clone app and access full source code via the resource link and Gumroad page, featuring image uploader and camera view for the feed viewer.

Build a BeReal clone by implementing an authentication view model and Firebase integration, enabling phone OTP authentication, user verification, and data persistence with Firestore using SwiftUI 5.

Develop the BeReal clone's OTP verification flow using SwiftUI and Firebase, implementing verify OTP, phone credential login, and view model updates.

Learn to move from OTP-authenticated sessions to the BeReal home screen by saving user data in Firestore, modeling the user, and sharing an authentication view model in SwiftUI with Firebase.

Learn to persist user sessions and fetch real user data from Firebase Firestore. Initialize the app to check the current user and load username, profile image, and bio.

Explore populating BeReal clone user data with Firebase authentication, a local user model, and SwiftUI view models, including testing with virtual numbers and initials-filled profile placeholders.

BeReal #30 demonstrates populating the app with server-fetched user data and displaying the current user's profile image and name via an environment-passed authentication view model for the edit profile flow.

Populate edit profile fields from the current user in a BeReal clone. Implement local save logic with state strings and a save button to update name, bio, and location.

Learn to synchronize BeReal clone profile edits with Firestore by building a save user data function that updates username, bio, and location on the server using async/await and user id.

Develop a generic image uploader for a BeReal clone using SwiftUI and Firebase, handling profile and post images, storage references, and URL retrieval.

Activate Firebase storage to store images, enable uploading via a SwiftUI image picker, and integrate a UIKit image picker into the edit profile view for BeReal #34 - image picker.

Upload the selected profile image to Firebase storage as part of a BeReal clone, save the image URL to Firestore, and display the profile image using Kingfisher.

BeReal clone: display the profile image in settings, profile, and feed using Kingfisher to load from a profile image URL, with placeholders and cache refresh.

Learn to build a BeReal style camera view in SwiftUI, post reels to a feed, and connect image uploads to Firebase storage and database by adjusting read/write rules.

Enable image selection in the BeReal clone by presenting an image picker on click, converting the chosen UI image to SwiftUI, and displaying it in the feed view.

BeReal #39 finalizes the camera view by presenting the front image picker three seconds after selecting the back image and revealing a send button after both images are taken.

Create a camera view model to upload back and front images to storage, retrieve their urls, and store them in a date-based Firestore post under BeReals.

Connect the camera view with its view model to upload front and back images to Firebase, store their URLs, and post BeReal entries using asynchronous functions and error handling.

Organize your BeReal clone project with MVVM by grouping models, view models, and views, then place helpers, extensions, and assets into dedicated folders for feed, profile, memory, settings, and authentication.

Create a feed view model, fetch be real data from firestore’s be reels collection, decode into be real models, and prepare mvvm-driven display for the feed.

Integrate the camera view into the feed, enable posting a BeReal, and wire up the feed view model to fetch data from Firebase, with planned dismiss and real data handling.

BeReal #45 shows populating a feed cell with be real data, applying blur when the user hasn't posted, and fetching the post owner's profile via a feed cell view model.

Fix bugs in the feed cell and implement a blur feature by separating front and back images in a zstack, using swiftui and firebase for a BeReal clone.

Implement a BeReal style feed with a blur gate that hides posts until the current user's posts, fetching the user's own post and rendering real images with Kingfisher.