Mastering Laravel: Build Instagram Clone With Livewire

Build an Instagram Clone with Laravel, Livewire, Alpine.js, and Tailwind CSS – Elevate Your Coding skills

What you'll learn

Mastering Modern Web Technologies: Dive into Laravel, Livewire, Alpinejs, and Tailwind CSS. Seamlessly integrate these for dynamic Single Page Applications (SPA

Building a Powerful Instagram Clone: Code an Instagram clone, covering Stories, Follow/Unfollow, Likes, Swipe, Commenting, Saving, and real-time updates.

Enhanced User Interaction: Elevate UX with search, hover effects, and engagement on Explore, Reel Pages, real-time messages, and notifications.

Creating Multimedia Posts with Considerations: Create multimedia posts, mastering file size optimization for both vidoes and Pictures.

Requirements

To fully benefit from this course, it's recommended that students have a basic understanding of Laravel framework, Tailwind CSS, PHP, HTML, and CSS. While not mandatory, a foundational knowledge of these technologies will help you grasp the concepts more efficiently and enhance your learning experience. If you're a beginner, don't worry—we'll provide clear explanations and hands-on examples to help you bridge any gaps in your knowledge. This course is designed to cater to a range of skill levels, so whether you're familiar with these technologies or just starting, you'll find valuable insights and practical guidance to advance your web development skills

Description

Embark on an exciting coding journey with our immersive course as we unravel the magic of web development together. Picture this: we'll be diving deep into the key features on the Home Page – from the seamless Swipe and Like functionalities to the engaging Stories and the dynamics of Follow/Unfollow. Get ready to immerse yourself in user interaction as we explore Commenting, Saving posts, and effortlessly scrolling through the Home Feed.But wait, there's more! We'll navigate the vast possibilities of Search Functionality, making it easy to connect with users by finding, exploring profiles, and initiating follows. Brace yourself as we step into the Explore Page, unveiling Hover Functionality and diving into interactive engagement with posts and comments.Hold on tight as we experience the dynamic Reel Page – play, like, save, and take a smooth ride through captivating reels. We won't stop there; we'll delve into real-time user interaction with Messages and Notifications, creating an immersive social experience that goes beyond the ordinary.And guess what? That's just the beginning of our adventure! Learn to craft stunning posts, incorporating Mixed media posts while considering file size. Explore your profile with tabs for a comprehensive overview of your digital presence.This is more than a course; it's a personalized journey into the heart of web development, where we don't just learn – we actively build and refine our skills together

Overview

Section 1: Introduction

Lecture 1 Install Laravel

Lecture 2 Install Breeze Auth Package

Lecture 3 Install Livewire

Lecture 4 Install Daisy UI

Lecture 5 Download Sidebar & Avatar & Logo

Lecture 6 Repository

Section 2: Home

Lecture 7 Install Home Component/page

Lecture 8 Design story section

Lecture 9 Design Suggestion section

Lecture 10 Design mobile header

Section 3: Post Item Component

Lecture 11 Make post component

Lecture 12 Create Video Player

Lecture 13 Footer section

Lecture 14 Add swiper js to media section

Section 4: Create Post & Media Models

Lecture 15 Create Post model

Lecture 16 Create Media Model

Section 5: Adding posts to home

Lecture 17 Adding posts to home

Section 6: Create New Post

Lecture 18 Make Create post component

Lecture 19 Design layout and left side

Lecture 20 Design details side

Lecture 21 Add properties and methods

Lecture 22 Save Post / Reel to Database

Section 7: Post view Components

Lecture 23 Create Post view modal component

Lecture 24 Create view item

Lecture 25 Details

Section 8: Create Comments Polymorphic Model

Lecture 26 Create Comment model with -mfs

Lecture 27 Fill up Comment Factory

Section 9: Get Posts on demand

Lecture 28 Load more posts on scroll

Section 10: Load comments in post view

Lecture 29 Design comments layout

Lecture 30 Display comments from database

Lecture 31 Get Replies and Decendants

Lecture 32 Add Comment To Post

Lecture 33 Add Reply to comment

Lecture 34 Add instant comments to Post Item

Lecture 35 Disable commenting

Section 11: Add Like Posts

Lecture 36 Install like package

Lecture 37 Add Like to post

Lecture 38 Hide & Show like count

Section 12: Add Likes to Comments

Lecture 39 Add like to comment

Section 13: Add Bookmarks/Favorites

Lecture 40 Install Favorites Package

Lecture 41 Toggle Favorites

Section 14: Add Follow system

Lecture 42 Install follow package

Lecture 43 Toggle Follow Users

Section 15: User Profile

Lecture 44 Add username to Users

Lecture 45 Create profile component

Lecture 46 Download profile-layout

Lecture 47 Display User's Posts

Lecture 48 Display Reels & Saved Posts

Section 16: Explore page

Lecture 49 Create Explore Page

Lecture 50 Show Explore Posts

Lecture 51 Customize the video component

Section 17: Reels page

Lecture 52 Create Reels Component

Lecture 53 Show Posts Reels

Section 18: Search

Lecture 54 Create Livewire Sidebar

Lecture 55 Add Search Functionality

Section 19: Add Broadcasting

Lecture 56 Introduction to Broadcasting

Lecture 57 Install pusher and Laravel Echo

Lecture 58 Create pusher account

Section 20: Notifications

Lecture 59 Create notification component

Lecture 60 Design notifications

Lecture 61 Create NewFollowerNotification

Lecture 62 Create PostLikedNotification

Lecture 63 Create NewCommentNotification

Lecture 64 Prevent Self Notifications

Lecture 65 Show NewFollower Notifications

Lecture 66 Show PostLiked Notifications

Lecture 67 Show NewComment Notifications

Lecture 68 Listen to Notifications

Section 21: Chat Database Architecture

Lecture 69 Create Models

Section 22: Design/Download Chat Components

Lecture 70 Create Chat Index

Lecture 71 Create Chat list

Lecture 72 Create Chat Main

Lecture 73 Create Chat Component

Section 23: Make Chat System Dynamic

Lecture 74 Create Conversation

Lecture 75 View Auth Conversations

Lecture 76 Select & Load Conversation

Lecture 77 Send New Messages

Lecture 78 Display New Messages

Lecture 79 Live Update New Messages

Lecture 80 Scroll Chat to Bottom

Lecture 81 LoadMore Messages

Lecture 82 Mark Messages As read

Lecture 83 Broadcast New Message

Lecture 84 Listen to Broadcasted Message

This course is intended for a diverse audience of aspiring and intermediate-level web developers seeking to advance their skills in modern web development. Whether you're a coding enthusiast looking to build on your existing knowledge or a professional seeking to expand your skill set, this course is designed for you. If you have a basic understanding of Laravel framework, Tailwind CSS, PHP, HTML, and CSS, you'll find the content particularly valuable. Entrepreneurs or individuals aiming to create dynamic, feature-rich web applications, especially those interested in building social media platforms or similar interactive websites, will benefit significantly from this course. The hands-on approach, coupled with practical examples in building an Instagram clone, ensures that learners not only grasp the concepts but also gain the confidence to implement them in real-world projects.