Cademy logoCademy Marketplace

Course Images

SwiftUI and Node.js Full Stack - Build Twitter - iOS 16

SwiftUI and Node.js Full Stack - Build Twitter - iOS 16

  • 30 Day Money Back Guarantee
  • Completion Certificate
  • 24/7 Technical Support

Highlights

  • On-Demand course

  • 21 hours 13 minutes

  • All levels

Description

Do you want to create outstanding apps with SwiftUI? Moreover, are you eager to build up your professional portfolio and show up in your next job interview with confidence? This complete iOS application development course is designed to teach you how to become an advanced multiplatform app developer using Apple's native user interface framework: SwiftUI.

In this course, we will guide you through the process of building two applications: a Notes app and a Twitter Clone app using SwiftUI and Node.js. We start with the basics and build up to developing a Twitter Clone app with authentication using Node.js and JSONWebToken library. We will also cover the foundation of Swift programming language, SwiftUI framework, core data with SwiftUI, MVVM architecture, external REST APIs integration, and many more. With hands-on tutorials, you will gain a deep understanding of Swift concurrency, data fetching, JSON serialization, and how to use the Swift Package Manager (SPM) for version control with Git. Not only that, but we will also take you through the process of building a REST API using Node.js. You will learn how to use Express.js to create a web server and Sharp.js for image processing. We will also show you how to use JSONWebToken (JWT) for authentication and many other key features of Node.js. Throughout the course, we will cover powerful SwiftUI features such as SwiftUI Menu, Items and Stacks, Resizable Bottom Sheet, Pull-to-Refresh View, In-App API, Layout Protocol, HTTP Requests, MVVM Architecture, Navigation Controllers, and Slide Menus. By the end of this course, you will have gained a complete understanding of how to develop, design, and publish your own apps in the Apple App Store. You will have learned how to create a beautiful Notes app and a fully functional Twitter Clone app with backend authentication. All the resource files are added to the GitHub repository at: https://github.com/PacktPublishing/SwiftUI-and-Node.js-Full-Stack---Build-Twitter---iOS-16

What You Will Learn

Learn Swift 5 programming language to develop native applications
Study how to fetch data from MongoDB servers using web APIs
Learn how to create custom APIs using Nodejs to fetch and push data
Build a complete server-side application using Node.js and JavaScript
Deploy your Node apps to production
Understand the Node.js ecosystem and build REST APIs

Audience

This course is designed for beginners and/or intermediate iOS developers, as well as all levels of UIKit developers who want to learn SwiftUI. It is also suitable for mobile app developers who want to learn backend development with Node.js.

The course is designed for people who want to build cool apps from scratch, regardless of their prior experience. It will start with the basics and progress to building actual cool software products.

No experience needed. The only requirement is access to a Mac or a Mac emulator.

Approach

The course follows a project-based learning approach, where you will learn by building real applications such as the Notes app and Twitter Clone app from scratch with the help of resources made by professionals. This is a comprehensive, easy-to-follow, well-explained, engaging, and hands-on course where you will build a world-renowned mobile app like Twitter, instead of just creating basic CRUD applications.

Key Features

Develop a portfolio to showcase your full-stack iOS app development skills and land your tech job * Hands-on learning by creating Notes app and Twitter Clone app, frontend and backend * 20+ hours of content in addition to the source code that can be utilized in various projects

Github Repo

https://github.com/PacktPublishing/SwiftUI-and-Node.js-Full-Stack---Build-Twitter---iOS-16

About the Author

Eren Cem Salta

Eren Cem Salta is a renowned entrepreneur and tech wizard with a passion for revolutionizing the sports industry. He is the founder of Turma, an innovative app that simplifies sports team management and athlete recruitment. The app has garnered clients such as Stanford and Princeton Universities, highlighting Cem's ingenuity and forward-thinking approach to business. Cem's entrepreneurial journey began at a young age when he started one of Turkey's first online retail stores at the age of 14. He has since honed his skills in web and mobile development, working with numerous top firms across various industries, including entertainment, logistics, and academics. Cem's passion for empowering individuals to have a voice led him to set his next goal of providing a free medium for all citizens to express themselves.

