Mastering Laravel: Build Instagram Clone with Livewire

Install Breeze

Add env credentials

Migrate database

npm run dev

Create user

Change the redirect link in RouteServiceProvider

Install Livewire

Publish livewire config and update   'layout' => 'layouts.app',

Install livewire hot reload from https://christoph-rumpel.com/2022/7/auto-refresh-livewire-components-while-keeping-states-with-vite

Install Daisy UI via NPM

require Daisy Ui in tailwind config,

add themes to light

Go to Daisy ui and get Layout Drawer code

Update layout in 'layouts.app'

Add x-cloak to style

We do this to save time from searching for special icons on various websites and repeating same process

Download Avatar , paste it in components folder

Download logo,Create public folder assets and paste logo

Download Sidebar , paste it in layouts folder

php artisan make:livewire home

Create auth route group and add '/' url , remove default '/' url

Install scrollbar hide package

https://github.com/reslear/tailwind-scrollbar-hide

Create post item

Add post item to home

Create Header

• design header  with avatar and dots on the right

Video

• Create custom x-video component

• Add props source

• add x-video to item component

  
  

Add icons

Add content

add form

1. Install swiper.js via npm

2. Copy swiper  template 

3. Initialise swiper.js in alpine x-init

run the command php artisan make:model Post -mfs

Add fields to table

Add casts and properties and relationships to Model class

Add posts relationship to User model

Add factory 

use this link for testing videos 'https://gist.github.com/jsturgis/3b19447b304616f18657'

run the command php artisan make:model Post -mfs

Add fields to table

Add casts and properties and relationships to Model class

Add factory

• get public test vidoes -(search query) public test videos Github

• get photos urls from unsplash

refresh database and seed

query posts in mount method

loop through posts in blade take a few in the beginning

pass post model to item component 

add dynamic relevant fields

Only swiper  nivigation if post->media count is greater that 1

Install Wire modals package

Make component : php artisan make:livewire post.create

Add button to open create post component in drawer(sidebar)

Add Safelist to Tailwind config.js

Add purge to Tailwind config.js

Add modalMaxWidth() method

Design Header and let side

Download testing vidoes from https://pixabay.com/videos/

Download testing pictures from https://unsplash.com/

Add properties to component

Create submit method and add dd()

Add disabled attr to submit button

add wire models to inputs

submit and test dd()

Add preview to media Dont forget to replace hidden  with flex  class

Add .mp4 to accepted files in input

add default as false for the following

      public $hide_like_view=false;

      public $allow_commenting=false;

Add validation for media

Add Temporary url  validation in Livewire config Note: validating temp file in component will not work

If neccessary edit the php.ini file to increate the max_uplodad_size

when saving the file to disk

• make sure disk is public

• !!!!! run command php artisan storage:link to access the file from /storage/media/...

After creating post , go and change order type in home to latest()->get(); in order to view post

1. Create inline modal component php artisan make:livewire post.view.modal --inline

2. Extend modal component

3. Add properties  and methods

4. get url and push state

5. Add closeModal listener in home component

6. Publish wire-elements views php artisan vendor:publish --tag=wire-elements-modal-views

7. Add custom  onclick="Livewire.dispatch('closeModal')" To overlay this will also dispatch closeModal so we can listin in home component

php artisan make:livewire post.view.item

add  <livewire:post.view.item :post="$this->post" /> to modal

Create item view layout ,

Use css snap scroll , and show files

Copy header from post item

copy footer from post item  -add (mt-auto)

1. run  php artisan make:model Comment -mfs

2. Add fields to table

3. Add methods/relationship to Comment model

4. Add relationships to Post model

5. run  php artisan migrate

6. 
   

Comments

1. Add fields to comments factory

2. Add ->hasComments(rand(20,50))  to post factory  in DatabaseSeeder

3. refresh database and seed  (!!!!important add prepend time() to users email in UserSeeder to avoid duplicate entry errors )

4. Go to home filter by ->whereHas('comments') to see post with comments and dd($posts->first())

5. In the post >item add $post->comments->count()

6. revert the changed in home and add ->with('comments')

  Replies

1. add state function called isReply() to CommentFactory to create comments as replies

2. add the factory to the Database seeder

3. refresh database

4. View the replies in home by dd()

   
   

Remove $posts as public variable

Add required vairables

add scroll detection event

load posts as $perPage in render()

remove the take(50) from blade loop component

Design comments

Add $post->user->name just for testing

Load comments in render();

Replace $post->user->name with $comment->user->name

In the home make sure you add ->latest(); in order to see posts with comments

