Review App Using Laravel 11 & Vue js 3 Composition API Part 1

4 months ago admin Vuejs

In this tutorial, we will create a review app using Laravel 11 & Vue js 3 Composition API, the user will browse products, and then he can add update, and delete his reviews, you can find the source code here and the tutorial in my youtube channel here.


Create the product migration

First, create a Product Model and a Migration and add the code below in the migration:

                                                    
                                                                                                                
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('desc');
            $table->integer('price');
            $table->string('image');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};


Create the review migration

Next, create the Review Model and a Migration and add the code below in the migration:

                                                        
                                                                                                                        
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('reviews', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->longText('body');
            $table->integer('rating');
            $table->foreignId('product_id')->constrained()->cascadeOnDelete();
            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('reviews');
    }
};


Create the product factory

Next, let's create a product factory and add the code below inside:

                                                        
                                                                                                                        
<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Product>
 */
class ProductFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'name' => fake()->word(),
            'desc' => fake()->paragraph(),
            'price' => fake()->numberBetween(1,1000),
            'image' => fake()->imageUrl(640,480),
        ];
    }
}


Create the product seeder

Next, let's create a product seeder and add the code below inside:

                                                        
                                                                                                                        
<?php

namespace Database\Seeders;

use App\Models\Product;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class ProductSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        //
        Product::factory(20)->create();
    }
}


Seed the database

Next, let's seed the database and create 20 products update the file 'DatabaseSeeder.php' add the code below inside, and run the command:

php artisan db:seed

                                                        
                                                                                                                        
<?php

namespace Database\Seeders;

use App\Models\User;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        User::factory(10)->create();
        $this->call([
            ProductSeeder::class,
        ]);
    }
}

Related Tuorials

How to Persist Data in the Pinia Store

In this lesson, we will see how to persist data in the Pinia store.When working with Pinia...


How to Reset the File input Field in Vue js

In this lesson, we will see how to reset the file input field in Vue js.When uploading files using V...


Review App Using Laravel 11 & Vue js 3 Composition API Part 5

In the last part of this tutorial, we will display the reviews list of each product, add the ability...


Review App Using Laravel 11 & Vue js 3 Composition API Part 4

In the fourth part of this tutorial, we will fetch and display all the products on the home page, vi...


Review App Using Laravel 11 & Vue js 3 Composition API Part 3

In the third part of this tutorial, we will start coding the front end, first, we will install the p...


Review App Using Laravel 11 & Vue js 3 Composition API Part 2

In the second part of this tutorial, we will create the product and review controllers, and later we...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 5

In the final part of this tutorial, we will display the cart items, add the ability to increment/dec...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 4

In the fourth part of this tutorial, we will fetch and display all the products, and add the store w...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 3

In the third part of this tutorial, we will move to the front end, we will install the packages...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 2

In the second part of this tutorial, we will create the product and order controllers, add the...