Build Tinder Clone Dating App With Laravel Livewire Mastery

Focused View

Namu Makwembo

6:44:10

28 View

1. Introduction

1. Introduction.mp4

02:41

2. Install Laravel.mp4

02:43

3. Install Breeze Auth with Livewire (Volt Class API) with Alpine.mp4

03:27

2. Design Homepage

1.1 navigation.blade.zip

1.2 tinder hero image.zip

1.3 tinder.zip

1.4 welcome.blade.zip

1. Design Navigation Blade.mp4

08:52

2.1 tinder hero image.zip

2.2 welcome.blade.zip

2. Design Welcome Page.mp4

11:01

3.1 pngwing.com (2).zip

3. Create Favicon.mp4

03:21

3. App layout

1.1 app.blade.zip

1.2 avatar.blade.zip

1.3 Github repository.html

1. Design app layout.mp4

15:03

2.1 app.blade.zip

2. Design Matches Tab.mp4

05:18

3.1 app.blade.zip

3. Design messages tab.mp4

07:27

4. Home component

1.1 app.blade.zip

1.2 home.blade.zip

1.3 web.zip

1. Create home component.mp4

06:21

5. Swiper component

1. Install Hammer js for interactive touch gestures.mp4

02:40

2.1 swiper.blade.zip

2. Create Swiper Component.mp4

11:11

3.1 swiper.blade.zip

3. Add Profile Information & Actions to Swiper Component.mp4

13:41

4.1 swiper.blade.zip

4. Add hammer.js pan event.mp4

13:14

5.1 swiper.blade.zip

5. Add hammer.js panend Event.mp4

17:23

6.1 swiper.blade.zip

6. Add swipeRight, & swipeLeft, and Swipe up functions();.mp4

09:00

7.1 swiper.blade.zip

7. Add Image Carousel to Swipe Card.mp4

15:09

8.1 swiper.blade.zip

8. Create Profile Card.mp4

16:17

9. Add Swipe Actions to Profile Card.mp4

03:23

6. Update Profile information

1.1 2014 10 12 000000 create users table.zip

1.2 relationshipgoalsenum.zip

1.3 user.zip

1.4 userfactory.zip

1. Update User Model and migration.mp4

11:53

2.1 2024 01 30 095812 create basics table.zip

2.2 basic.zip

2.3 basicgroupenum.zip

2.4 basicseeder.zip

2.5 databaseseeder.zip

2. Create Basics Model.mp4

07:39

3.1 2024 01 30 104544 create basic users table.zip

3.2 basic.zip

3.3 user.zip

3. Create BasicUser model and Seed (pivot).mp4

06:05

4.1 2024 02 03 043452 create languages table.zip

4.2 databaseseeder.zip

4.3 language.zip

4.4 languageseeder.zip

4. Create Languages Model.mp4

02:41

5.1 2024 02 03 044726 create language users table.zip

5.2 language.zip

5.3 languageuser.zip

5.4 user.zip

5.5 userfactory.zip

5. Create LanguageUser Model and seed (Pivot).mp4

06:00

7. Show Real Users in Swipe Card

1.1 swiper.blade.zip

1.2 swiper.zip

1. Loop Users from database.mp4

10:22

8. Create Swipe and Match Models

1.1 2024 02 03 080924 create swipes table.zip

1.2 swipe.zip

1.3 user.zip

1. Create Swipe Model.mp4

08:03

2.1 swiper.blade.zip

2.2 swiper.zip

2. Save Swipes.mp4

12:22

3.1 2024 02 03 093205 create swipe matches table.zip

3.2 swipe.zip

3.3 swipematch.zip

3. Create Match model.mp4

06:00

4. Save New Match Between Users.mp4

05:41

5. Show match Found Alert.mp4

10:04

9. Load All User Matches

1. Create Tabs Component & load Matches.mp4

06:40

10. Design Database architecture

1. Create Conversation and Message model.mp4

07:25

2. Create New Conversation When Match Found.mp4

05:35

3. Create New Conversation When Match Is Clicked.mp4

06:05

11. Design Chat Components

1. Create Chat Index.mp4

03:48

2. Load User Conversations.mp4

03:44

3. Create Chat component.mp4

05:59

4. Design Chat Header.mp4

04:04

5. Design Chat Body.mp4

06:30

6. Design Chat footer.mp4

04:32

7. Design User Profile section.mp4

03:16

