SwiftUI & Node.JS FullStack - Build Twitter - IOS 17

Download Node.js to set up a cross‑platform JavaScript runtime outside the browser, use the V8 engine, and verify with npm by running Hello World in the terminal.

learn how to download and install Robo 3T, the free MongoDB GUI, on Mac or Windows, unzip, drag to Applications, and connect to MongoDB.

Download MongoDB to use as the server for your apps on macOS, selecting the latest edition. Create a folder named mongo data and prepare the bin files.

Build a notes API using Express by initializing npm, installing Express, and creating a basic get route that serves notes from a JSON file on port 3000.

Create a notes model and connect it to a MongoDB database using mongoose, with nodemon for live updates and dev scripts to run the app.

Create a mongoose note model and a post /notes endpoint to save notes to MongoDB using express.json, tested with Postman.

Fetch notes from the database with a GET request using async/await and try/catch, returning notes with status 200. Learn the read portion of CRUD and prep for update and delete.

Implement update and delete requests in a notes api. Use id-based lookups, asynchronous operations, and robust error handling within create, read, update, delete flows.

Create a notes app that consumes a RESTful API backed by MongoDB, wiring a SwiftUI iOS 17 interface to fetch, add, and manage notes.

Learn to run the API for a notes app, fetch data from the database, and display it, while handling ports and server restarts.

Implement a get request to fetch notes from a restful api in a SwiftUI notes app, map the note model to database IDs, and populate the UI using URLSession dataTask.

Fetch data from the API using URLSession, decode JSON into the note model, and populate the UI with the notes using a state property for dynamic updates.

Create notes with a SwiftUI add note view, binding input, and a post request to a local API, sending JSON with headers via a sheet.

enable long-press to trigger a delete confirmation alert, perform an http delete by note id, and refresh the notes list with fetch notes.

Learn to add an update flow to a SwiftUI notes app. Implement edit mode, an edit button, and a patch-based API for updates.

Create a Twitter-like UI in SwiftUI by scaffolding an MVVM file structure and a tab view with home, feed, search, notifications, and messages.

Enhance the twitter ui by labeling tabs (feed, search, notifications, messages) and highlighting the active icon with twitter blue using selected index; add a floating tweet button with a zstack.

Builds a create tweet view in SwiftUI with cancel and tweet buttons, a custom multi-line text field using a UIKit text view, and a coordinator to bind text changes.

Design a reusable tweet cell view in SwiftUI that shows the user profile image, username, post text, and an optional image. Build a feed view by stacking multiple tweet cells in a vertical scroll view with bottom action buttons for comments, retweets, likes, and image uploads.

Builds a Twitter search UI in SwiftUI with a top search bar and a reusable search bar component bound to text, showing trends when empty and users when typing.

Finish the search view by adding a search user cell, toggle between trends and user results as you type, and implement a cancel button to dismiss the keyboard.

Build the Twitter notifications view in SwiftUI by creating notification cells with a divider, avatar image, and follow-notification text; assemble them in a scroll view using a for-each loop.

Build the messages view in SwiftUI by creating a message cell with avatar, name, username, and last message, then render multiple cells in a scrollable list.

Build a SwiftUI top bar with a hamburger menu, centered Twitter logo, and a thin bottom divider, then embed it in a main view with home and tab navigation.

Design and implement a sliding left menu in a SwiftUI Twitter-like app, featuring a profile header, toggleable drawer, reusable follow and menu item views, and animated open and close.

Learn to build a responsive twitter-style main view in SwiftUI by integrating a slide menu with a navigation view, top bar, and drag gestures, using binding, offset, and animation.

Create a Twitter-like profile page in SwiftUI with a top banner that animates on scroll, revealing the user name and tweet count behind a blur.

Fix the profile bio UI bug by adjusting the banner opacity and minY. Build the profile header with avatar, edit profile button, bio, and followers and following counts in SwiftUI.

Design and implement a Twitter profile UI with reusable tab buttons in a horizontally scrollable bar, using geometry readers, overlays, and z-index to manage profile image and tab state.

Build a twitter-like user profile feed in SwiftUI by composing reusable tweet cells, managing z-index and offset with a geometry reader, and using a view extension to obtain screen bounds.

Design the authentication flow by building a pixel-perfect welcome view and the two follow-up views: create account and log in, plus social sign-ins like Google and Apple.

Build the register view in a SwiftUI navigation flow, with a cancel button and Twitter logo, plus reusable fields for name, email, and password, and a next button.

Build the Twitter login UI in SwiftUI by using a single view that toggles between email/username and password entry, with navigation from the welcome view to register or login.

Finalize the Twitter UI by aligning the right-side menu with an offset and width, completing the UI part, and outlining upcoming API and back-end work to fetch users and posts.

Learn to build and consume a backend API for a Twitter-style app using JavaScript, and understand API usage to boost your iOS development skills.

