Day 5: Livewire Comments CRUD & Custom Components

About Laravel

Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:

Simple, fast routing engine.
Powerful dependency injection container.
Multiple back-ends for session and cache storage.
Expressive, intuitive database ORM.
Database agnostic schema migrations.
Robust background job processing.
Real-time event broadcasting.

Laravel is accessible, powerful, and provides tools required for large, robust applications.

Learning Laravel

Laravel has the most extensive and thorough documentation and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.

You may also try the Laravel Bootcamp, where you will be guided through building a modern Laravel application from scratch.

If you don't feel like reading, Laracasts can help. Laracasts contains thousands of video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.

Laravel Sponsors

We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the Laravel Partners program.

Premium Partners

Contributing

Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the Laravel documentation.

Code of Conduct

In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.

Security Vulnerabilities

If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via taylor@laravel.com. All security vulnerabilities will be promptly addressed.

License

The Laravel framework is open-sourced software licensed under the MIT license.

Day 1: Git Setup, Docker Configuration & Laravel+Livewire Installation

Duration: 1-2 hours

Objectives

Create Livewire components for comment management
Build custom nested comment component
Implement real-time comment approval system
Add interactive comment features (like/dislike, replies)
Create admin comment management interface

Part 1: Comment Management Components (30 minutes)

1. Create Comment Livewire Components

php artisan make:livewire Admin/CommentManager
php artisan make:livewire CommentSection
php artisan make:livewire CommentItem
php artisan make:livewire CommentForm

2. Create CommentManager Component

app/Livewire/Admin/CommentManager.php

<?php

namespace App\Livewire\Admin;

use App\Models\Comment;
use App\Models\Post;
use Livewire\Component;
use Livewire\WithPagination;

class CommentManager extends Component
{
    use WithPagination;

    public $search = '';
    public $filter = 'all';
    public $postFilter = '';

    protected $queryString = [
        'search' => ['except' => ''],
        'filter' => ['except' => 'all'],
        'postFilter' => ['except' => ''],
    ];

    public function mount()
    {
        if (!auth()->user()->is_admin) {
            abort(403);
        }
    }

    public function updatingSearch()
    {
        $this->resetPage();
    }

    public function updatingFilter()
    {
        $this->resetPage();
    }

    public function updatingPostFilter()
    {
        $this->resetPage();
    }

    public function approveComment(Comment $comment)
    {
        $comment->update(['is_approved' => !$comment->is_approved]);

        $status = $comment->is_approved ? 'approved' : 'unapproved';
        session()->flash('success', "Comment {$status} successfully.");
    }

    public function deleteComment(Comment $comment)
    {
        $comment->delete();
        session()->flash('success', 'Comment deleted successfully.');
    }

    public function render()
    {
        $query = Comment::with(['user', 'post']);

        if ($this->search) {
            $query->where('content', 'like', '%' . $this->search . '%')
                  ->orWhereHas('user', function ($q) {
                      $q->where('name', 'like', '%' . $this->search . '%');
                  });
        }

        switch ($this->filter) {
            case 'approved':
                $query->where('is_approved', true);
                break;
            case 'pending':
                $query->where('is_approved', false);
                break;
            case 'replies':
                $query->whereNotNull('parent_id');
                break;
        }

        if ($this->postFilter) {
            $query->where('post_id', $this->postFilter);
        }

        $comments = $query->latest()->paginate(15);
        $posts = Post::orderBy('title')->get();

        return view('livewire.admin.comment-manager', compact('comments', 'posts'));
    }
}

3. Create CommentSection Component

app/Livewire/CommentSection.php

<?php

namespace App\Livewire;

use App\Models\Post;
use App\Models\Comment;
use Livewire\Component;

class CommentSection extends Component
{
    public Post $post;
    public $newComment = '';
    public $replyingTo = null;
    public $showCommentForm = false;

