Mastering Laravel: Build Instagram Clone with Livewire

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