Begin building the Twitter app backend by creating a project folder, initializing npm, and installing express and mongoose, then inspect package.json and dependencies to prepare the API.

learn to set up a basic express server by requiring express, creating app, and listening on port 3000, with nodemon for auto-restart and a dev script.

Set up MongoDB for the Twitter API project, create MongoDB data, start the server, and connect via Mongoose, then prepare to build endpoints in the next episode.

Fix a bug and build the tweet and user models with mongoose, defining a tweet schema with text, user id, optional image, likes array, and timestamps, then export for routing.

Define a user schema with fields for name, username, email, password, avatar, bio, website, location, and followers and followings. Use validator to check emails and enforce uniqueness and password length.

Create a user router with express, wiring it to the user model and a post endpoint that accepts json, saves user with async/await, and returns 201 on success or error.

Fetch all users via a get /users endpoint using express.json, with async/await and try/catch, returning 500 on errors and noting passwords should not be exposed.

Customize the user schema toJSON to exclude the password, convert the user to an object, and return a safe client response, setting up token-based authentication.

Hash passwords with bcrypt before saving to the database to prevent storing plaintext. The lecture explains a pre-save hook that hashes the password asynchronously with a salt for secure authentication.

Connect tweets to their authors by building a mongoose user–tweet relationship with a user ID and virtuals, and resolve underscore id issues for the quotable swift protocol.

Learn how to implement a login endpoint at users/login by validating credentials with a mongoose static method, the cryptologist module's compare function, and robust error handling.

Implement json web tokens to manage sessions by adding tokens array to the user schema and method that signs the user id to generate and return a token on login.

Implement a delete user route using a delete request to remove a user by id with mongoose find by ID and delete, async/await, and try-catch error handling.

Fetch a single user by id with a get /users/:id endpoint, returning the user or a 404 if not found, using try-catch for 500 errors; ensure passwords aren’t returned.

Learn how to upload images using multer and sharp in a node.js express app, resize to 250 by 250, convert to png buffers, and update the user profile avatar.

Implement authentication middleware with JWT to protect routes, verify tokens from the authorization header, and ensure only authenticated users can update their profiles.

Retrieve and visualize a user's profile image by converting binary avatar data into a JPEG via a public get endpoint using the user id.

Implement follow and unfollow by updating followers and followings arrays with put requests, guarded by authentication and ID validation, returning a 200 status on success. Validate self-follow and existing follow.

Implement an unfollow function mirroring follow, using a put request to pull from followers and update the authenticated user’s following list, with asynchronous handling and error checks.

Implement a patch route to update a Twitter user profile, validating allowed fields (name, email, password, website, bio, location) and saving the updated user.

Create a tweets router guarded by authentication to post tweets linked to the current user and save them to the database.

Fetch all tweets via a simple get request on the tweets route, using an asynchronous function with try-catch, then display and return tweets to the client.

Implement image upload for tweets by adding a dedicated image endpoint, resizing with sharp to a 350x350 PNG, and attaching the buffer to the tweet’s image field after posting.

Fetches and displays tweet images by implementing a get route with an id parameter, checks image existence, sets the content type to image/jpeg, and returns the image to the client.

Implement a put like tweet endpoint that authenticates the user, checks for prior likes, and pushes the user id into the tweet's likes array, with tests.

Implement the unlike tweet feature using a put route on /tweets/:id/unlike, updating the tweet's likes with a pull of the current user ID and enforcing authentication and error handling.

Add a tweet schema method to flag image existence, returning a boolean in JSON so the app distinguishes tweets with images for future image rendering.

Implement an endpoint to fetch tweets for a specific user by filtering with the user id, using an id parameter and handling empty results.

Define and implement a MongoDB notification model using mongoose, including like and follow types, user references, and post text, then connect notifications to the user schema.

Implement notification routers in express: create and fetch notifications with authentication, using a notification model, request body spread, user id, and receiver id filtering, with error handling and router export.

Develop the Twitter clone backend by starting your MongoDB and API servers, defining a user model and SwiftUI view model, and preparing authentication with register, login, and logout.

Implement the Twitter register flow by posting user data to the server, using URL session, JSON headers, and a view model to send name, email, date of birth, and password.

Create a Swift-based, reusable authentication services module with a generic request function, robust network error handling, and a decoupled register workflow integrated into the view model.

Implement a login authentication service in a SwiftUI and Node.js full-stack app, posting email and password to the login path, decoding the response, and handling a token in user defaults.

Learn to implement token-based authentication by checking a saved token in user defaults at app startup, then fetch the current user via authentication services and route to the feed.

Learn to share a static authentication view model via environment object in SwiftUI, use observed and state objects, and route authenticated users to the main feed.

Finish the authentication module by implementing logout: clear user defaults tokens and keys, and set the authenticated flag to false, with login and register flows wired through SwiftUI navigation.

Fixes login bugs by returning authentication data through the login function and completion, implements logout reset, and clarifies authentication flow using the environment object and token fetch.