    protected $rules = [
        'newComment' => 'required|string|max:1000|min:3',
    ];

    protected $messages = [
        'newComment.required' => 'Please enter a comment.',
        'newComment.min' => 'Comment must be at least 3 characters.',
        'newComment.max' => 'Comment cannot exceed 1000 characters.',
    ];

    public function mount(Post $post)
    {
        $this->post = $post;
    }

    public function toggleCommentForm()
    {
        if (!auth()->check()) {
            return redirect()->route('login');
        }

        $this->showCommentForm = !$this->showCommentForm;
        $this->resetValidation();
    }

    public function submitComment()
    {
        if (!auth()->check()) {
            return redirect()->route('login');
        }

        $this->validate();

        $this->post->comments()->create([
            'content' => $this->newComment,
            'user_id' => auth()->id(),
            'parent_id' => $this->replyingTo,
            'is_approved' => false,
        ]);

        $this->newComment = '';
        $this->replyingTo = null;
        $this->showCommentForm = false;

        session()->flash('success', 'Comment submitted successfully! It will appear after approval.');

        // Refresh the post with comments
        $this->post->refresh();
        $this->post->load(['approvedComments' => function ($query) {
            $query->with('user', 'approvedReplies.user')
                  ->whereNull('parent_id')
                  ->latest();
        }]);
    }

    public function replyTo($commentId)
    {
        if (!auth()->check()) {
            return redirect()->route('login');
        }

        $this->replyingTo = $commentId;
        $this->showCommentForm = true;
    }

    public function cancelReply()
    {
        $this->replyingTo = null;
        $this->newComment = '';
        $this->showCommentForm = false;
        $this->resetValidation();
    }

    public function render()
    {
        return view('livewire.comment-section');
    }
}

4. Create CommentItem Component

app/Livewire/CommentItem.php

<?php

namespace App\Livewire;

use App\Models\Comment;
use Livewire\Component;

class CommentItem extends Component
{
    public Comment $comment;
    public $showReplies = false;
    public $isEditing = false;
    public $editContent = '';

    protected $rules = [
        'editContent' => 'required|string|max:1000|min:3',
    ];

    public function mount(Comment $comment)
    {
        $this->comment = $comment;
        $this->editContent = $comment->content;
    }

    public function toggleReplies()
    {
        $this->showReplies = !$this->showReplies;
    }

    public function startEditing()
    {
        if (!auth()->check() || auth()->id() !== $this->comment->user_id) {
            return;
        }

        $this->isEditing = true;
        $this->editContent = $this->comment->content;
    }

    public function cancelEditing()
    {
        $this->isEditing = false;
        $this->editContent = $this->comment->content;
        $this->resetValidation();
    }

    public function saveEdit()
    {
        if (!auth()->check() || auth()->id() !== $this->comment->user_id) {
            return;
        }

        $this->validate();

        $this->comment->update([
            'content' => $this->editContent,
            'is_approved' => false, // Require re-approval after edit
        ]);

        $this->isEditing = false;
        session()->flash('success', 'Comment updated successfully! It will appear after approval.');
    }

    public function deleteComment()
    {
        if (!auth()->check() || (auth()->id() !== $this->comment->user_id && !auth()->user()->is_admin)) {
            return;
        }

        $this->comment->delete();
        session()->flash('success', 'Comment deleted successfully.');

        // Refresh parent component
        $this->dispatch('comment-deleted');
    }

    public function replyToComment()
    {
        $this->dispatch('reply-to-comment', commentId: $this->comment->id);
    }

    public function render()
    {
        return view('livewire.comment-item');
    }
}

Part 2: Comment Views (30 minutes)

1. Create CommentManager View

resources/views/livewire/admin/comment-manager.blade.php

