Interactive Action Buttons: Like, Follow, Bookmark
This documentation explains how to use interactive buttons for actions such as liking, following, and bookmarking items. Below is an example of the controller logic to handle the actions.
BUTTON VARIATIONS
Screenshots
Icon Only
<span id="like-btn-icon-only-{{ $item->id }}"
class="action-btn like-btn icon-only {{ auth()->user()->likedItems->contains($item) ? 'liked' : '' }}"
data-id="{{ $item->id }}" data-action="{{ route('item.like', $item->id) }}"
data-action-type="like" data-toast="Item liked!" data-toast-position="bottom">
<i class="f7-icons" style="color: {{ auth()->user()->likedItems->contains($item) ? '#EF4444' : '#3B82F6' }};">
{{ auth()->user()->likedItems->contains($item) ? 'heart_fill' : 'heart' }}
</i>
</span>
Text Only (Inline)
<span id="like-span-text-only-{{ $item->id }}" class="text-only-span"
data-id="{{ $item->id }}" data-action="{{ route('item.like', $item->id) }}"
data-action-type="like" data-toast="Item liked from text!" data-toast-position="bottom">
{{ auth()->user()->likedItems->contains($item) ? 'Liked' : 'Like' }}
</span>
Button with Icon and Text
<button id="like-btn-text-icon-{{ $item->id }}"
class="btn btn-block btn-md action-btn like-btn styled {{ auth()->user()->likedItems->contains($item) ? 'liked' : '' }}"
data-id="{{ $item->id }}" data-action="{{ route('item.like', $item->id) }}"
data-action-type="like" data-toast="Item liked!" data-toast-position="top">
<i class="f7-icons">
{{ auth()->user()->likedItems->contains($item) ? 'heart_fill' : 'heart' }}
</i>
{{ auth()->user()->likedItems->contains($item) ? 'Liked' : 'Like' }}
</button>
Button with Text Only
<button id="like-btn-text-only-{{ $item->id }}"
class="btn btn-block btn-md action-btn like-btn styled text-button-only {{ auth()->user()->likedItems->contains($item) ? 'liked' : '' }}"
data-id="{{ $item->id }}" data-action="{{ route('item.like', $item->id) }}"
data-action-type="like" data-toast="Item liked!" data-toast-position="bottom">
{{ auth()->user()->likedItems->contains($item) ? 'Liked' : 'Like' }}
</button>
Icon + Text (Inline)
<span id="like-span-icon-text-{{ $item->id }}" class="icon-text-span"
data-id="{{ $item->id }}" data-action="{{ route('item.like', $item->id) }}"
data-action-type="like" data-toast="Item liked from icon+text inline!" data-toast-position="bottom">
<i class="f7-icons" style="color: {{ auth()->user()->likedItems->contains($item) ? '#EF4444' : '#3B82F6' }};">
{{ auth()->user()->likedItems->contains($item) ? 'heart_fill' : 'heart' }}
</i>
{{ auth()->user()->likedItems->contains($item) ? 'Liked' : 'Like' }}
</span>
Controller Logic
The following controller logic handles the like/unlike action for an item with message and count response.
// Like or unlike item
public function likeItem(Request $request, $id)
{
$user = Auth::user();
$item = Item::find($id);
if ($item && $user) {
if ($user->likedItems->contains($item)) {
$user->likedItems()->detach($item);
$likesCount = $item->likes()->count();
return response()->json([
'success' => true,
'message' => 'Unliked the item!',
'action' => 'like',
'count' => $likesCount,
]);
} else {
$user->likedItems()->attach($item);
$likesCount = $item->likes()->count();
return response()->json([
'success' => true,
'message' => 'Liked the item!',
'action' => 'liked',
'count' => $likesCount,
]);
}
}
return response()->json(['success' => false, 'message' => 'User or item not found.']);
}
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
public function bookmarkJobListing($id)
{
$user = Auth::user();
$jobListing = JobListing::findOrFail($id);
$isBookmarked = $user->bookmarkedJobListings->contains($jobListing);
if ($isBookmarked) {
$user->bookmarkedJobListings()->detach($jobListing);
$action = 'bookmark';
$message = 'Unbookmarked the job listing!';
} else {
$user->bookmarkedJobListings()->attach($jobListing);
$action = 'bookmarked';
$message = 'Bookmarked the job listing!';
}
$bookmarksCount = $jobListing->bookmarks()->count();
Log::info("Job listing {$action}", [
'user_id' => $user->id,
'job_listing_id' => $id,
'bookmarks_count' => $bookmarksCount,
]);
return response()->json([
'success' => true,
'message' => $message,
'action' => $action,
'count' => $bookmarksCount,
]);
}
Instanty Dynamic Update
Function Overview
The updateCountDisplay function dynamically updates the count displayed for an action
(e.g., likes, follows, bookmarks) after an AJAX request.
Function Code
function updateCountDisplay(itemId, actionType, count) {
var countElement = $('#count-' + actionType + '-' + itemId);
if (countElement.length > 0) {
countElement.text(count);
}
}
How It Works
- itemId: The ID of the item being liked, followed, or bookmarked.
- actionType: The type of action (e.g., 'like', 'follow', 'bookmark').
- count: The new count of likes, follows, or bookmarks after an action is performed.
Usage Example
Add this span element inside your HTML where you want the like/follow count to appear:
<span id="count-follow-{{ $item->id }}">{{ $item->follows()->count() }}</span>
Example Scenario
If a user follows an item with id = 5, the following HTML element will be updated
dynamically:
<span id="count-follow-5">10</span> <!-- Before Follow -->
<span id="count-follow-5">11</span> <!-- After Follow -->
Hero Section
The hero section is the first section of a webpage that appears above the fold. It typically includes a large image or video, a headline, and a call-to-action button. The hero section is used to grab the visitor's attention and encourage them to take action.
Key Features
- Large background image or video
- Headline text
- Subheadline text
- Call-to-action button
- Responsive design
Example Code
<div class="hero-header">
<h1>Find Your Dream Job Here</h1>
<h2>Discover thousands of opportunities with top employers-your future starts here.</h2>
</div>
COMPONENT MODIFICATION
To add box style to components just add some css to main component container
CSS Code
background-color: var(--light-gray);
box-shadow: 0 8px 23px 0 rgba(0, 0, 0, 0.03);
border-radius: 6px;
padding: 1.5rem;
TOAST
HOW RO IMPLIMENT
To implement toast notifications, you need to create a function that generates the toast message and
displays it on the screen. Below is an example of how to create a toast notification.
JavaScript Code
<h1>Toast Notification Example</h1>
<button onclick="showToast('Success message!', 'success', 'top')">Show Success Top</button>
<button onclick="showToast('Error message!', 'error', 'bottom')">Show Error Bottom</button>
<button onclick="showToast('Warning message!', 'warning', 'top')">Show Warning Top</button>
<button onclick="showToast('Info message!', 'info', 'bottom')">Show Info Bottom</button>
//JS
// Show a success toast at the top
showToast('Operation completed successfully!', 'success', 'top');
// Show an error toast at the bottom
showToast('Something went wrong!', 'error', 'bottom');
// Show a warning toast at the top
showToast('Be careful!', 'warning', 'top');
// Show an info toast with default settings
showToast('This is an info message!');
//Real-World Scenarios
function submitForm() {
let isValid = validateForm(); // Assume this checks the form
if (isValid) {
showToast('Form submitted successfully!', 'success', 'top');
} else {
showToast('Please fix the errors!', 'error', 'bottom');
}
}
How It Works
- Creates a toast notification dynamically when called.
- Uses predefined colors for different notification types.
- Adds a smooth fade-in and fade-out effect.
- Automatically removes the toast after 3 seconds.
- Supports positioning at the top or bottom of the page.
Example Usage in HTML
<button class="toast-button success-btn" onclick="showToast('Successfully liked the item!', 'success', 'top')">Like Item</button>
Lightbox (Image Preview Modal)
The lightbox is a modal window that displays a larger version of an image when clicked. It is used to
provide a better view of images without leaving the current page.
VIEWS HTML CODE
<!-- GALLERY GRID -->
<div class="grid grid-cols-3 gap-4" id="imageGallery"> <!-- Your grid system for images -->
@foreach ($gig->images as $index => $image)
<div class="image-item"> <!-- Changed class -->
<img src="{{ asset($image->image_url) }}" alt="Image {{ $index + 1 }}" class="gallery-img">
</div>
@endforeach
</div>
<!-- MODAL OVERLAY FOR LIGHT BOX -->
<div class="image-preview-modal"> <!-- Changed class -->
<div class="image-preview-modal-overlay" id="imagePreviewModalContainer"> <!-- Changed class and id -->
<button class="lightbox-close-btn" id="closeModalButton"><i class="icon f7-icons">xmark</i></button> <!-- Changed class and id -->
<div class="image-preview-modal-content"> <!-- Changed class -->
<img id="previewImage" class="preview-image" src="" alt="Preview"> <!-- Changed id and class -->
<div class="lightbox-slider-controls"> <!-- Changed class -->
<button class="slider-button" id="previousImageButton"><i class="icon f7-icons">chevron_left</i>Prev</button> <!-- Changed class and id -->
<button class="slider-button" id="nextImageButton">Next <i class="icon f7-icons">chevron_right</i></button> <!-- Changed class and id -->
</div>
</div>
</div>
</div>
Gallery
The gallery is a collection of images displayed in a grid layout. It is used to showcase multiple
images
in a visually appealing way
VIEWS HTML CODE
<div class="grid grid-cols-3 gap-4" id="imageGallery"> <!-- Your grid system for images -->
@foreach ($gig->images as $index => $image)
<div class="image-item"> <!-- Changed class -->
<img src="{{ asset($image->image_url) }}" alt="Image {{ $index + 1 }}" class="gallery-img">
</div>
@endforeach
</div>
gallery-img - class used by js to open image in lightbox
Infinity Scroll
Infinity scroll is a feature that automatically loads more content as the user scrolls down the page.
It is used to provide a seamless browsing experience without the need to click on pagination links.
VIEWS HTML CODE
main view
<div id="infinite-scroll">
@include('job_listings._job_item')
</div>
<div id="loading-indicator" style="display: none;">Loading...</div>
<script>
window.initialNextPageUrl = '{!! $nextPageUrl ?? '' !!}';
</script>
Wrap a partial view in a div with class infinite-scroll
Example code of partial view
@foreach ($gigs as $gig)
<div class="infinite-container">
<a href="{{ route('gigs.show', $gig->slug) }}" class="">
</a>
<div class="gig-card">
<div class="gig-image">
<img src="{{ asset($gig->images[0]->image_url ?? 'img/logo/default.jpg') }}"
alt="{{ $gig->title }}">
{{-- <div class="favorite-icon"></div> --}}
</div>
<div class="gig-info">
<h3>{{ $gig->title }}</h3>
<p>{{ $gig->description }}</p>
</div>
</div>
</div>
@endforeach
Controller
public function index(Request $request)
{
$query = ScrapedJobListing::query()
->when($request->filled('keyword'), function ($q) use ($request) {
$q->where(function ($query) use ($request) {
$query->where('title', 'LIKE', '%' . $request->keyword . '%')
->orWhere('content', 'LIKE', '%' . $request->keyword . '%');
});
})
->when($request->filled('job_type') && $request->job_type !== 'all', function ($q) use ($request) {
$q->where('job_type', $request->job_type);
})
->when($request->filled('location') && $request->location !== 'all', function ($q) use ($request) {
$q->where('location', $request->location);
})
->orderBy('created_at', 'desc');
$jobListings = $query->paginate(10);
if ($request->ajax()) {
return response()->json([
'html' => view('job_listings._job_item', compact('jobListings'))->render(),
'next_page_url' => $jobListings->nextPageUrl(),
]);
}
return view('job_listings.index', [
'jobListings' => $jobListings,
'nextPageUrl' => $jobListings->nextPageUrl(),
]);
}
Tabs
Tabs are used to organize content into different sections. They allow users to switch between
different
sections without leaving the current page.
VIEWS HTML CODE
<!-- Tabs Header -->
<div class="tabs-container">
<div class="tab-link active" data-tab="#tab-categories">Categories</div>
<div class="tab-link" data-tab="#tab-popular">Popular</div>
<div class="tab-indicator"></div>
</div>
<!-- Content Sections -->
<div id="tab-categories" class="tab-content active">
<span>Explore various categories like Technology, Fashion, Sports, and more.</span>
</div>
<div id="tab-popular" class="tab-content">
<span>Check out the most popular items trending right now.</span>
</div>
Grid
Grid is a layout system that organizes content into rows and columns. It is used to create responsive
designs that adapt to different screen sizes.
VIEWS HTML CODE
<div class="grid grid-cols-3 grid-gap grid-no-margin">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
<div class="grid-item">Item 10</div>
</div>
Picker
Picker is a user interface element that allows users to select an option from a list. It is used to
provide a more user-friendly way of selecting values.
js code
// Data arrays for demonstration.
const awardYears = Array.from({ length: 26 }, (_, i) => ({
id: i + 2000,
name: String(i + 2000)
}));
const educationlevels = [
{ id: 1, name: "Certificate" },
{ id: 2, name: "Diploma" },
{ id: 3, name: "Degree" },
{ id: 4, name: "Masters" },
{ id: 5, name: "Phd" }
];
const experienceLevels = [
{ id: 1, name: "Entry Level" },
{ id: 2, name: "Mid Level" },
{ id: 3, name: "Senior Level" }
];
document.addEventListener("DOMContentLoaded", function() {
PickerLibrary.attachPicker("#awardYear", awardYears);
PickerLibrary.attachPicker("#edlevel", educationlevels);
PickerLibrary.attachPicker("#explevel", experienceLevels );
});
VIEWS HTML CODE
<div class="input-group">
<label for="timeInput">Year</label>
<div class="input-block">
<input type="text" id="awardYear" class="picker-input" name="year" placeholder="1990" readonly />
</div>
</div>
<div class="input-group">
<label for="timeInput">Education Level</label>
<div class="input-block">
<input type="text" id="edlevel" class="picker-input" name="edlevel" placeholder="Select Education Level" readonly />
</div>
</div>
Swiper
Swiper is a touch-enabled slider that allows users to swipe through content. It is used to create
interactive carousels and slideshows.
VIEWS HTML CODE
<div class="slider-wrapper">
<div class="slider" per-view="1.2" gap="15" offset-start="0" speed="400" auto-slide="false" auto-slide-interval="3000" infinite-slider="true">
<div class="slider-track">
@foreach ($latestBlogs as $blogPost)
<div class="slide">
<a href="{{ route('blogPosts.show', $blogPost->slug) }}">
<div class="blog-card">
<div class="blog-card-image">
<img src="{{ asset($blogPost->thumbnail) }}" alt="{{ $blogPost->title }}" class="blog-card-img" />
</div>
<div class="blog-card-content">
<h2 class="blog-card-title">{{ $blogPost->title }}</h2>
</div>
</div>
</a>
</div>
@endforeach
</div>
<button class="nav-btn prev"><li class="f7-icons">chevron_left</li></button>
<button class="nav-btn next"><li class="f7-icons">chevron_right</li></button>
<div class="dots"></div>
</div>
</div>
Accordion
Accordion is a user interface element that allows users to expand and collapse sections of content.
It is used to organize information in a structured and interactive way.
VIEWS HTML CODE
<div class="accordion-container">
<ul class="nav-list full-list-dividers">
<li class="accordion-item">
<a href="#" class="nav-link">
<div class="item-media">
<i class="f7-icons">bell</i>
</div>
<div class="item-title">Notifications</div>
<div class="item-inner">
<i class="f7-icons">chevron_right</i>
</div>
</a>
<div class="accordion-body">
<p>This is the content for Notifications. It can include more details or options related to notifications.</p>
</div>
</li>
<li class="accordion-item">
<a href="#" class="nav-link">
<div class="item-media">
<i class="f7-icons">lock</i>
</div>
<div class="item-title">Passwords</div>
<div class="item-inner">
<i class="f7-icons">chevron_right</i>
</div>
</a>
<div class="accordion-body">
<p>This is the content for Passwords. It can include password management options.</p>
</div>
</li>
</ul>
</div>
List
List is a user interface element that displays a collection of items in a structured format. It is
used
to present information in an organized and easy-to-read way.
full-list-dividers - to add dividers full between list items
nav-list - to add list items
list-dividers - to add half dividers between list items
list-outline - To add outline to list items
VIEWS HTML CODE
<ul class="nav-list full-list-dividers">
<li>
<a href="{{ route('dashboard.user') }}" class="nav-link">
<div class="item-media">
<i class="f7-icons">square_grid_2x2</i>
</div>
<div class="item-title">Dashboard</div>
<div class="item-inner">
<i class="f7-icons">chevron_right</i>
</div>
</a>
</li>
<li>
<a href="{{ route('users.acmanager') }}" class="nav-link">
<div class="item-media">
<i class="f7-icons">person</i>
</div>
<div class="item-title">Your FursaHub Account</div>
<div class="item-inner">
<i class="f7-icons">chevron_right</i>
</div>
</a>
</li>
<li>
<a href="{{ route('users.managecv') }}" class="nav-link">
<div class="item-media">
<i class="f7-icons">doc_text</i>
</div>
<div class="item-title">Manage CV</div>
<div class="item-inner">
<i class="f7-icons">chevron_right</i>
</div>
</a>
</li>
</ul>
Bottom sheet Modal
Bottom sheet modal is a user interface element that slides up from the bottom of the screen. data-menu
is used to
trigger the bottom sheet modal. It is used to display additional content or options without leaving the
current page.
VIEWS HTML CODE
//open button =================================
<div data-menu="bottomSheet">
Open Bottom Sheet
</div>
//modal sheet =============================================
<!-- Global overlay -->
<div id="overlay" class="sheet-modal-overlay"></div>
<!-- Modal -->
<div id="bottomSheet" class="bottom-sheet">
<div class="sheet-handle"></div>
<!-- Header section with title and Clear button -->
<div class="sheet-header">
<span>Modal Title</span>
<button class="clear-btn">Clear</button>
</div>
<!-- Content section -->
<div class="sheet-content">
<p>This is a bottom sheet modal. You can put any content here: forms, images, lists, etc.</p>
<p>Click outside or use the buttons to close the modal.</p>
</div>
<!-- Bottom section with one button -->
<div class="sheet-footer">
<button class="action-btn close-menu">Confirm</button>
</div>
</div>
Search Box
Search box is a user interface element that allows users to search for content. It is used to provide a
way for users to find information quickly and easily.
VIEWS HTML CODE
<form id="filter-form" method="GET" action="{{ route('job_listings.index') }}">
<div class="search-container mt-3">
<div class="search-icon">
<i class="icon f7-icons">search</i>
</div>
<input type="text" id="searchInput" class="search-input" name="keyword" placeholder="Search keyword" value="{{ request('keyword') }}">
</div>
</form>
File Upload
File upload is a user interface element that allows users to upload files to a server. It is used to
provide a way for users to share documents pdf, docx etc
VIEWS HTML CODE
<div class="upload-container" id="uploadContainer">
<label for="fileUpload" class="upload-label" id="uploadLabel">
<!-- Cloud icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="cloud-icon">
<path d="M18.5 19a3.5 3.5 0 0 0 .45-6.96 5 5 0 0 0-9-1.76A4 4 0 0 0 4 14a4 4 0 0 0 4 4h10.5z"></path>
</svg>
<!-- Label text -->
<span class="upload-text" id="uploadText">Upload your file</span>
</label>
<!-- Hidden file input -->
<input type="file" id="fileUpload" class="upload-input" accept=".pdf,.doc,.docx,image/*" />
</div>
Image Uploader
- Image uploader is a user interface element that allows users to upload images to a server.
- It provides multiple layouts including single image upload, three-image grid, and five-image
grid configurations.
- The uploader supports preview functionality, drag-and-drop capability, and basic image
validation.
- Users can upload images in common formats like JPG, PNG, and WebP.
- The component includes visual feedback for upload status and error handling.
Four Images Uploader example
<div class="image-grid layout-current">
<div class="image-slot slot1">
<span class="upload-placeholder">+</span>
<input type="file" name="images[]" class="file-input" accept="image/*" onchange="previewImage(this)">
<img class="image-preview" alt="Preview">
</div>
<div class="image-slot slot2">
<span class="upload-placeholder">+</span>
<input type="file" name="images[]" class="file-input" accept="image/*" onchange="previewImage(this)">
<img class="image-preview" alt="Preview">
</div>
<div class="image-slot slot3">
<span class="upload-placeholder">+</span>
<input type="file" name="images[]" class="file-input" accept="image/*" onchange="previewImage(this)">
<img class="image-preview" alt="Preview">
</div>
<div class="image-slot slot4">
<span clasJs="upload-placeholder">+</span>
<input type="file" name="images[]" class="file-input" accept="image/*" onchange="previewImage(this)">
<img class="image-preview" alt="Preview">
</div>
</div>
Dating Card
Dating card is a user interface element that displays user profiles in a card format. It is used to
showcase user information and photos in a visually appealing way.
Screenshots
Features
- Swipe gestures (right/left)
- Like/Pass buttons
- Photo slider with multiple images
- Match notification cards
- Limit and "No more cards" states
- Detailed user info display
- Responsive design
- Touch-enabled interactions
- Smooth animations
- Cross-browser compatibility
- message
VIEWS HTML CODE
<div class="swipe-container">
<div class="swipe-stack">
<!-- Profile Cards -->
@forelse ($profiles as $profile)
<div class="swipe-card" data-profile-id="{{ $profile->id }}" data-action="{{ route('swipes.store') }}">
<div class="swipe-indicator like-indicator">LIKE</div>
<div class="swipe-indicator nope-indicator">NOPE</div>
<!-- Image Container: avatar always shows as first image -->
<div class="image-container">
<!-- Avatar as the first image -->
<img src="{{ asset($profile->avatar) }}" alt="{{ $profile->name }}" class="swipe-image active">
<!-- Additional images -->
@if ($profile->images && $profile->images->count())
@foreach ($profile->images as $img)
<img src="{{ asset($img->image_url) }}" alt="{{ $profile->name }}" class="swipe-image">
@endforeach
@endif
<!-- Profile Info Overlay -->
<div class="profile-info">
<span>{{ $profile->name }}, {{ \Carbon\Carbon::parse($profile->birth_date)->age }}</span>
<p><i class="f7-icons" style="font-size: 14px;">location_fill</i> {{ $profile->location }}</p>
</div>
<!-- Navigation buttons for images (only if more than 1 image exists) -->
@if( (1 + ($profile->images ? $profile->images->count() : 0)) > 1 )
<div class="image-nav">
<button class="prev-image"><i class="f7-icons">chevron_left</i></button>
<button class="next-image"><i class="f7-icons">chevron_right</i></button>
</div>
@endif
<!-- Dots overlay for image pagination -->
<div class="image-dots">
@php
$totalImages = 1 + ($profile->images ? $profile->images->count() : 0);
@endphp
@if($totalImages > 1)
@for ($i = 0; $i < $totalImages; $i++)
<div class="dot {{ $i === 0 ? 'active' : '' }}"></div>
@endfor
@else
<div class="dot active"></div>
@endif
</div>
</div>
<!-- Hidden match content inside the swipe card -->
<div class="match-content" style="display: none;">
<h2>It's a match!</h2>
<p>You and <span class="match-user-name">someone</span> liked each other.</p>
<div class="match-photos">
<img class="my-photo" src="" alt="My Photo">
<img class="their-photo" src="" alt="Their Photo">
</div>
<!-- Message Form is displayed directly (no Chat button) -->
<div class="message-form">
<textarea placeholder="Type your message..." class="message-textarea"></textarea>
<button type="button" class="send-message-btn btn btn-primary btn-block btn-md">Send</button>
</div>
</div>
</div>
@empty
<div class="no-more-card" style="text-align: center;">
<h2>No more singles left!</h2>
<p>Check back later for new matches.</p>
</div>
@endforelse
<!-- Info Card -->
<div class="swipe-card info-card" style="display: none; text-align: center;">
<h2>You've reached your daily swipe limit!</h2>
<p>Come back tomorrow for more matches.</p>
<button class="refresh-btn btn btn-primary btn-block btn-md">OK</button>
</div>
</div>
<div class="swipe-actions">
<button class="date-btn rewind"><i class="f7-icons">arrow_counterclockwise</i></button>
<button class="date-btn dislike"><i class="f7-icons">xmark</i></button>
<button class="date-btn star"><i class="f7-icons">star_fill</i></button>
<button class="date-btn like"><i class="f7-icons">heart_fill</i></button>
<button class="date-btn boost"><i class="f7-icons">bolt_fill</i></button>
</div>
Controller that handles swipes
?php
namespace App\Http\Controllers;
use App\Models\User;
use App\Models\Swipe;
use App\Models\Conversation;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Carbon\Carbon;
class SwipeController extends Controller
{
/**
* Maximum swipes allowed per day
*/
protected $dailySwipeLimit = 4; // Adjust to the correct limit
/**
* Display profiles that haven't been swiped yet.
*/
public function index()
{
$user_id = Auth::id();
// Profiles swiped today by the current user.
$swipedProfileIds = Swipe::where('user_id', $user_id)->whereDate('created_at', Carbon::today())->pluck('profile_id')->toArray();
// Profiles not yet swiped today, including images.
$profiles = User::whereNotIn('id', $swipedProfileIds)
->where('id', '!=', $user_id) // Exclude the current user.
->with('images') // Eager load images.
->get();
return view('dating', compact('profiles'));
}
/**
* Store a swipe action (like or nope)
*/
public function store(Request $request)
{
$request->validate([
'profile_id' => 'required|exists:users,id',
'action' => 'required|in:like,nope',
]);
$user_id = Auth::id();
$user = Auth::user(); // Current user model.
$profile = User::with('images')->find($request->profile_id); // The user being swiped on.
// Check today's swipes count.
$swipeCountToday = Swipe::where('user_id', $user_id)->whereDate('created_at', Carbon::today())->count();
if ($swipeCountToday >= $this->dailySwipeLimit) {
return response()->json(
[
'success' => false,
'message' => 'You have reached your daily swipe limit.',
],
403,
);
}
// Check if there's an existing swipe from current user -> profile.
$existingSwipe = Swipe::where('user_id', $user_id)->where('profile_id', $request->profile_id)->first();
if ($existingSwipe) {
$existingSwipe->update([
'action' => $request->action,
]);
} else {
Swipe::create([
'user_id' => $user_id,
'profile_id' => $request->profile_id,
'action' => $request->action,
]);
}
// Check for a match only if action is 'like'
$isMatch = false;
$conversationId = null;
if ($request->action === 'like') {
// Check if the target user already liked the current user.
$reciprocalSwipe = Swipe::where('user_id', $request->profile_id)->where('profile_id', $user_id)->where('action', 'like')->first();
if ($reciprocalSwipe) {
$isMatch = true;
// Check for an existing conversation between these two users.
$conversation = Conversation::whereHas('participants', function ($q) use ($user_id) {
$q->where('user_id', $user_id);
})
->whereHas('participants', function ($q) use ($request) {
$q->where('user_id', $request->profile_id);
})
->first();
if (!$conversation) {
// Create a new conversation. You can customize the subject as needed.
$conversation = Conversation::create([
'subject' => null,
]);
// Attach both participants.
$conversation->participants()->attach([$user_id, $request->profile_id]);
}
$conversationId = $conversation->id;
}
}
// Return additional fields for the match card.
return response()->json([
'success' => true,
'message' => 'Swipe recorded successfully!',
'action' => $request->action,
'count' => Swipe::where('profile_id', $request->profile_id)->count(),
'match' => $isMatch, // True if it's a match.
'match_message' => $isMatch ? "It's a match!" : null,
'my_name' => $user->name,
'my_photo' => $user->avatar,
'their_name' => $profile->name,
'their_id' => $profile->id, // Return the matched user's id.
'their_photos' => $profile->images->pluck('image_url'),
'their_photo' => $profile->avatar,
'conversation_id' => $conversationId,
]);
}
}
Models
Swipe.phpUser.php
Swipe Model
belongsTo(User::class, 'user_id');
}
public function profile()
{
return $this->belongsTo(User::class, 'profile_id');
}
}
User Model
?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use App\Models\UserEducation;
class User extends Authenticatable
{
use HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var list
*/
protected $fillable = [
'name',
'email',
'password',
'is_freelancer', // Not a freelancer by default
];
/**
* The attributes that should be hidden for serialization.
*
* @var list
*/
protected $hidden = ['password', 'remember_token'];
/**
* The attributes that should be cast.
*
* @return array
*/
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
'is_freelancer' => 'boolean', // Ensures it's treated as a boolean
];
}
/**
* Get all education records associated with the user.
*/
public function educations()
{
return $this->hasMany(UserEducation::class);
}
/**
* Get the user's primary education record.
*
* Assumes the user_educations table has an "is_primary" column.
*/
public function primaryEducation()
{
return $this->hasOne(UserEducation::class)->where('is_primary', true);
}
public function likedItems()
{
return $this->belongsToMany(Item::class, 'user_item_likes')->withTimestamps();
}
public function followedItems()
{
return $this->belongsToMany(Item::class, 'user_item_follows')->withTimestamps();
}
public function bookmarkedItems()
{
return $this->belongsToMany(Item::class, 'user_item_bookmarks')->withTimestamps();
}
public function images()
{
return $this->hasMany(Image::class);
}
}
MESSAGE MATCHES
Message matches is a user interface element that allows users to chat with their matches. It is used to
provide a way for users to communicate with each other.
Controller
?php
namespace App\Http\Controllers;
use App\Models\Message;
use App\Models\Conversation;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Log;
class MessageController extends Controller
{
public function store(Request $request)
{
try {
// Validate that a message is provided.
$request->validate([
'message' => 'required|string',
]);
// Get conversation_id from request (might be null)
$conversationId = $request->input('conversation_id');
$senderId = Auth::id();
// If no conversation_id is provided, we need a recipient_id.
if (!$conversationId) {
$request->validate([
'recipient_id' => 'required|exists:users,id',
]);
$recipientId = $request->input('recipient_id');
// Check if a one-to-one conversation already exists between these two users.
$conversation = Conversation::where('is_group', 0)
->whereHas('participants', function($q) use ($senderId) {
$q->where('user_id', $senderId);
})
->whereHas('participants', function($q) use ($recipientId) {
$q->where('user_id', $recipientId);
})
->first();
if (!$conversation) {
// Create a new one-to-one conversation (subject can be null)
$conversation = Conversation::create([
'subject' => null,
'is_group' => 0,
]);
// Attach both sender and recipient to the conversation
$conversation->participants()->attach([$senderId, $recipientId]);
}
$conversationId = $conversation->id;
}
// Create the new message
$message = Message::create([
'conversation_id' => $conversationId,
'sender_id' => $senderId,
'message' => $request->message,
]);
Log::info('Message sent successfully', [
'user_id' => $senderId,
'conversation_id' => $conversationId,
'message_id' => $message->id,
]);
return response()->json([
'success' => true,
'message' => 'Message sent successfully!',
'data' => $message,
'conversation_id' => $conversationId,
]);
} catch (\Exception $e) {
Log::error('Failed to send message', [
'user_id' => Auth::id(),
'error' => $e->getMessage(),
'conversation_id' => $request->input('conversation_id') ?: $request->input('recipient_id'),
]);
return response()->json([
'success' => false,
'message' => 'Failed to send message',
], 500);
}
}
}
Message Model
?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
class Message extends Model
{
use HasFactory;
protected $fillable = [
'conversation_id',
'sender_id',
'message',
'is_read',
];
public function conversation()
{
return $this->belongsTo(Conversation::class);
}
public function sender()
{
return $this->belongsTo(User::class, 'sender_id');
}
}
Conversation Model
?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
class Conversation extends Model
{
use HasFactory;
protected $fillable = ['subject'];
public function participants()
{
return $this->belongsToMany(User::class, 'conversation_participants', 'conversation_id', 'user_id')->withTimestamps();
}
public function messages()
{
return $this->hasMany(Message::class);
}
}
Conversation Participants Model
?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
class ConversationParticipant extends Model
{
use HasFactory;
protected $table = 'conversation_participants';
protected $fillable = [
'conversation_id',
'user_id',
];
public function conversation()
{
return $this->belongsTo(Conversation::class);
}
public function user()
{
return $this->belongsTo(User::class);
}
}
DATABASE MIGRATIONS
Below are the database migrations for the models above. You can create these migrations using the
php artisan make:migration command.
Schema::create('conversations', function (Blueprint $table) {
$table->id();
$table->string('subject')->nullable();
$table->tinyInteger('is_group')->default(0);
$table->timestamps();
});
Schema::create('conversation_participants', function (Blueprint $table) {
$table->foreignId('conversation_id')->constrained()->onDelete('cascade');
$table->foreignId('user_id')->constrained()->onDelete('cascade');
$table->timestamps();
$table->primary(['conversation_id', 'user_id']);
});
Schema::create('messages', function (Blueprint $table) {
$table->id();
$table->foreignId('conversation_id')->constrained()->onDelete('cascade');
$table->foreignId('sender_id')->constrained('users')->onDelete('cascade');
$table->text('message');
$table->tinyInteger('is_read')->default(0);
$table->timestamps();
});
CHIPS
Screenshots
Features
- Chips size
chip-large chips-medium
- chips color
chip-magenta chips-green
- chips with icon
- It also works with border and any color
HTML CODE
GROUP CHIP
<div class="chip-group">
<span class="chip chip-magenta chip-large me-1">#Full Time </span>
<span class="chip chip-magenta chip-large me-1">#Dodoma </span>
</div>
FOR ONE CHIP
<span class="chip chip-magenta me-1">#Dodoma </span>
CHIP WITH ICON
<span class="chip chip-magenta me-1"> <i
class="icon f7-icons">chevron_right</i> #Dodoma </span>
IT ALSO WORK WITH BORDER AND COLOR
<span class="chip border-class color-class me-1">#Dodoma </span>
Pull To Refresh
Pull to refresh is a user interface element that allows users to refresh the content of a page by
pulling
down the screen. It is commonly used in mobile applications to update the content of a list or feed.
Features
- Supports touch events for mobile devices
- Works with mouse events for desktop browsers
- Displays a loading spinner while refreshing
- Supports custom styling and animations
HTML CODE
//Add code above content container
<div class="refresh-indicator">
<div class="refresh-spinner"></div>
</div>
<div class="content-container">
@yield('content')
</div>
Preloader
Preloader is a user interface element that indicates the loading status of a page or component. It is
used
to inform users that content is being loaded and to provide visual feedback during the loading process.
Features
- Supports different preloader styles and animations
- Can be customized with CSS to match the design of the website
- Works with AJAX requests and page transitions
- Provides visual feedback for loading status
HTML CODE
//add this code above content container
<div id="preloader">
<div class="spinner"></div>
</div>
<div class="content-container">
@yield('content')
</div>
PWA Install
PWA Install is a user interface element that prompts users to install a Progressive Web App (PWA) on
their
device. It is used to encourage users to add the app to their home screen for easy access and improved
performance.
Features
- Supports installation prompts for PWAs
- Works with service workers and web app manifests
- Provides a user-friendly way to add PWAs to the home screen
- Customizable design and behavior
- Support offline mode
- Support push notification
- Support background sync
- Custom Offline Page
HTML CODE
<!-- link pwa in layouts.app-->
<meta name="theme-color" content="#863FB7">
<link rel="manifest" href="{{ asset('/manifest.json') }}">
<!-- add button to any view -->
<button id="installBtn" class="install-btn hidden">Install App</button>
<!-- add offline page to public path -->
.offline.html
SERVICE WORKER
// service-worker.js
// Name of your cache (update if you change cache assets)
const CACHE_NAME = 'static-v2';
// Files to cache, including your offline fallback page
const FILES_TO_CACHE = [
'/',
'/offline.html',
// Add other assets like CSS, JS, images here
];
// Install event: cache offline page and other assets
self.addEventListener('install', (event) => {
console.log('[Service Worker] Install');
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
console.log('[Service Worker] Pre-caching offline page and assets');
return cache.addAll(FILES_TO_CACHE);
})
);
self.skipWaiting();
});
// Activate event: clean up old caches if necessary
self.addEventListener('activate', (event) => {
console.log('[Service Worker] Activate');
event.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(
keyList.map((key) => {
if (key !== CACHE_NAME) {
console.log('[Service Worker] Removing old cache', key);
return caches.delete(key);
}
})
);
})
);
self.clients.claim();
});
// Fetch event: try network first, fall back to cache, then offline page
self.addEventListener('fetch', (event) => {
// For navigation requests, use a network-first strategy.
if (event.request.mode === 'navigate') {
event.respondWith(
fetch(event.request)
.then((response) => {
// If we got a valid response, clone it and store in cache
const copy = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, copy);
});
return response;
})
.catch(() => {
// If network fails, return offline page from cache.
return caches.match('/offline.html');
})
);
} else {
// For non-navigation requests, try cache first then network.
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
}
});
Lazy Load
Lazy loading is a technique that defers loading non-essential resources at page load time. It is used to
improve page performance by loading images, videos, and other assets only when they are needed.
Features
- Supports lazy loading of images, videos, and iframes
- Works with Intersection Observer API for efficient resource loading
- Provides a smooth loading experience for users
- Customizable threshold and root margin for lazy loading
HTML CODE
<div class="lazy-img">
<!-- Low-resolution blurred placeholder -->
<img class="lazy-placeholder" src="https://assets.imgix.net/unsplash/bear.jpg?w=50" alt="Blog Post Title">
<!-- High-resolution image -->
<img class="lazy-load eventcard-image" data-src="https://assets.imgix.net/unsplash/bear.jpg?w=1000" alt="Blog Post Title">
</div>