Implement a reusable SwiftUI image picker with a coordinator and UI image picker controller, binding the selected image to the create tweet model for server posting.

Add an image picker to the create tweet view activated by a plus button, presented via a sheet, and preview image by converting a UI image to a SwiftUI image.

Learn to implement a reusable SwiftUI image uploader that posts images via multipart form data, with bearer token authentication, to upload tweet images and attach them to tweets.

Build and wire a feed in swiftui by creating a feed view model that fetches tweets from a server via request services, decodes them, and displays them in the feed.

Develop a tweet cell view model to dynamically render tweets in a SwiftUI feed, including user and tweet images, using Kingfisher for image loading and integrating with server endpoints.

Implement profile customization in a SwiftUI and Node.js Twitter backend by linking authentication, showing the current user's name and profile image in slide menu, and updating the user profile view.

Create an edit profile view in SwiftUI with cancel and save buttons, a banner image, a profile image loaded from the server via Kingfisher, and image picker support.

Extend the SwiftUI edit profile view by adding reusable custom profile text fields for name, location, and website, plus a bio editor with placeholders and bindings.

Connect the edit profile view to the user profile in SwiftUI using a profile view model, binding, and a sheet to populate and update user data.

Bind and initialize edit profile values from the current user into a SwiftUI view model, then save or cancel changes via an observable object and a save function.

Update the edit profile view and refresh the user profile view model. Publish upload complete, trigger on receive, and sync local user data in SwiftUI with the Combine framework.

Implement uploading user data via a patch request from the edit profile view model, using authenticated requests with JSON payloads to update name, bio, websites, and location on the server.

Finish the edit profile view and add profile image upload using a reusable image uploader, posting to the avatar endpoint, updating the profile and clearing the cache for new images.

Replace the stock profile image with the uploaded avatar using Kingfisher. Switch avatar to a boolean in the user model and add a placeholder.

Streamline the profile UI in swiftui by aligning bio, location, and website with the view model. Fetch and render the user’s tweets from the backend, and fix edit-profile image issues.

Fix and display user avatars with Kingfisher, loading from http://localhost:3000/users/{id} and using a placeholder; fetch users by id in the tweet cell view model and enable profile navigation.

Check whether the viewed profile is the currently authenticated user and conditionally display edit or follow buttons to enforce proper access.

Learn to implement follow and unfollow on the backend, including api endpoints, put requests, bearer token authentication, and updating followers and followings lists via a reusable request service.

Build the follow and unfollow UI on user profiles by tracking is followed, updating the profile view model, and visually toggling the follow button with a ternary operator.

Implement server-side like and unlike for tweets using put requests, identify the tweet by id, and update the authenticated user in the likes list.

Implement a SwiftUI like and unlike tweet UI by adding a likes list and didLike flag, checking the current user, and updating the button color and server state.

Implement a refreshable scroll view to refresh tweets by integrating a UI refresh control via SwiftUI and UIKit. Pull down triggers fetch tweets and updates the feed.

Design and implement a custom SwiftUI search bar in the search view of the Twitter backend course, with bound text, editing state, cancel action, and magnifying glass overlay.

Fetches all users from a local server to power a search view, builds a search view model, and displays results in a lazy list with profile images using kingfisher.

Implement a swiftui search by filtering a users array using a lowercase query and contains checks on name and username, with a ternary operator to show all or filtered results.

Create multiple social media accounts to demonstrate features like posting tweets, profiles, and notifications, using the simulator, shared authentication, settings and privacy, log in and log out, and celebrity avatars.

Define a Swift notification model (id, user, sender, receiver, type like or follow) and implement authenticated REST API calls to send, fetch, and display notifications.

Implement notifications for follow and like actions by calling the notifications endpoint at http://localhost:3000/notifications via request services, using current user and target user data to deliver follow or like alerts.

Fetch notifications for a user by building a notifications view model that calls the backend, decodes json into notification models, and updates the UI in a published notifications array.

Display user notifications in a SwiftUI app by fetching from server, iterating the view model, loading avatars with Kingfisher, and rendering follow or like messages via a notification type enum.

Master Swift basics of variables and data types, including strings, integers, doubles, floats, booleans, arrays, and dictionaries, and learn var vs let with practical Xcode playground examples.

Explore functions as self-contained code blocks that take inputs and return outputs. Learn defining, calling, and using parameters with examples like a greeting, a calculator, and min-max with arrays.

Explore classes and structs as data types with properties, initialization, and methods, then see inheritance through a car and a Tesla subclass.

Learn basic operators and if statements, including assignment, arithmetic, string concatenation, remainder, and compound assignments, then apply comparison and logical operators with if/else examples like password checks and team eligibility.

Explore switch statements for control flow in Swift, using cases, default, ranges, and value bindings to handle scenarios like named users, temperature categories, and axis positions.

Explore for loops and while loops in Swift, learning to iterate over arrays, dictionaries, and strings to personalize messages and compute powers in a social feed.