<div class="space-y-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-900">Manage Comments</h1>
        <div class="text-sm text-gray-600">
            {{ $comments->total() }} total comments
        </div>
    </div>

    <!-- Filters -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <input wire:model.live.debounce.300ms="search"
                   type="text"
                   placeholder="Search comments or authors..."
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <select wire:model.live="filter"
                class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="all">All Comments</option>
            <option value="approved">Approved</option>
            <option value="pending">Pending Approval</option>
            <option value="replies">Replies Only</option>
        </select>

        <select wire:model.live="postFilter"
                class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All Posts</option>
            @foreach($posts as $post)
                <option value="{{ $post->id }}">{{ Str::limit($post->title, 40) }}</option>
            @endforeach
        </select>
    </div>

    <!-- Comments List -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="space-y-4 p-6">
            @forelse($comments as $comment)
                <div class="border border-gray-200 rounded-lg p-4">
                    <div class="flex justify-between items-start mb-3">
                        <div class="flex items-center space-x-3">
                            <div class="font-medium text-gray-900">
                                {{ $comment->user->name }}
                            </div>
                            <div class="text-sm text-gray-500">
                                {{ $comment->created_at->format('M j, Y \a\t g:i A') }}
                            </div>
                            @if($comment->parent_id)
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                    Reply
                                </span>
                            @endif
                            @if($comment->is_approved)
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                    Approved
                                </span>
                            @else
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                    Pending
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="text-sm text-gray-600 mb-2">
                            On post:
                            <a href="{{ route('posts.show', $comment->post) }}"
                               target="_blank"
                               class="text-blue-600 hover:text-blue-800">
                                {{ $comment->post->title }}
                            </a>
                        </div>
                        <div class="text-gray-900">
                            {{ $comment->content }}
                        </div>
                    </div>

                    <div class="flex items-center justify-between">
                        <div class="flex space-x-3">
                            <button wire:click="approveComment({{ $comment->id }})"
                                    class="text-{{ $comment->is_approved ? 'yellow' : 'green' }}-600 hover:text-{{ $comment->is_approved ? 'yellow' : 'green' }}-800 text-sm">
                                {{ $comment->is_approved ? 'Unapprove' : 'Approve' }}
                            </button>

                            <a href="{{ route('posts.show', $comment->post) }}#comment-{{ $comment->id }}"
                               target="_blank"
                               class="text-blue-600 hover:text-blue-800 text-sm">
                                View in Context
                            </a>
                        </div>

                        <button wire:click="deleteComment({{ $comment->id }})"
                                wire:confirm="Are you sure you want to delete this comment?"
                                class="text-red-600 hover:text-red-800 text-sm">
                            Delete
                        </button>
                    </div>
                </div>
            @empty
                <div class="text-center py-8 text-gray-500">
                    No comments found.
                </div>
            @endforelse
        </div>
    </div>

    <!-- Pagination -->
    @if($comments->hasPages())
        <div class="mt-6">
            {{ $comments->links() }}
        </div>
    @endif
</div>

2. Create CommentSection View

resources/views/livewire/comment-section.blade.php