Course Outline

1. Introduction to the Course

1. Introduction

This video provides an overview of the course.

2. Welcome to the Course

This video helps you with the structure of the course and even talks about the approach one should follow while taking the course.


2. Setup for the Course

1. Downloading Node.js

This video helps you with downloading and installing Node.js and NPM.

2. Downloading Robo3T

This video helps in downloading and installing Robo3T.

3. Downloading MongoDB

This video demonstrates downloading MongoDB and setting it up on your machine.


3. Full Stack Notes App - API (Backend)

1. Introduction to Express

This video provides an introduction to Express.

2. Mongoose

This video explains Mongoose in detail.

3. Note Model and POST Request

In this video, we will explore the Note model and POST request in depth, including how they work and how to use them effectively in your programming projects.

4. GET Request

In this video, we will take a closer look at GET requests and how they function, as well as some best practices for implementing them in your web applications.

5. UPDATE and DELETE Requests

UPDATE and DELETE requests are essential tools for managing data in web applications; in this video, we will walk through how to structure and implement these requests in your own projects.


4. Full Stack Notes App - App (Frontend)

1. User Interface (UI)

This video talks and demonstrates the User Interface (UI) part.

2. Running the API

This video demonstrates how to run an API required for frontend of the app development.

3. GET Request in the App

In this video, we will walk through how to implement GET requests in a mobile app, and provide examples of how to use this functionality to retrieve and display data from an API.

4. Populating the UI with Note Model

In this video, we will explore how to populate a user interface with data from a Note model and offer tips for designing an intuitive and user-friendly UI that maximizes the value of this data.

5. Create Notes with POST Requests

In this video, we will demonstrate how to use POST requests to create and store new notes in an API and provide guidance on best practices for structuring and managing this data.

6. DELETE Notes

DELETE requests are an essential part of any application that involves user-generated content; in this video, we will walk through how to structure and implement this functionality in your own projects, and offer guidance on how to optimize the user experience when deleting notes.

7. UPDATE Notes

In this video, we will dive into how to use UPDATE requests to modify existing notes in an API and provide examples of how to structure and manage this data to ensure consistency and security.


5. Full Stack Twitter Clone - Frontend

1. Basic TabView

In this video, we will walk through the basics of implementing a TabView in a mobile app and provide examples of how to use this functionality to organize and display information in an intuitive and user-friendly way.

2. Advanced TabView

In this video, we will explore more advanced techniques for implementing a TabView in a mobile app.

3. Create TweetView

In this video, we will walk through the process of creating a custom TweetView for a mobile app.

4. FeedView

In this video, we will explore how to design and implement a FeedView in a mobile app.

5. SearchView

In this video, we will walk you through the process of building a custom SearchView for your Twitter Clone app, and offer tips for optimizing the performance and usability of this feature.

6. SearchView 2

In this video, we will explore advanced techniques for implementing a SearchView in your Twitter Clone app.

7. NotificationsView

In this video, we will demonstrate how to design and implement a custom NotificationsView for your Twitter Clone app and provide examples of how to use this functionality to keep users up-to-date on the latest activity related to their account.

8. MessagesView

In this video, we will show you how to design and implement a custom MessagesView.

9. TopBar

The TopBar is often the first thing users see when they open your app, so it's important to make a great first impression; in this video, we will guide you through the process of building a custom TopBar for your Twitter Clone app that's both attractive and functional, using the latest design patterns and best practices.

10. SlideMenu

In this video, we will show you how to build a custom SlideMenu that's both beautiful and functional, using the latest tools and techniques in mobile app development.

11. MainView

The MainView is the central hub of any Twitter Clone app, and in this video, we will guide you through the process of designing and implementing a custom MainView that showcases all the essential elements of your app, including the feed, notifications, messages, and more.

12. Profile Banner