12. Make Chat System Dynamic

1. Fetch User & Load Selected Conversation.mp4

05:32

2. Create Test User and Swipe Factory.mp4

07:11

3. Send new message.mp4

03:43

4. Load all messages.mp4

08:30

5. Fix selected chat highlight issue on new-message-event is fired.mp4

02:45

6. Scroll Chat to bottom on new message and on load.mp4

05:44

7. Load more messages.mp4

07:02

8. Mark Message as read.mp4

10:58

9. Show unread messages count in tabs and read status in chat.mp4

03:42

13. Introduction to Broadcasting & Web Sockets

1. What is Broadcasting.mp4

04:31

2. Install Laravel Echo.mp4

04:16

3. Create Pusher Account.mp4

04:03

14. Broadcasting Realtime Message To Matches

1. Create MessageSentNotification & Broadcast message.mp4

04:49

2. Listen to MessageSentNotification.mp4

10:26

3. Refresh Chatlist (Tabs) on MessageSentNotification broadcast.mp4

02:50

15. Add Unmatch Feature

1. Create Unmtach trigger button.mp4

05:28

Description

Master Laravel and Livewire: Design a Dynamic Dating App with Real-Time Chat and Advanced Swipe Features

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
Effortless Swiping: Implement Tinder-style left/right swipe functionality using Alpine js
Tailwind CSS Proficiency: Learn the ins and outs of Tailwind CSS to style your app with elegance and efficiency.
Real-Time Chat: Design a complete chat system for instant communication with matches without page reload
Advanced Livewire: Master Livewire to create interactive components that enhance user experience.
Personalized Notifications: Learn how to send/ Implement alerts for new matches
Websockets for Instant Messaging: Learn to use websockets and Laravel Echo for seamless, real-time messaging.
Introducing the Rewind feature: Easily backtrack on swipes and revisit previously passed users with seamless navigation.
Learn how to create and install Favicons for you laravel application

Who is this for?

This course is intended for a diverse audience of aspiring and intermediate-level web developers seeking to advance their skills in modern web development. The hands-on approach, coupled with practical examples in building an Tinder clone, ensures that learners not only grasp the concepts but also gain the confidence to implement them in real-world projects.

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.

What You Need to Know?

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

A working Laptop or desktop with good internet connection

Composer ,PHP & Nodejs must be installed on your laptop

More details

Description
Welcome to the ultimate journey in web development: "Build Tinder Clone Dating App with Laravel Livewire Mastery." Are you ready to dive into the captivating world of modern web technologies and unleash your creativity? In this comprehensive course, we'll guide you through every step of crafting a stunning Tinder-like dating app using Laravel and Livewire.

Embark on a hands-on adventure where we'll begin by designing a landing page that mirrors the sleek appearance of Tinder. From there, we'll delve into installing favicons and crafting dynamic user experiences with Tailwind CSS. You'll master real-time communication features and minimalist design principles, creating an app that stands out in the crowded dating market.

We'll push the boundaries with advanced techniques like integrating websockets for a seamless Single Page Application experience. Explore personalized email notifications, and innovative features like Rewind, Swipe Right, Left, and Up functionalities.

With our expert guidance, you'll not only build a fully functional dating app but also enhance your Alpine js skills by designing engaging swipe components. Dive deep into creating a beautiful chat interface, mastering the intricacies of messaging, conversation, and match models.

Whether you're a seasoned developer or a newcomer eager to make your mark, this course is designed to empower you. Join us and unlock the secrets to building immersive web applications that captivate users and leave a lasting impression. Enroll now and let's embark on this exciting journey together!
Who this course is for:
This course is intended for a diverse audience of aspiring and intermediate-level web developers seeking to advance their skills in modern web development. The hands-on approach, coupled with practical examples in building an Tinder clone, ensures that learners not only grasp the concepts but also gain the confidence to implement them in real-world projects.
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.

User Reviews

Rating

average 0

Total votes0

Focused display

PHP

Laravel

Namu Makwembo

Instructor's Courses

I am a dedicated software engineering student and instructor based in Turkey. With a strong background in PHP, Laravel, CSS, HTML, and JavaScript, I have accumulated 5 years of valuable experience in the field. Ever since I wrote my first code in C++, programming has been an inseparable part of my life. As I continue to learn and grow, I find great joy in sharing the various programming tricks and skills I've acquired with fellow programmers in my community.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.