<div class="mt-8">
    <!-- Comments Header -->
    <div class="flex justify-between items-center mb-6">
        <h3 class="text-2xl font-bold text-gray-900">
            Comments ({{ $post->approvedComments->count() }})
        </h3>

        @auth
            <button wire:click="toggleCommentForm"
                    class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
                {{ $showCommentForm ? 'Cancel' : 'Add Comment' }}
            </button>
        @else
            <a href="{{ route('login') }}"
               class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
                Login to Comment
            </a>
        @endauth
    </div>

    <!-- Comment Form -->
    @if($showCommentForm)
        <div class="bg-gray-50 rounded-lg p-6 mb-6">
            @if($replyingTo)
                <div class="mb-4 p-3 bg-blue-50 border-l-4 border-blue-400">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-blue-700">Replying to comment</span>
                        <button wire:click="cancelReply" class="text-blue-600 hover:text-blue-800">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            @endif

            <form wire:submit="submitComment">
                <div class="mb-4">
                    <label for="newComment" class="block text-sm font-medium text-gray-700 mb-2">
                        Your Comment
                    </label>
                    <textarea wire:model="newComment"
                              id="newComment"
                              rows="4"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="Share your thoughts..."></textarea>
                    @error('newComment')
                        <span class="text-red-500 text-sm">{{ $message }}</span>
                    @enderror
                </div>

                <div class="flex justify-end space-x-3">
                    <button type="button"
                            wire:click="toggleCommentForm"
                            class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-4 py-2 bg-blue-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-blue-700">
                        Post Comment
                    </button>
                </div>
            </form>
        </div>
    @endif

    <!-- Comments List -->
    <div class="space-y-6">
        @forelse($post->approvedComments as $comment)
            @livewire('comment-item', ['comment' => $comment], key($comment->id))
        @empty
            <div class="text-center py-8 text-gray-500">
                <div class="text-lg mb-2">No comments yet</div>
                <p>Be the first to share your thoughts!</p>
            </div>
        @endforelse
    </div>
</div>

@script
<script>
    $wire.on('reply-to-comment', (data) => {
        $wire.replyTo(data.commentId);
    });

    $wire.on('comment-deleted', () => {
        $wire.$refresh();
    });
</script>
@endscript

3. Create CommentItem View

resources/views/livewire/comment-item.blade.php

<div class="border-l-2 border-gray-200 pl-4" id="comment-{{ $comment->id }}">
    <div class="bg-white rounded-lg shadow-sm border p-4">
        <!-- Comment Header -->
        <div class="flex justify-between items-start mb-3">
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-medium">
                    {{ substr($comment->user->name, 0, 1) }}
                </div>
                <div>
                    <div class="font-medium text-gray-900">{{ $comment->user->name }}</div>
                    <div class="text-xs text-gray-500">
                        {{ $comment->created_at->format('M j, Y \a\t g:i A') }}
                        @if($comment->updated_at->gt($comment->created_at))
                            <span class="ml-1 text-gray-400">(edited)</span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Comment Actions -->
            @auth
                @if(auth()->id() === $comment->user_id || auth()->user()->is_admin)
                    <div class="flex space-x-2">
                        @if(auth()->id() === $comment->user_id && !$isEditing)
                            <button wire:click="startEditing"
                                    class="text-gray-400 hover:text-gray-600">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                </svg>
                            </button>
                        @endif

                        <button wire:click="deleteComment"
                                wire:confirm="Are you sure you want to delete this comment?"
                                class="text-gray-400 hover:text-red-600">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                        </button>
                    </div>
                @endif
            @endauth
        </div>

        <!-- Comment Content -->
        <div class="mb-3">
            @if($isEditing)
                <div class="space-y-3">
                    <textarea wire:model="editContent"
                              rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    @error('editContent')
                        <span class="text-red-500 text-sm">{{ $message }}</span>
                    @enderror

                    <div class="flex justify-end space-x-2">
                        <button wire:click="cancelEditing"
                                class="px-3 py-1 text-sm border border-gray-300 rounded text-gray-700 hover:bg-gray-50">
                            Cancel
                        </button>
                        <button wire:click="saveEdit"
                                class="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">
                            Save
                        </button>
                    </div>
                </div>
            @else
                <div class="text-gray-900 leading-relaxed">
                    {{ $comment->content }}
                </div>
            @endif
        </div>

        <!-- Comment Actions -->
        <div class="flex items-center space-x-4 text-sm">
            @auth
                <button wire:click="replyToComment"
                        class="text-blue-600 hover:text-blue-800 font-medium">
                    Reply
                </button>
            @endauth

            @if($comment->approvedReplies->count() > 0)
                <button wire:click="toggleReplies"
                        class="text-gray-600 hover:text-gray-800 font-medium">
                    {{ $showReplies ? 'Hide' : 'Show' }}
                    {{ $comment->approvedReplies->count() }}
                    {{ Str::plural('reply', $comment->approvedReplies->count()) }}
                </button>
            @endif
        </div>

        <!-- Replies -->
        @if($showReplies && $comment->approvedReplies->count() > 0)
            <div class="mt-4 space-y-4 ml-4">
                @foreach($comment->approvedReplies as $reply)
                    @livewire('comment-item', ['comment' => $reply], key('reply-' . $reply->id))
                @endforeach
            </div>
        @endif
    </div>