The Profile Banner is one of the most visible and important elements of a user's profile page in a Twitter Clone app; in this video, we will demonstrate how to design and implement a custom Profile Banner.

13. Profile Bio

In this video, we will show you how to design and implement a custom Profile Bio that's both informative and engaging.

14. Profile TabButtons

In this video, we will walk you through the process of designing and implementing custom Profile TabButtons.

15. UserProfile Feed

The UserProfile Feed is the heart of any Twitter Clone app's user profile page, showcasing the user's latest tweets, retweets, and other activities; in this video, we will show you how to create a responsive, dynamic UserProfile feed.

16. Auth | WelcomeView

The WelcomeView is the first thing your users will see when they sign up for your Twitter Clone app, so it's important to make it welcoming, informative, and easy to use; in this video, we will show you how to design and implement a stylish, responsive WelcomeView.

17. Auth | RegisterView

In this video, we will take you through the process of designing and implementing a RegisterView for your Twitter Clone app that collects user data, validates it, and stores it securely.

18. Auth | LoginView

In this video, we will show you how to build a LoginView for your Twitter Clone app that authenticates users, stores their login credentials securely, and handles common login-related scenarios such as forgotten passwords and password resets.

19. Auth | Finalizing UI

In this video, we will show you how to put the finishing touches on your authentication user interface for your Twitter Clone app.


6. Full Stack Twitter Clone - API

1. Twitter API Welcome Video

This video talks about the Twitter API welcome video.

2. NPM and Dependencies

In this video, we will take a deep dive into the world of NPM and package dependencies. You will learn how to use NPM to install and manage packages and how to specify dependencies in your package.json file.

3. Express Server and Nodemon

n this video, we will show you how to use Express.js to build a powerful and scalable server for your web applications.

4. Mongoose and MongoDB

In this video, we will show you how to use Mongoose, a popular Node.js library, to build and manage a MongoDB database.

5. User Model

In this video, we will demonstrate how to build a user model for our application.

6. User Model and Validator

In this video, we will explore how to create a user model and use a validator to ensure that the user data meets certain requirements.

7. Create User

In this video, you will learn how to create a user and store it in our MongoDB database using Mongoose and Express.

8. Fetching Users

In this video, we will go over how to fetch all users from the MongoDB database using Mongoose and Express, and display them in our app.

9. toJSON

In this video, you will learn how to use the toJSON method in Mongoose to manipulate the user object before sending it as a JSON response.

10. Password Hashing with Bcrypt

In this video, we will explore how to securely hash and store user passwords using Bcrypt.

11. User and Tweet Relationship

In this video, we will establish a relationship between users and tweets, and demonstrate how to fetch all tweets by a specific user.

12. Login

In this video, we will implement the user login functionality using Passport.js authentication.

13. Tokens

In this video, we will dive deeper into JWTs and learn how to use them for secure user authentication and authorization.

14. Delete User

In this video, you will learn how to implement a secure endpoint for deleting a user, including verifying the user's identity, deleting all of the user's tweets, and using proper error handling.

15. Fetching a Specific User

In this video, you will learn how to fetch a specific user using their ID, and send back only the necessary user data.

16. Profile Image Upload

In this video, you will learn how to implement profile image upload functionality in your Twitter Clone app using Node.js and Express framework.

17. Auth Middleware

In this video, we will implement an authentication middleware that checks whether a user is authorized to access certain routes by verifying their JSON Web Token (JWT).

18. Presenting User Profile Images

In this video, the presenter shows how to present the user profile images in the app UI by creating a route to serve the static files.

19. Following

In this video, you will learn how to implement the "Follow" feature in our Twitter Clone app by creating the necessary API endpoints and integrating them into our frontend.

20. Unfollowing

In this video, you will learn how to implement the "Unfollow" feature in our Twitter Clone app by creating the necessary API endpoints and integrating them into our frontend.

21. Update User

In this video, you will learn how to update a user in our Twitter Clone app.

22. Tweeting