Add replies

1. Create partials folder   post.view.partials

2. Create comment.bladel.php file in partials folder

3. Create reply.blade.php file  in  partials folder (add subreplies to reply.blade.php)

4. Add ->whereDoesntHave('parent') in View.Item Livewire componentn

5. Update code in DatabaseSeeder in order to test sub replies

1. Create addComment method

2. Create $body property , change inputText to body

3. In the form submit button add type="submit"

4. Add    @submit.prevent="$wire.addComment()"  in the Form . test it !! with dd()

5. Add entangled $body and $parent_id

6. Submit Form and create comment

7. Add wire:key="{{time()}}" to Form

   
   

Remove space between @ and username

Add wire:click="setParent({{$reply->id}})" to reply button in sub comment

add setParent method and inject Comment model

Add  wire:click="setParent({{$comment->id}})" to comment reply button

remove the {{'@'.$reply->parent->user->name}} from reply body

Add body property

Copy addComment() method from post.view.item to post.item component

remove parent_id

rename inputText to body in post.item <form>

make body entangled

add type submit to Button in <form>

add wire:key="{{time()}}" to <form>

Show user's comments on Post Item

Only how <form>, <trigger button> and auth comments if commenting_is_allowed in POST.ITEM

Also hide all comments and <form> in POST.VIEW.ITEM

Change button title to "Allow Commenting"  in  Create Item component

Add Overtrue package

Quick review of package

publish migrations

Add Traits to:

1. Comment (Likeable)

2. Post(Likeable)

3. User (Liker)

Migrate table

create togglePostLike() method in post item

add filled heart if post is liked or not

add wire:ignore  to avatar and swiper parent

Show  likesCount() to post

Dont forget to also check if post allows to show number of likes

Do the same for post view item

1. Add   function toggleCommentLike() to view and item component

2. Add like functionality in blade file (copy from post like)

3. Add functionality to partials.comment

4. Add functionality to partials.reply

Dont forget to change

•   $comment->isLikedBy() to $reply->isLikedBy()

• toggleCommentLike({{$comment->id}}) to toggleCommentLike({{$reply->id}})

1. Add like count & wire:keys in comments and reply

2. Add wire ignore to comment avatars

1. Install Favorite package from overtrue

2. Publish migrations and configuration

3. Add  Traits:

• Favoriter (User)

• Favoriteable(Post)

Migrate table

Add toggleFavorite() method in Post.Item

In blade add @if(   $post->hasBeenFavoritedBy(auth()->user())   )

1. Install Follow package from overtrue

2. Publish migrations and configuration

3. Add  Traits:

• Follower (User)

• Followable(User)

Migrate table

1. Pass suggestedUsers to Home component

2. Loop  suggestedUsers in home component

3. Add users name

4. create toggleFavorites() in Home Livewire Component

5. Add wire:click="toggleFollow({{$user->id}})"

6. Add wire:ignore to all avatars in home

Add username to users table

Add username to fillable to User model

Add username to UserFactory    'username' => time().fake()->unique()->userName(),

Add username to auth/register.blade.php

Add usernae to RegisteredUserController

php artisan migrate:fresh --seed

1. run php artisan make:livewire profile.home

2. Add profile.home to routes

3. Prefix the profile route with /profile/{user}

4.         Route::get('/profile/{user}',ProfileHome::class)->name('profile.home');

5. Add profile link in sidebar link in sidebar

6.      href="{{route('profile.home',auth()->user()->username)}}"

7. Add Image to profile

8. Add <x-profile-layout/> to profile.home

  1.  Add <x-profile-layout/> to profile.home

• Pass $user to blade as paramater

• Receive $user in @props(['user'])

1. Make <x-profile-layout/>  dynamic

   • Get user postCount

   • user FollowersCount

   • user FollowingCount

   • Check if user is following or is being followed(Wrap in auth())

     • Check if auth owns profile , then show different actions

   • Add toggleFollow

   • Laslty go to home and add redirect links to users profile

1. Pass $posts to profile.home blade

2. Create grid style

3. Listen to closseModal dipached event

4. loop through posts

5. Check mime

6. Add click event to show post with comments(copy from post.item)

Run commands

php artisan livewire:copy profile.home profile.reels

php artisan livewire:copy profile.home profile.saved

Adjust the correct queries for each of the copied files

Highlight Selected Tab

Create component explore

Add route
      Route::get('/explore',Explore::class)->name('explore');

Add redirect in sidebar (Add wire:navigate)

Show  highlighted indicator in sidebar for :

•   Explore (Add wire:navigate)

•   Home (Add wire:navigate)

•   Profile (Add wire:navigate)

  
  

1. Copy show layout from profile.home

2. Pass posts in explore component

3. Customize the <ul> class

4. Show Hover options ( comments count& likes count )

5. Show  corresponding top right icon

6. 
   

7. For copy icons goto https://iconduck.com/search?query=copy+rounded

8. Listing to closeModal Dispatched Event

Add props for controls

• Hide controls if controls is false

Add props for cover

1. Create component

      php artisan make:livewire reels

2. Add route

3. Add link in sidebar( Add wire:navigate)

4. Highlihgt sidebar

5. get posts in render()

6. Add #[On('closeModal')]

Loop posts in Blade

Design reel element file

For Icon actions ( copy from post.item)

Pass Models to wire:clicks i.e toggleLike({{$post->id}})

Add Action methods  ( copy from post.item)

1. Make sidebar as livewire component

      php artisan make:livewire components.sidebar

2. Add new sidebar to layouts.app

3. Move contents to new sidebar

4.   x-transition.origin.left to drawer

5. remove <template x-teleport="body">

1. Change background to white , add padding

2. Add shadow

3. Add input and title

4. Add wire:model

5. Add search method

6. Add search results

7. Add class 'overflow-visible z-10' to element with class='drawer-side'  (layouts.app)

8. Make $shrink and $drawer entangled

9. Add showSearch and showNotifictions

1. Go to Broadcasting in laravel documentation

2. install pusher server via composer require pusher/pusher-php-server

3. For the keys we need to create pusher account

4. Install Laravel echo  npm install --save-dev laravel-echo pusher-js

5. uncomment the Echo instancd in bootstrap.js

6. Finally in the config/app.php

   •      uncomment the line for      AppProvidersBroadcastServiceProvider::class,

Create pusher  account or login

Create new instagram app in pusher

Copy keys and credentials to .ENV file

!Dont forget to also copy the cluster

Test connection is established in the debug console in pusher.com

Create component

Add it to Side bar as nested  livewire component

Add button to open notfication component

1. Create new notification  php artisan make:notification NewFollowerNotification

2. Pass user model as parameter

3. add via 'broadcast ' & 'database'

4. Add implements ShouldBroadcastNow

5. install database notifications (Go to Laravel broadcasting database notifications)

6. Go to home & profile.home Add broadcast new follower after toggle follower

7. Show notifications in database

8. Show broadcasted notification in debug console

1. Create new notification  php artisan make:notification PostLikedNotification

2. Pass User $user model & Post $post as parameter

3. add via 'broadcast ' & 'database'

4. Add implements ShouldBroadcastNow

5. Go to post item and notify user after togglePost()

Fix Type in newFollowerNotification!

In Post Item

Loop through user->notifications ( Also refer to docs in Laravel)

User switch for case copy notification types from database

Get user in @php @endphp

Add routes to links

Show date

Add toggleFollow() Copy from home component

Show post liked notifications

Create Post Page component

• php artisan make:livewire post.view.page --inline

• Add contents to page

• Add to route to web

• Add values to notifications

• Add $user and comment in @php @endphp  in NewCommentNotification

• Use $comment->commentable to access the post  on NewCommentNotification

• Show post cover for NewCommentNotification and PostLikedNotification

Open debug console in pusher.com

Add  'receivesBroadcastNotificationsOn()' in User model

add new 'users' channel

Listen to echo notification in blade

Create

• Conversation php artisan make:model Conversation -m

• Message php artisan make:model Message  -m

Fill up Conversation Migration & Model

Fill up Message Model and Migration

Migrate Database

Create chat index  php artisan make:livewire chat.index

Occasionally refresh Vite component manually in order to update css

Add route to web

Add redirect (with wire:navigate) in Sidebar ( also Add Highlighed icon)

Add x-init in sidebar to make shrink to true

Try to make icons larger w-7 h-7

Create chat list component  php artisan make:livewire chat.chat-list

Download chat-list.blade from resources

Add chat list component to Index

• Create chat main php artisan make:livewire chat.main --inline

• Add route in web.routes

• Copy render method from ChatIndex ,! make left side hidden on small screens and show right side

• Occasionally Vite component manually in order to update css

• Add redirect (with wire:navigate) in Chatlist  in Chat List Item

• Update Sidebar component with  to check if request()->routeIs('chat')||request()->routeIs('chat.main') in x-init & icon hightlist

Create chat component php artisan make:livewire chat.chat

Add chat component to Main

Download Chat component