</div>

Part 3: Integration & Final Views (60 minutes)

1. Update Post Show View

resources/views/posts/show.blade.php

@extends('layouts.blog')

@section('title', $post->title)
@section('description', Str::limit(strip_tags($post->excerpt ?: $post->content), 160))

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <article class="bg-white rounded-lg shadow-sm overflow-hidden">
        @if($post->featured_image)
            <img src="{{ $post->featured_image }}"
                 alt="{{ $post->title }}"
                 class="w-full h-64 md:h-96 object-cover">
        @endif

        <div class="p-8">
            <!-- Post Meta -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <span>By {{ $post->user->name }}</span>
                <span class="mx-2">•</span>
                <time datetime="{{ $post->published_at->toISOString() }}">
                    {{ $post->published_at->format('F j, Y') }}
                </time>
                <span class="mx-2">•</span>
                <span>{{ $post->approvedComments->count() }} {{ Str::plural('comment', $post->approvedComments->count()) }}</span>
            </div>

            <!-- Post Title -->
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
                {{ $post->title }}
            </h1>

            <!-- Post Excerpt -->
            @if($post->excerpt)
                <div class="text-xl text-gray-600 leading-relaxed mb-6 font-medium">
                    {{ $post->excerpt }}
                </div>
            @endif

            <!-- Post Content -->
            <div class="prose prose-lg max-w-none">
                {!! Str::markdown($post->content) !!}
            </div>
        </div>
    </article>

    <!-- Comment Section -->
    @livewire('comment-section', ['post' => $post])
</div>
@endsection

2. Create Admin Comments Index

resources/views/admin/comments/index.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Manage Comments') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    @livewire('admin.comment-manager')
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

3. Update Routes

routes/web.php - Add comment management route:

Route::middleware(['auth', 'admin'])->group(function () {
    Route::get('/admin', function () {
        return view('admin.dashboard');
    })->name('admin.dashboard');

    Route::get('/admin/posts', function () {
        return view('admin.posts.index');
    })->name('admin.posts.index');

    Route::get('/admin/comments', function () {
        return view('admin.comments.index');
    })->name('admin.comments.index');
});

4. Update Navigation

resources/views/layouts/navigation.blade.php - Add admin links:

@if(auth()->user()->is_admin)
    <x-nav-link :href="route('admin.dashboard')" :active="request()->routeIs('admin.*')">
        {{ __('Admin') }}
    </x-nav-link>
@endif

5. Create CommentForm Component (Bonus)

app/Livewire/CommentForm.php

<?php

namespace App\Livewire;

use App\Models\Post;
use Livewire\Component;

class CommentForm extends Component
{
    public Post $post;
    public $content = '';
    public $parentId = null;
    public $isReply = false;

    protected $rules = [
        'content' => 'required|string|max:1000|min:3',
    ];

    public function mount(Post $post, $parentId = null)
    {
        $this->post = $post;
        $this->parentId = $parentId;
        $this->isReply = !is_null($parentId);
    }

    public function submit()
    {
        if (!auth()->check()) {
            return redirect()->route('login');
        }

        $this->validate();

        $this->post->comments()->create([
            'content' => $this->content,
            'user_id' => auth()->id(),
            'parent_id' => $this->parentId,
            'is_approved' => false,
        ]);

        $this->content = '';
        session()->flash('success', 'Comment submitted successfully! It will appear after approval.');

        $this->dispatch('comment-submitted');
    }

