frontend sample page | Manga Model

app/Http/Controllers/MangaController.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\StoreMangaRequest;
+use App\Http\Requests\UpdateMangaRequest;
+use App\Models\Manga;
+
+class MangaController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(StoreMangaRequest $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Manga $manga)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(Manga $manga)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(UpdateMangaRequest $request, Manga $manga)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Manga $manga)
+    {
+        //
+    }
+}

app/Http/Requests/StoreMangaRequest.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreMangaRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array|string>
+     */
+    public function rules(): array
+    {
+        return [
+            //
+        ];
+    }
+}

app/Http/Requests/UpdateMangaRequest.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateMangaRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array|string>
+     */
+    public function rules(): array
+    {
+        return [
+            //
+        ];
+    }
+}

app/Models/Manga.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Manga extends Model
+{
+    use HasFactory;
+}

app/Policies/MangaPolicy.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\Manga;
+use App\Models\User;
+use Illuminate\Auth\Access\Response;
+
+class MangaPolicy
+{
+    /**
+     * Determine whether the user can view any models.
+     */
+    public function viewAny(User $user): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can view the model.
+     */
+    public function view(User $user, Manga $manga): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can create models.
+     */
+    public function create(User $user): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can update the model.
+     */
+    public function update(User $user, Manga $manga): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can delete the model.
+     */
+    public function delete(User $user, Manga $manga): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can restore the model.
+     */
+    public function restore(User $user, Manga $manga): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can permanently delete the model.
+     */
+    public function forceDelete(User $user, Manga $manga): bool
+    {
+        //
+    }
+}

database/factories/MangaFactory.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Manga>
+ */
+class MangaFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            //
+        ];
+    }
+}

database/migrations/2023_08_23_114850_create_mangas_table.php

@@ -0,0 +1,27 @@
+<?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('mangas', function (Blueprint $table) {
+            $table->id();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('mangas');
+    }
+};

database/seeders/MangaSeeder.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class MangaSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        //
+    }
+}

package-lock.json

@@ -4,10 +4,13 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "bootstrap-icons": "^1.10.5"
+            },
             "devDependencies": {
                 "@popperjs/core": "^2.11.6",
-                "axios": "^1.1.2",
+                "axios": "^1.4.0",
-                "bootstrap": "^5.2.3",
+                "bootstrap": "^5.3.1",
                 "laravel-vite-plugin": "^0.8.0",
                 "sass": "^1.56.1",
                 "vite": "^4.0.0"
@@ -433,6 +436,21 @@
                 "@popperjs/core": "^2.11.8"
             }
         },
+        "node_modules/bootstrap-icons": {
+            "version": "1.10.5",
+            "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz",
+            "integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/twbs"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/bootstrap"
+                }
+            ]
+        },
         "node_modules/braces": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -795,9 +813,9 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.66.1",
+            "version": "1.56.1",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.1.tgz",
-            "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+            "integrity": "sha512-VpEyKpyBPCxE7qGDtOcdJ6fFbcpOM+Emu7uZLxVrkX8KVU/Dp5UF7WLvzqRuUhB6mqqQt1xffLoG+AndxTZrCQ==",
             "dev": true,
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -808,7 +826,7 @@
                 "sass": "sass.js"
             },
             "engines": {
-                "node": ">=14.0.0"
+                "node": ">=12.0.0"
             }
         },
         "node_modules/source-map-js": {

package.json

@@ -7,10 +7,13 @@
     },
     "devDependencies": {
         "@popperjs/core": "^2.11.6",
-        "axios": "^1.1.2",
+        "axios": "^1.4.0",
-        "bootstrap": "^5.2.3",
+        "bootstrap": "^5.3.1",
         "laravel-vite-plugin": "^0.8.0",
         "sass": "^1.56.1",
         "vite": "^4.0.0"
+    },
+    "dependencies": {
+        "bootstrap-icons": "^1.10.5"
     }
 }

resources/sass/_variables.scss

@@ -5,3 +5,4 @@ $body-bg: #f8fafc;
 $font-family-sans-serif: 'Nunito', sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
+

resources/sass/app.scss

@@ -4,5 +4,37 @@
 // Variables
 @import 'variables';
 
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;600;800&display=swap');
+
+ * {
+    font-family: 'Poppins', sans-serif;
+ }
+
+ // Bootstrap Icons
+ @import url('bootstrap-icons');
+
+ // Variables
+// @import 'variables';
+
 // Bootstrap
 @import 'bootstrap/scss/bootstrap';
