Create Instagram Swift Xcode

Introduction to Heroku Preview 01:16

My message for those who don't have Parse account

Parse SDK Preview 00:08

Heroku Server by using Parse Code Preview 21:42

Initializing our work on Heroku.

For those who don't have Parse account or want to use Heroku

Saving Data in Server Preview 12:31

Creating tables in server and saving data

Getting Data from Server Preview 12:25

Retrieving data from server to app

SERVER COMMUNICATION

Decided to go with Heroku or Back4App? Preview 00:03

Message for those who decided to go with Heroku or Back4App

Connecting App to Parse. Parse Users Only Preview 08:32

Integrating Server in Instagram.

Sign In. Creating User Interface Preview 07:56

Creating User Interface in storyboard for Sign In.

Sign Up. Creating User Interface Preview 08:28

Creating User Interface in storyboard for Sign Up.

Sign Up. Coding User Interface Preview 09:12

Coding logic when keyboard is shown and hidden. Implementing keyboard's hide by user.

Sign Up. Selecting Profile Picture Preview 08:11

Implementing all required methods to select image as profile picture.

Sign Up. Sending User Information to Server Preview 17:23

Sending to server registration information filled by user.

Login Preview 15:08

Processing Login function. Saving User as logged in.

Reset Password Preview 10:27

Request password reset email to registered email address.

Sign In and Sign Up. Alignment Preview 17:40

Making alignment programmatically for all screen sizes.

Reset Password. Alignment Preview 05:56

Making alignment programmatically for all screen sizes.

Designing App. First Steps Preview 10:18

Designing attractive background for Instagram. Using Photoshop to adjust picture. Importing and programming custom font.

Receive Users Registration Confirmation Email Preview 01:56

Receive registration confirmation email to email address registered by user.

SCROLL VIEW

Home Page. Creating User Interface Preview 14:17

Creating User Interface in storyboard for Home Page.

Home Page. Receive User Information from Server Preview 10:49

Receiving User Information from the Server and showing it in header view as in Instagram.

Home Page. Receive User Posts from the Server Preview 19:57

Receiving User Pictures - Posts from the Server and showing them below header view as in Instagram.

Home Page. Counting Statistics: total Posts, total Followers, total Followings Preview 08:44

Receiving information about total posts, followers and followings. Counting them and showing in the header view labels as in Instagram.

Home Page. Tapping Statistic Labels Preview 16:17

Implementing functions for tapped labels. If tapping "total posts label" scrolling down to posts. If tapping "total followers label" going to followers. If tapping "total followings label" going to followings as in Instagram.

ARRAY

Want to be Ultra-Advance Developer? Preview 01:44

Enroll in: "Create Social App on Custom Backend with Swift PHP MySQL HTML"

Followers Page. Load followers and following users Preview 18:12

Writing function to load all followers and following users.

Followers Page. Coding User Interface Preview 11:21

Showing users we are following or users that are following us. Showing "follow" or "unfollow" button depending do we follow or not.

Followers Page. Follow or Unfollow Users Preview 09:37

Following user by clicking on "follow" button. And unfollowing user by clicking on "unfollow" button, if already following.

STRING

Guest Page. Creating User Interface. Loading Guest's Posts Preview 18:56

Creating user interface in storyboard. Coding user interface. Receiving posts that belong to users we went guest.

Guest Page. Receive Guest's Information Preview 13:24

Receiving all relevant guest-user information: general information, total posts, total followers, total followings, etc. Showing "follow" button if currently we are not following guest-user.

Guest Page. Tapping Statistics Labels Preview 07:43

Implementing functions for tapped labels. If tapping "total posts label" scrolling down to posts. If tapping "total followers label" going to followers of guest-user. If tapping "total followings label" going to following users of guest-user as in Instagram.

Guest Page. Going Guest Preview 07:04

Going guest. Going to guest-user's page.

Guest Page. Follow or Unfollow Guest Preview 02:57

Following or Unfollowing guest-user from guest's page.

Home Page. Logout Preview 04:41

Logging out from current user's account to be able to log in as another user.

Home Page and Guest Page. Alignment Preview 18:47

Making full programmatic alignment for Home Page and Guest Page.

Followers Page. Alignment Preview 06:31

Making full programmatic alignment for Followers Page.

array.removeLast()

Edit Profile. Creating User Interface and Alignment Preview 17:27

Configuring Edit Profile Page, that allows user to edit his personal and private details. Creating storyboard user interface and programatic alignment for all screen sizes.

Edit Profile. Coding User Interface Preview 17:49

Creating Picker View Controller for selecting "gender", as in Instagram. Coding user interface when keyboard is shown or hidden. Selecting new profile picture.

Edit Profile. Receive User Information Preview 05:25

Receiving user information for further editing.

Edit Profile. Regex for email and web Preview 12:35

Creating regular expressions for email and web, that will not allow user to write incorrect email address (like: [email protected]) and web link (like: wsw.udemy.12).