In this video, you will learn how to create the API endpoint for posting tweets on our Twitter Clone app using Node.js, Express, and MongoDB.

23. Fetch All Tweets

In this video, we will be implementing the functionality to fetch all tweets from the database using Mongoose and Express.js.

24. Tweet Image Upload

In this video, you will learn how to add the ability to upload images to tweets in our Twitter Clone app.

25. Tweet Image Visualize

In this video, you will learn how to visualize tweet images in your Twitter Clone app. We will explore how to retrieve tweet images from the database and display them in the app's UI.

26. Like Tweet

This video is all about implementing a "like" functionality in our Twitter Clone app.

27. Unlike Tweet

This video is all about implementing a "Unlike" functionality in our Twitter Clone app.

28. Tweet Image Check

In this video, you will learn how to implement server-side validation to check whether uploaded images for tweets are in the correct format using the Jimp package in Node.js.

29. Fetch Specific Tweets

In this video, we continue building our Twitter Clone app by implementing the functionality to fetch specific tweets.

30. Notification Model

In this video, we will be creating a Notification model for our Twitter Clone app.

31. Notification Routers

In this video, we will create the notification routers for our Twitter Clone app. By the end of this video, we will have fully functional notification routes in our Twitter Clone app.


7. Full Stack Twitter Clone - Backend

1. Server and User Model

This video will cover the creation of server and user models for the backend part of our full stack Twitter Clone app.

2. Register User

This video will guide you through the process of implementing user registration functionality for your Twitter Clone app's backend.

3. Register Services

This video covers the process of setting up the registration services for the Twitter Clone app backend using Node.js.

4. Login Services

This video covers the login services for our full stack Twitter Clone app. You will learn how to authenticate a user and generate a JSON web token using Node.js and the JWT library.

5. Fetch User Function

This video focuses on the "Fetch User" function, which is a crucial part of any app that requires user authentication. In this video, you will learn how to retrieve user data from our backend database and use it in our application. We will cover various aspects of user authentication, including retrieving user data based on their email and password, using JSON Web Tokens (JWT) for secure user authentication, and testing our login services using tools such as Postman. By the end of this video, yo

6. EnvironmentObject and Static AuthViewModel

In this video, we will discuss two important concepts in SwiftUI-EnvironmentObject and Static AuthViewModel. We will first understand what EnvironmentObject is and how it can be used to pass data between views without the need of passing data through each view. Then, we will explore how to use it to access the authenticated user across different views. Next, you will learn about the Static AuthViewModel, which is a class that stores the user authentication state and provides methods for login, l

7. Logout

In this video, you will learn how to implement the logout functionality in our SwiftUI Twitter Clone app.

8. Login Bug Fixes

In this video, we will be discussing the different bug fixes for the login functionality in our full stack Twitter Clone app. We will be exploring issues related to authentication and working through solutions to fix these bugs. By the end of this video, you will have a better understanding of how to debug and fix issues related to user authentication in your own applications.

9. CreateTweet

In this video, we will be implementing the functionality to create tweets in the full stack Twitter Clone app.

10. ImagePicker

In this video, we will be implementing an ImagePicker in our iOS Twitter Clone app, which will allow the user to select an image from their device's photo library or take a picture using their camera.

11. Using ImagePicker in Create Tweet

In this video, we will be using the ImagePicker to enable users to select and upload images along with their tweets in the full stack Twitter Clone app.

12. ImageUploader

In this video, we will be discussing how to implement the ImageUploader in our SwiftUI Twitter Clone app.

13. FeedViewModel

In this video, we will cover the implementation of the FeedViewModel, which will handle the logic and data for displaying tweets in the Twitter Clone app.

14. TweetCellViewModel

In this video, we will explore the TweetCellViewModel, which is a part of the Twitter Clone app we are building. You will learn how to represent a tweet in a view model and how to handle actions such as liking or retweeting a tweet.

15. Profile Customization

In this video, you will learn how to customize the profile of our Twitter Clone app. You will learn how to design and implement user profile pictures, headers, and other UI elements using SwiftUI.