    public function render()
    {
        return view('livewire.comment-form');
    }
}

resources/views/livewire/comment-form.blade.php

<div class="bg-gray-50 rounded-lg p-4">
    <form wire:submit="submit" class="space-y-4">
        <div>
            <label for="content" class="block text-sm font-medium text-gray-700 mb-2">
                {{ $isReply ? 'Your Reply' : 'Your Comment' }}
            </label>
            <textarea wire:model="content"
                      id="content"
                      rows="4"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="{{ $isReply ? 'Write your reply...' : 'Share your thoughts...' }}"></textarea>
            @error('content')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div class="flex justify-end space-x-3">
            @if($isReply)
                <button type="button"
                        wire:click="$dispatch('cancel-reply')"
                        class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
                    Cancel Reply
                </button>
            @endif
            <button type="submit"
                    class="px-4 py-2 bg-blue-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-blue-700">
                {{ $isReply ? 'Post Reply' : 'Post Comment' }}
            </button>
        </div>
    </form>
</div>

Testing & Final Verification

1. Test Commands

# Clear all caches
php artisan optimize:clear

# Run seeders if needed
php artisan db:seed

# Check Livewire components
php artisan route:list

2. Manual Testing Checklist

Verification Checklist

Comment CRUD operations functional
Nested comment system working
Real-time comment management
Admin approval system working
Custom comment components created
Interactive comment features working
Comment forms with validation

Project Summary

What We've Built

Day 1: Docker environment, Git setup, Laravel + Livewire installation
Day 2: Authentication (Sanctum), database migrations, environment setup
Day 3: Seeders, frontend controllers, basic styling with Tailwind CSS
Day 4: Livewire components for blog post CRUD operations
Day 5: Advanced comment system with nested replies and real-time management

Key Features Implemented

Full Docker development environment
Laravel 12 with Livewire 3
User authentication with Laravel Sanctum
Blog post CRUD with admin interface
Advanced comment system with nested replies
Real-time updates and interactions
Responsive design with Tailwind CSS
Admin dashboard with statistics
Comment approval workflow

Next Steps for Extension

Add user profiles and avatars
Implement post categories and tags
Add search functionality
Create email notifications
Add post sharing features
Implement like/dislike system
Add rich text editor
Create REST API endpoints

Congratulations! You've built a complete Laravel blog application with modern features and best practices.

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
app		app
bootstrap		bootstrap
config		config
database		database
docker		docker
public		public
resources		resources
routes		routes
storage		storage
tests		tests
.editorconfig		.editorconfig
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
artisan		artisan
composer.json		composer.json
composer.lock		composer.lock
docker-compose.yml		docker-compose.yml
package-lock.json		package-lock.json
package.json		package.json
phpunit.xml		phpunit.xml
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

Day 5: Livewire Comments CRUD & Custom Components

About Laravel

Learning Laravel

Laravel Sponsors

Premium Partners

Contributing

Code of Conduct

Security Vulnerabilities

License

The Laravel framework is open-sourced software licensed under the MIT license.

Day 1: Git Setup, Docker Configuration & Laravel+Livewire Installation

Duration: 1-2 hours

Objectives

Part 1: Comment Management Components (30 minutes)

1. Create Comment Livewire Components

2. Create CommentManager Component

3. Create CommentSection Component

4. Create CommentItem Component

Part 2: Comment Views (30 minutes)

1. Create CommentManager View

2. Create CommentSection View

3. Create CommentItem View

Part 3: Integration & Final Views (60 minutes)

1. Update Post Show View

2. Create Admin Comments Index

3. Update Routes

4. Update Navigation

5. Create CommentForm Component (Bonus)

Testing & Final Verification

1. Test Commands

2. Manual Testing Checklist

Verification Checklist

Project Summary

What We've Built

Key Features Implemented

Next Steps for Extension

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages