Build Tinder Clone Dating App With Laravel Livewire Mastery

• remove <livewire component> and add the    @include('livewire layout navigation')

• Add auth to relavant code in Navigation

• Add  @livewireStyles &      @livewireScripts   to welcome blade

• Download/copy Svg Logo  ( to be added in

• Add Links

• remove dropdowns

• Dowload tinder_hero_image

  Create assets folder in public and add the image

  Add Background image  to body for welcome.blade

• Change font in tailwind config to 'nunito'

• Add center hero

• Add main section with testimonials

Download png

Let visit Favicon-io website and go to favicon-converter/  and upload the png

Follow the instructions

• Copy link tags and add them to all layout files

• Unzip & copy downloaded files to public folder

• Update app name in env

NOTE! : Visit localhost on port 8000  in order to see favicon updated immediately

Add  @livewireStyles and @livewireScripts  to layouts app because auto inject will only work if  a layout has a livewire component present

Download avatar blade component

Create resusable Tailwindcss component called 'bg-tinder'

   @layer components {

    .bg-tinder {

      @apply bg-gradient-to-r  from-pink-500 via-red-500 to-rose-500;

    }

  }

Create home component

   php artisan make:livewire home

Add Full page component to routes

Publish livewire config and edit  layout  path

Go to app Layout :

• Add Slot to layouts app

• Hide Left side on small screen and show on big screen

• Also remove padding from <main>

Design simple home location not found

Change redirect after register to 'app' & remove dashboard route (RouteServiceProvider) Also dont forge to remove dashboard route in navigation

• Install hammer js

• import it in app js

  import 'hammerjs';

Create component

• php artisan make:livewire swiper. swiper

• Add swipe component to home

• Add x-data with initial properties

• Add Swipe indicator buttons  for LIKE or NOPE

• Add information section down

• Add profile information

• Get icons from heroicons

• Add Actions buttons

Add    x-init=""

Initialize hammertime and listen to 'pan'  event

• Listen to  on 'pan' event

• Add more items

• Remove background

Add swipeRight(), & swipeLeft(), and swipeUp() functions in x-data

Also listen to events fired

• Remove the backgroud image & add the image as seperate with inset

• Add image slides in in php directive as array []

• Add x-data and add image slides

• Add draggable=true to all buttons to prevent them from triggering 'pan'  on parent

• Add  draggable=true to actions in footer section

• Add draggeble=true to View profile icon

• Add white solid background to  to inner element - this is to avoid content onverlap when swipe cards are loading  :note remove unnecessary  div

• Add fake name and fake bio to swipe card

• Create profile section

• Create x-data and add bool: profile as property

• Copy Carousel component from swiper

• Create Close profile button and add @click="profile=false"

• Also add  @click="profile=true" to swipe card

• ADD draggable=true in PROFILE SECTION in order to prevent it from triggering 'pan' on parent

• Add profile information section

  1. Languages

  2. Basics

  3. Lifestyle

  4. Passions

Add Actions section Note: copy from swiper card ( SwipeLeft ,superLike & SwipeRight)

• Add  Fields

• !Don't forget to make the fields nullable

• relationship_goal as string

  -create  Enum class

  -cast enum to user model

• Remove  protected $fillable = []; In UserModel

• Add protected $guarded = [];

• Update user factory

• Add UserFactory to  to Database Seeder

• run command

  php artisan migrate:fresh --seed

• Lastly Check Database

• run command -> php artisan make:model Basic -mfs

• Fill in basics  table  ( name and group)

• Create BasicGroupEnum , (add a few enum values)

• Why Enum class is better than hard coded enums in table

  -More flexible

  -Make it  easy to add/remove enums values

• Go to BasicSeeder seed values 

• Update DatabseSeeder  Make sure the BasicSeeder comes first

  Add

      $this->call([

              BasicSeeder::class,

           ]);

• run  php artisan migrate:fresh --seed

• Check database

  
  

//Pivot table

• Run php artisan make:model BasicUser -mfs

• Note! change table name to singular as in basic_user not basic_users

• Dont forget to also update the name in the down() function

• Add protected $guarded=[]; to Model

• Fill table

• Add relationships  to Users and Basic Models

• Add  function boot() in User model

• Run  php artisan migrate:fresh --seed

• Check database

Another swing at belongs to many relationships

• run command -> php artisan make:model Language -mfs

• Add field to table

• Add protected Fillable to Language Model

• Fill LanguageSeeder

• Add LanguageSeeder to DatabaseSeeder

• run php artisan migrate:fresh --seed

• Check database

run  php artisan make:model LanguageUser -mfs

• Note! change table name to singular as in language_user not language_users

• Dont forget to also update the name in the down() function

• Fill table

• Add protected $guarded=[]; to Model

• Add relationships  to Users and Language Models

• Utilize the ->afterCreating callback in the UserFactory

• run  php artisan migrate:fresh --seed

Check database

• Retrieve and pass users to render method in Swiper Component

• Loop through $users in blade

  - use  @foreach ($users as $i => $user)

  -  !Dont forget the put the loop key as $i

• Update SwipeCard Personal details

  - name , age , bio etc

• Update Profile Card Personal Information

  - Add: name, age , bio , height etc

  - Show relationship goals  ( add capitalize :css class )

  - Show languages ( add capitalize :css class )

  - Show Basics

run php artisan make:model Swipe -mfs

Add fields

• user_id

• swiped_user_id

• type : left, right, up(super like)

Create relationship in:

• Swipe Model ( Add guarded,  and methods)

• User Model 

  -Add swipes() , hasSwiped(), and scopeWhereNotSwiped()

• Firstly  when retrieving users from database make sure the auth user is not retrieved

• Create swipedRight function() in Swiper component

  - Add Listener

  - make sure user is authenticated

  -add app:route to auth middleware

• Pass the ID in the Swiper component when dispatching event

  - Pass Id to all dispatched events In x-init

  - Pass ID to the Event fire in x-data's functions

• Add ->whereNotSwiped() Scope in render() to prevent users already swiped from showing up

  
  

• Create  protected function createSwipe()

    - Check if user has already swiped

    - Create Swipe record

• Create Other Swipe records for

  - Swipe Left

  - Swipe Up

• Lastly! Add    wire:key="swipe-{{$user->id}}" in loop to avoid DOM Diff issue

• run php artisan make:model SwipeMatch -mfs  (The name "Match" is reserved by PHP. )

• Add fields

    -Swipe_id_1

    -Swipe_id_2

  -Make fields unique

• Create Relationships and Methods  in:

  -SwipeMatch Model

  - User Model

  -Swipe Model

• 
  

  
  

In Swiper Component

• Check if there is a matching swipe

• If true then create SwipeMatch

Refresh the database

  - Note! remove  all users from Database Seeder & create users manually 

  - Login with two users in try to create a Match

• Get modal from Pines alpins js

• Create design

  -Add Header

  - Show matches

  - Add Actions

• Edit Close button

• Create Tabs component

  run php artisan make:livewire components. tabs

  Add tabs component to layouts app (Move contents of tab section to tabs component)

• Fetch Matches  in render()

• Loop matches in tabs Blade

• Identify user and add name

• Show matches count

• Listen to match-found event in order to refresh component

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

Add relationship to Swipe Match model

Migrate Database

• Create public variable $swipeMatchId

• make $swipedUserId as public & assign $this->swipedUserId

• assign $this->swipeMatchId after dispatch event

• Add createConversation()  and add trigger button

• Also add      $this->dispatch('close-match-model'); & listen to it in blade

• Add reset properties after creating cConversation and in createSwipe() method

• In tabs create a method  createConversation(SwipeMatch $match)

• identify receiver

• Trigger method from blade