16. EditProfileView

In this video, we will be creating an EditProfileView where users can update their profile information. We will cover the creation of the view layout, adding form fields for user input, and creating a ViewModel to handle the logic behind updating user information.

17. EditProfileView 2

Continuing from the previous video, we dive deeper into the EditProfileView to create a customizable user profile feature. By the end of this video, you will have a fully functional EditProfileView that allows users to update their profile information in your app.

18. Connecting EditProfileView and UserProfile

In this video, we will be connecting EditProfileView with UserProfile so that the user can see the updated profile details after editing them.

19. Save EditProfileView

In this video, we will cover the process of saving edited profile information in our Twitter Clone app.

20. Update EditProfileView

In this video, we continue working on EditProfileView and implement the ability to update user profile information.

21. Update Server-Side EditProfileView

In this video, we will update the server-side code for EditProfileView, which we have been working on in the previous videos. We will modify the Node.js backend to allow users to edit their profile information and update it in the database.

22. Upload Profile Image

In this video, we will cover how to upload a profile image for the user using SwiftUI and Node.js.

23. Display Profile Image

In this video, you will learn how to display the user's profile image in our SwiftUI Twitter Clone app.

24. Fixing Profile User Data

In this video, we will be fixing the profile user data in our SwiftUI Twitter Clone App. We will be identifying the errors and issues causing the wrong data to be displayed and resolve them.

25. Fixing Profile Pictures

In this video, you will learn how to fix the issue related to profile pictures in our Twitter Clone app.

26. Edit Profile and Follow Buttons

In this video, we will be working on the Edit Profile and Follow buttons of the Twitter Clone app.

27. Follow and Unfollow Server-Side

In this video, you will learn about the process of following and unfollowing users on the server-side of our application.

28. Follow and Unfollow UI

In this video, we will be implementing the follow and unfollow functionality on the user profile UI.

29. Like and Unlike Tweet Server-Side

In this video, we will focus on implementing the functionality of liking and unliking a tweet on the server-side.

30. Like and Unlike Tweet UI

In this video, we will be implementing the functionality to like and unlike tweets in the UI of our Twitter Clone app.

31. Refreshable ScrollView

In this video, we will be implementing a "Refreshable ScrollView" in our SwiftUI app, which will allow us to refresh the content of our view by pulling down on the scroll view.

32. SearchBar

In this video, you will learn how to implement a search bar in our Twitter Clone app using SwiftUI. We will create a custom search bar view and add it to our navigation bar.

33. SearchViewCell

In this video, you will learn how to create a custom view cell that displays the results of a search in a list format.

34. User Search Filter

This video helps implement the user search filter in the app.

35. Creating Accounts

In this video, we will be covering the process of creating user accounts for our application.

36. Notification Sender

In this video, you will learn how to set up notification sending in our app. We will create a NotificationSender class that takes in a user and a notification message, then sends the notification to the appropriate user.

37. Notification Functions

In this video, we will be creating notification functions for our full-stack Twitter Clone app. These functions will allow us to send notifications to users when certain events occur, such as when someone follows them or likes their tweet.

38. Notification Fetch

In this video, we will be discussing how to fetch notifications for a user in our Twitter Clone app's backend.

39. Notification Display

In this video, you will learn how to display notifications in our Twitter Clone app.


8. Swift and Programming Basics

1. Variables and Types

This video explains the variables and types in Swift programming.

2. Functions

This video explains the functions.

3. Classes and Structs

This video talks about the classes and structs.

4. Basic Operators and If Statements

This video explains basic operators and If statements.

5. Switch Statement

This video explains the Switch statement.

6. Loops

This video talks about loops.

Course Content

  1. SwiftUI and Node.js Full Stack - Build Twitter - iOS 16

About The Provider

Packt
Packt
Birmingham
Founded in 2004 in Birmingham, UK, Packt’s mission is to help the world put software to work in new ways, through the delivery of effective learning and i...
Read more about Packt

Tags

Reviews