+@import "../../node_modules/bootstrap/scss/functions";
+
+
+// Required
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/root";
+
+
+
+
+$custom-colors:(
+    'lightGrey' : #ebebeb,
+    'grey' : #7b7b7b
+);
+
+// Merge the maps
+$theme-colors : map-merge($theme-colors, $custom-colors);

resources/views/index.blade.php

@@ -0,0 +1,82 @@
+@extends('layouts.master')
+
+
+@section('content')
+    <div class="row mt-5">
+        <div class="col-12 col-md-9">
+            <div class="row justify-content-center flex-wrap">
+                <div class="col-6 col-md-3">
+                    <div class="card border-0">
+                        <div class="text-center">
+                            <img src="{{ asset('img/sample.jpg') }}" alt="img" class="w-100  ">
+                        </div>
+                        <div class="mt-2">
+                            <h5 class="fw-semibold ">The Villainous Desciple</h5>
+                            <div class="d-flex justify-content-between flex-wrap mb-1">
+                                <a href=""
+                                    class="text-decoration-none text-white bg-secondary rounded-pill py-0 px-2">Chapter
+                                    5</a>
+                                <span class=" fs-6">5 mins ago</span>
+                            </div>
+                            <div class="d-flex justify-content-between flex-wrap mb-1">
+                                <a href=""
+                                    class="text-decoration-none text-white bg-secondary rounded-pill py-0 px-2">Chapter
+                                    4</a>
+                                <span class=" fs-6">4 mins ago</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3">
+                    <div class="card border-0">
+                        <div class="text-center">
+                            <img src="{{ asset('img/sample.jpg') }}" alt="img" class="w-100  ">
+                        </div>
+                        <div class="mt-2">
+                            <h5 class="fw-semibold ">The Villainous Desciple</h5>
+                            <div class="d-flex justify-content-between flex-wrap mb-1">
+                                <a href=""
+                                    class="text-decoration-none text-white bg-secondary rounded-pill py-0 px-2">Chapter
+                                    5</a>
+                                <span class=" fs-6">5 mins ago</span>
+                            </div>
+                            <div class="d-flex justify-content-between flex-wrap mb-1">
+                                <a href=""
+                                    class="text-decoration-none text-white bg-secondary rounded-pill py-0 px-2">Chapter
+                                    4</a>
+                                <span class=" fs-6">4 mins ago</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3">dfg</div>
+                <div class="col-6 col-md-3">gdfg</div>
+            </div>
+        </div>
+        <div class="col-12 col-md-3">
+            <h4 class="fw-semibold">Manga Hot</h4>
+            <div class="row">
+                <div class="col-12 mt-3">
+                    <div class="d-flex align-items-start border-0">
+                        <img src="{{ asset('img/sample.jpg') }}" alt="img" style="width: 80px">
+                        <div class="ms-2">
+                            <p class="fw-semibold mb-1">The Villainous Desciple</p>
+                            <div class="d-flex justify-content-between flex-wrap mb-2">
+                                <a href=""
+                                    class="text-decoration-none text-white fs-6 bg-secondary rounded-pill px-1">Chapter
+                                    5</a>
+                                <span class=" fs-6">5 mins ago</span>
+                            </div>
+                            <div class="d-flex justify-content-between flex-wrap mb-2">
+                                <a href=""
+                                    class="text-decoration-none text-white fs-6 bg-secondary rounded-pill px-1">Chapter
+                                    4</a>
+                                <span class=" fs-6">4 mins ago</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection

resources/views/layouts/master.blade.php

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>{{ config('app.name', 'MangaDex') }}</title>
+
+    <!-- Css -->
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
+</head>
+
+<body>
+        <!-- Header Here -->
+        @include('partials.nav')
+
+        <!-- Content Here -->
+        <div class="main container">
+            @yield('content')
+        </div>
+
+
+
+</body>
+
+</html>

resources/views/partials/nav.blade.php

@@ -0,0 +1,28 @@
+<nav class="navbar navbar-expand-lg bg-primary py-3">
+    <div class="container">
+        <a class="navbar-brand" href="#">MangaDex</a>
+
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="#">HOME</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">CONTACT US</a>
+                </li>
+
+            </ul>
+            <form class="d-flex" role="search">
+                <div class="input-group">
+                    <input class="form-control" type="search" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-dark" type="submit"> <i class="bi bi-search"></i> </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</nav>

routes/web.php

@@ -1,5 +1,6 @@
 <?php
 
+use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -14,9 +15,10 @@ use Illuminate\Support\Facades\Route;
 */
 
 Route::get('/', function () {
-    return view('welcome');
+    return view('index');
 });
 
 Auth::routes();
 
 Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
+