Build Tinder Clone Dating App With Laravel Livewire Mastery

Create new Folder on desktop fo Tinder clone

Goto Laravel website and install via composer

Launch Code editor and  open the project folder

Start Php and Npm server

We'll start by installing laravel

This step will install

Latest Livewire (Bundled with Alpine.js)

Set up Authentication pages and routes for getting started

• 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

• Create chat index  - php artisan make:livewire chat. index

• Add route to web routes

• Create a chat layout  and make left side always visible and main element hidden on md:screens

• add home to chat layout

• In Tabs , make tab index to 2 if route it chat

• Update layout in ChatIndex component

Pass $conversations to tab blade file

Loop through conversations

Show name and latest message

Create conversations() relationship in User Model

Create Chat Component - php artisan make:livewire chat. chat

Add component to routes

Use app layout

In tabs

• Add redirect in chat list when conversation is clicked ( also add wire navigate)

• Also Make default tab to messages when route is ('chat')

Design layout chat structure

Get Icons from boostra icons

Add redirect to chat index when arrow is clicked

Add redirect to home when i icon is clicked

Add $belongsToAuth vairable

Add avatar and body

Loop through users

Copy profile section fro swipe cards

Remove:

• Action button at the bottom

•   Close profile button

• x-show profile and attributes

• classes: absolute, rounded-xl & border

  
  

Add random $user variable to $php

• Define public variables

• In Mount()

  - Set  $receiver

  - Set $conversation 

  - make sure user is authenticated

  - Check if user belongs to conversation

• Set  $receiver name  in header

• In profile section replace $user with receiver (Also remove $user from @php)

• Highlight selected conversation In tabs.blade (request()->chat== $conversation->id)

• Update swipe factory

• Update database seeder
  -create test user

  - Add  positive swiped for that user

• Add redirect to conversation

  -After conversation is created in Swiper  Component (Navigate true)

  -After conversation is createdOrUpdated in Tabs  Component

• Create public $body in Chat Component

• Add   @submit. prevent="$wire. sendMessage()" to Form  (Remove defer is previously added)

• Create sendMessage method ()

• check user is authenticated

• create message and reset body property

• Send message and check database

• Create properties

      public $loadedMessages;

      public $paginate_var= 10;

• Create Method to loadMessages()

• Add the method in mount()

• Loop through messages in blade

    -Remove previous @for

    - Set $belongsToAuth=  $message->sender_id==auth()->id();

    - Set $message->body

    - Reduce the Gap between messages

• Push the $createdMessage to $this->loadedMessages to provide realtime update

• Dispatch event 'new-message-created' to  Tabs - inorder to refresh component

• listen to  dispatched event in Tabs component

• Lastly order conversations by  ->latest('updated_at') in render() method in Tabs component

• create $selectedConversationId

• add       $this->selectedConversationId=  request()->chat; in mount()

• replace the  request()->chat in blade with  $selectedConversationId

• Add to x-data  ( in root element )

  -conversationElement

  - height

• Listing to @scroll-bottom. window=""  ( in root element )

• add id="conversation " to body section

• Dispatch event in sendMessage() method after reset body

•   Scroll Conversation to bottom on page load in x-init

•   in the event hide scrollbar when scrolling down

• Create loadMore() method

    -increment paginate_var

    - call the loadMessages() method

    - dispatch update height event

  
  

• listen to @scroll event on conversation element

    -  Check scroll top in console

    - Fix the !body . time js error , this is caused because trim does not accept null value

    - add body?. trim()?  instead

    - call loadmore if scrolled to top

• listen to update event and update height accordingly to avoid displacement in blade

  
  

• Firstly when scrolling there is little flickering of messages , add wire:ignore to loop element and reduce flickering 

• In Chat component

    - mark messages belonging to receiver as read

• In tabs.blade create a $lastMessage variable and change style according to message read state

  - use @class([ ])

• Dont forget to user null safe operator '?'

• Add  arrow-uturn-left in chatlist to show that message belong to auth

• Lastly if sidebar (tabs ) not scrollable add

  - 'h-full' to root element &  main element in tabs

Create unReadMessagesCount() method in user model

Add it to Tabs In Messages Section

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

1. Create new notification

   • php artisan make:notification MessageSentNotification

2. Implemement ShouldBroadcastNow

3. Pass parameters to constructor

4. Add Via ['broadcast']

5. Add toArray() variables

Open pusher website and check debug console

Broadcast message in after creating new message in Chat component

Change broadcast Channel in User Model & add channel to channels. php

in the chat. blade add:

    x-init

   Echo. private(). notification()

  call method : $wire listenBroadcastedMessage(notification);

Create new  listenBroadcastedMessage() method in Chat component

Test between two users

In Tabs Add

- x-init=""

- copy the echo instance code from chat , and check only message type

- inside the if statement call the  $wire $refresh()

-test between two users

Finally update match text to add a transparent background in order  to make text standout