Edit Profile. Sending New Information to Server Preview 10:32

As profile is edited, sending new information of user to server and saving it. Coding user interface working well and professionally. Updating new information on Home Page.

REGEX

Upload Page. Creating User Interface and Alignment Preview 12:33

Creating user interface in storyboard for Upload Page. Making programmatic alignment.

Upload Page. Coding User Interface Preview 17:36

Coding user interface for cases when keyboard is shown or hidden. Selecting picture to be uploaded. Editing picture. Zooming and unzooming picture selected to be uploaded. Setting "upload button" to be disabled until picture is selected.

Upload Page. Make Post Preview 15:37

Sending selected picture to server, making post and dismissing upload page.

Upload Page. Reseting User Interface Preview 08:03

Reseting user interface after post is made. Setting "upload button" disable. Cleaning written text description. Removing selected picture from UIImageView.

RESET UI

Pagination Preview 11:48

Implementing pagination function. While you are scrolling down the page, more data from server will be shown. It saves memory of device and multiple times increases performance.

PAGINATION

Post Page. Creating User Interface Preview 07:52

Creating user interface in storyboard.

Post Page. Coding User Interface Preview 16:02

Coding user interface. Coding cell and loading selected post.

Post Page. Showing Date and Time of Post Preview 06:22

Coding date to show the date when the post has been made.

Post Page. Go to Post Preview 06:24

Going to post by tapping on picture on Home Page or Guest Page. And going back.

Post Page. Dynamic Cell. Vertical Constraints Preview 10:19

Creating vertical constraints programmatically.

Post Page. Dynamic Cell. Horizontal Constraints Preview 13:51

Creating horizontal constraints programmatically.

Designing Like, Comments and More buttons Preview 13:30

Creating and Designing "like", "comments" and "more" buttons for Post Page and importing to project.

Designing Navigation Controller and Tab Bar Preview 07:57

Customizing top and bottom bars.

Upload Page. Alignment Update Preview 05:21

Making updates of alignment for Upload Page. It is required after customization of Navigation Controller.

Designing Icons for Home and Upload Pages Preview 09:31

Creating custom buttons for tabBar Controller. Designs icons for Home Page and Upload Page.

Post Page. Like Function with Button Preview 17:16

Giving like to certain post by clicking like button.

Post Page. Like with Double Tap Preview 07:31

Giving like to certain post by tapping picture double times.

Post Page. Click Username to go Guest Preview 08:23

Going guest by clicking username button exactly same as in Instagram.

UUID

Comments Page. Creating User Interface Preview 06:22

Creating user interface in storyboard for Comments Page.

Comments Page. Coding User Interface Preview 16:40

Coding user interface and alignment. Going to comments of post.

Comments Page. Dynamic Cell Height Preview 10:36

Coding constraints programmatically to have dynamic cell height, depending on entered text.

Comments Page. Coding Main Behavior Preview 16:42

Coding main and right behavior of user interface.

Comments Page. Manipulation of Text Preview 12:41

Manipulating textView. Disable "send" button until text is entered. If +more or -less paragraph resizing textView and other elements.

Comments Page. Coding TableView methods Preview 12:28

Writing methods and settings of tableView.

Comments Page. Load Comments and Pagination Preview 16:44

Loading written comments under certain post and writing pagination function.

Comments Page. Sending Comments Preview 11:57

Sending comments under certain post as in Instagram, by writing professional code.

Comments Page. Clicking Commentator's Username Preview 05:46

Going to commentator's Home Page by clicking on his "username" button.

Comments Page. Swipe Action - Delete Comment Preview 07:11

Deleting comment by swiping comment to left if comment is written by you or written under your post that belongs to you.

Comments Page. Swipe Action - @address Comment Preview 03:19

@address comment to someone or make @mention referred to someone.

Comments Page. Swipe Action - Complain Comment Preview 14:48

Making complain to certain comment that is written by someone, except you or written under your own post.

Designing Swipe Button - Delete Preview 07:35

Creating and designing icon for "delete comment" button. Customizing swipe action.

Designing Swipe Button - Complain Preview 06:41

Creating and designing icon for "complain" button. Customizing swipe action.

Designing Swipe Button - @address Preview 06:43

Creating and designing icon for "@address" button. Customizing swipe action.

TEXTVIEW

Hashtags and Mentions. Implementation Preview 09:55

Implementing #hashtags and @mentions in our app.

Hashtags and Mentions. Tap @mention Preview 05:14

Going to @mentioned user by tapping on @mention link exactly same as in Instagram.

Hashtags and Mentions. Sending #hashtags to server Preview 15:13

If we write certain text as comment or post description all #hashtags will be selected and sent to server.

Hashtags Page. Creating User Interface Preview 11:07

Creating user interface of #Hashtags Page, that will demonstrate posts with relevant #hashtags.

Hashtags Page. Coding User Interface Preview 02:57

Coding User Interface of #Hashtag Page.

Hashtags Page. Loading Posts Preview 14:10

Loading hashtagged posts in #Hashtags Page.

Hashtags Page. Showing Posts and Going Through Preview 06:20

Showing all posts that are relevant to #hashtag we went to. Coding to be able to go through selected hash-tagged post.

Post Page. More Button - Delete Post Preview 16:11

Coding delete function of post if post belongs to us.

Post Page. More Button - Complain Post Preview 09:53

Coding complain function of post if post doesn't belong to us.

HASHTAGS

Designing Back Button Preview 10:39

Creating and designing custom back button.

Designing Logout Button Preview 09:02

Creating and designing custom navigationBar button.

Went to Not Existing User Preview 04:55

If we went to not existing user @mentioned in comments. For example: @asdaufs812oijsda user will not be loaded. Implementing the right behavior of app.

NOT EXISTING USER LOGIC

Feed Page. Creating User Interface Preview 11:46

Creating and coding user interface in storyboard for Feed Page.

Feed Page. Loading Posts and Pagination Preview 17:54

Loading posts that belong to us and posts of users we are following. Implementing pagination function for Feed Page. More posts will be loaded while scrolling down.

Feed Page. Buttons Preview 09:14

Coding buttons: username, like, comments and more

Feed Page. Go to Feed Page after We made Post Preview 01:14

If we upload new post, we want to be transferred to Feed Page and see our latest post in feed as in Instagram.

Feed Page. Designing Preview 13:58

Creating custom tabBar button for Feed Page. Importing new designed button in project.

FRIENDS POST

Users Page. Creating User Interface Preview 09:38

Creating User Interface in storyboard for Users Page and importing search bar.

Users Page. Searching Users Preview 13:53

Writing code for search function. Coding to search users not only by username, but also by full-name.

Users Page. Showing Searched User Preview 10:53

Coding all tableView methods to see searched user.

Users Page. Designing Preview 08:50

Creating and designing custom tabBar button for Search Users exactly same as in Instagram. Importing designed button.

Users Page. Coding CollectionView methods Preview 17:43

Coding collectionView for showing all popular posts that belong to all app users.

Users Page. Showing Popular Posts Preview 16:17

Loading posts in collectionView, by the way keeping searching function via tableView. Working exactly same as in Instagram.

COLLECTION VIEW + TABLE VIEW

Notifications Page. Creating User Interface Preview 06:14

Creating user interface in storyboard for Notifications Page.

Notifications Page. Designing Preview 09:01

Creating and designing custom tabBar button for Notifications Page. Importing designed icon in project.

Notifications Page. Send Notifications if Commented or @mentioned. Preview 15:22

If user comments or @mentions someone in comment, user is sending notification to commented or @mentioned user about that.

Notifications Page. Send Notifications if Liked or Followed Preview 08:30

If user likes someone's post or follows someone, user is sending notification to owner of liked post or followed user about that.

Notifications Page. Constraints Programmatically Preview 07:26

Coding constraints programmatically to have best looking alignment.

Notifications Page. Receive Notifications Preview 13:41

Receiving notifications if someone liked our post, followed, commented or @mentioned us in comment.

Notifications Page. Going to Through Notifications Preview 11:58

By tapping relevant notifications, going through. For example: if we receive "like" notification, by tapping on it we will go to post liked by someone. If we receive "follow" notification, that someone started to follow us, by tapping on it we will go to Home Page of this user.

Notifications Page. Creating Instagram Notification Icons Preview 11:27

Designing exactly same icons as in Instagram for such notifications, as: like, follow, comment

Notifications Page. Creating Notification Design Objects Preview 09:50

If you noticed, in Instagram, when your receive notifications, at the bottom of Notifications Page Icon in tabBar, there is small orange dot, we will do the same.

Notifications Page. Showing Notification Icons Preview 17:36

If we receive new notifications, we will see icons at the bottom exactly same as in Instagram,

Notifications Page. Mark Notifications as Checked Preview 06:13

By going to Notifications Page we will programmatically mark all notifications as checked to avoid further icons appearance.

NOTIFICATIONS

Instagram Customize tabBar Upload Button Preview 10:02

Creating and Designing custom Instagram style "upload" button for our custom tabBar.

Create Rounded Buttons Preview 04:05

Creating rounded corners for buttons to let it look relevant to whole app design.

Notification Icons Animation Preview 02:05

According to last update of Instagram, there is minor update of animation, we gonna do same and be keeping in time.

ANIMATIONS

Final Project Preview 19:57

Let's see what we created. Our child :D My congratulations to all of you! Amazing! Awesome!

Source Code Preview 00:03

Source Code

Tab Bar Icons customization Preview 01:22

For those who want to use tabBar Items without title and want icons to be centered.

Custom Placeholder Programmatically for Comment TextView Preview 12:13

Creating programmatically custom placeholder label for comment TextView.

Next course: "Create Social App on CUSTOM BACKEND with Swift, PHP, MySQL, HTML" Preview 05:06

Next course will be your final destination