bug fix

README.md

@@ -1,66 +1,20 @@
-<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400" alt="Laravel Logo"></a></p>
+# DevStagram
 
-<p align="center">
-<a href="https://github.com/laravel/framework/actions"><img src="https://github.com/laravel/framework/workflows/tests/badge.svg" alt="Build Status"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
-</p>
+An instagram clone for developers, made with Laravel, Livewire, and Tailwind.
 
-## About Laravel
+## Overview
 
-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:
+![](img/profile.png)
 
-- [Simple, fast routing engine](https://laravel.com/docs/routing).
-- [Powerful dependency injection container](https://laravel.com/docs/container).
-- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
-- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
-- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
-- [Robust background job processing](https://laravel.com/docs/queues).
-- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
+This project was made to learn Laravel and some other components, like Livewire, and Tailwind, this is not a real project, and is not intended for actual use.
 
-Laravel is accessible, powerful, and provides tools required for large, robust applications.
+## Features
 
-## Learning Laravel
+-   Custom Signup and Login
+-   Edit your profile
+-   Upload posts, images are processed with Intervention
+-   Comment system
+-   Like system
+-   Follow, and unfollow system
 
-Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) 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](https://bootcamp.laravel.com), where you will be guided through building a modern Laravel application from scratch.
-
-If you don't feel like reading, [Laracasts](https://laracasts.com) 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](https://partners.laravel.com).
-
-### Premium Partners
-
-- **[Vehikl](https://vehikl.com/)**
-- **[Tighten Co.](https://tighten.co)**
-- **[WebReinvent](https://webreinvent.com/)**
-- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
-- **[64 Robots](https://64robots.com)**
-- **[Curotec](https://www.curotec.com/services/technologies/laravel/)**
-- **[Cyber-Duck](https://cyber-duck.co.uk)**
-- **[DevSquad](https://devsquad.com/hire-laravel-developers)**
-- **[Jump24](https://jump24.co.uk)**
-- **[Redberry](https://redberry.international/laravel/)**
-- **[Active Logic](https://activelogic.com)**
-- **[byte5](https://byte5.de)**
-- **[OP.GG](https://op.gg)**
-
-## Contributing
-
-Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
-
-## Code of Conduct
-
-In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#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](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
-
-## License
-
-The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
+![](img/post.png)

app/Http/Controllers/HomeController.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Post;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controllers\HasMiddleware;
+
+class HomeController extends Controller implements HasMiddleware
+{
+    public static function middleware()
+    {
+        return ["auth"];
+    }
+
+    public function __invoke()
+    {
+        // obtain following users
+        $ids = auth()->user()->following->pluck("id")->toArray();
+        $posts = Post::whereIn("user_id", $ids)->latest()->paginate(24);
+
+        return view("home", [
+            "posts" => $posts
+        ]);
+    }
+}

app/Http/Controllers/PostController.php

@@ -21,7 +21,7 @@ class PostController extends Controller implements HasMiddleware
 
     public function index(User $user, Request $request)
     {
-        $posts = Post::where("user_id", $user->id)->paginate(8);
+        $posts = Post::where("user_id", $user->id)->latest()->paginate(8);
 
         return view("dashboard", [
             "user" => $user,

app/Livewire/LikePost.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class LikePost extends Component
+{
+    public $post;
+    public $isLiked;
+    public $likes;
+
+    public function mount($post)
+    {
+        $this->isLiked = $post->checkLike(auth()->user());
+        $this->likes = $post->likes->count();
+    }
+
+    public function like()
+    {
+        if ($this->post->checkLike(auth()->user())) {
+            $this->post->likes()->where("post_id", $this->post->id)->delete();
+            $this->isLiked = false;
+            $this->likes--;
+        } else {
+            $this->post->likes()->create([
+                "user_id" => auth()->user()->id
+            ]);
+            $this->isLiked = true;
+            $this->likes++;
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.like-post');
+    }
+}

app/View/Components/ListPost.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class ListPost extends Component
+{
+    public $posts;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct($posts)
+    {
+        $this->posts = $posts;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.list-post');
+    }
+}

composer.json

@@ -9,7 +9,8 @@
         "intervention/image": "^3.8",
         "intervention/image-laravel": "^1.3",
         "laravel/framework": "^11.9",
-        "laravel/tinker": "^2.9"
+        "laravel/tinker": "^2.9",
+        "livewire/livewire": "^3.5"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "f9cbbdceee9c9b2ba7cdec7381501a9d",
+    "content-hash": "0fe6c3912adc22dd25a3a80622302be1",
     "packages": [
         {
             "name": "brick/math",
@@ -2034,6 +2034,82 @@
             ],
             "time": "2024-01-28T23:22:08+00:00"
         },
+        {
+            "name": "livewire/livewire",
+            "version": "v3.5.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/livewire/livewire.git",
+                "reference": "597a2808d8d3001cc3ed5ce89a6ebab00f83b80f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/livewire/livewire/zipball/597a2808d8d3001cc3ed5ce89a6ebab00f83b80f",
+                "reference": "597a2808d8d3001cc3ed5ce89a6ebab00f83b80f",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/database": "^10.0|^11.0",
+                "illuminate/routing": "^10.0|^11.0",
+                "illuminate/support": "^10.0|^11.0",
+                "illuminate/validation": "^10.0|^11.0",
+                "laravel/prompts": "^0.1.24",
+                "league/mime-type-detection": "^1.9",
+                "php": "^8.1",
+                "symfony/console": "^6.0|^7.0",
+                "symfony/http-kernel": "^6.2|^7.0"
+            },
+            "require-dev": {
+                "calebporzio/sushi": "^2.1",
+                "laravel/framework": "^10.15.0|^11.0",
+                "mockery/mockery": "^1.3.1",
+                "orchestra/testbench": "^8.21.0|^9.0",
+                "orchestra/testbench-dusk": "^8.24|^9.1",
+                "phpunit/phpunit": "^10.4",
+                "psy/psysh": "^0.11.22|^0.12"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Livewire\\LivewireServiceProvider"
+                    ],
+                    "aliases": {
+                        "Livewire": "Livewire\\Livewire"
+                    }
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/helpers.php"
+                ],
+                "psr-4": {
+                    "Livewire\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Caleb Porzio",
+                    "email": "calebporzio@gmail.com"
+                }
+            ],
+            "description": "A front-end framework for Laravel.",
+            "support": {
+                "issues": "https://github.com/livewire/livewire/issues",
+                "source": "https://github.com/livewire/livewire/tree/v3.5.6"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/livewire",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-08-19T11:52:18+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "3.7.0",

resources/views/components/list-post.blade.php

@@ -0,0 +1,15 @@
+<div>
+    @if ($posts->count())
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            @foreach ($posts as $post)
+                <div>
+                    <a href="{{ route('posts.show', ['post' => $post, 'user' => $post->user]) }}">
+                        <img src="{{ asset('uploads') . '/' . $post->image }}" alt="{{ $post->title }}">
+                    </a>
+                </div>
+            @endforeach
+        </div>
+    @else
+        <p class="text-center">No posts yet. Be the first one!</p>
+    @endif
+</div>

resources/views/dashboard.blade.php

@@ -75,22 +75,6 @@
     <section class="container mx-auto mt-10">
         <h2 class="text-4xl text-center font-black my-10">Posts</h2>
 
-        @if ($posts->count())
-            <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                @foreach ($posts as $post)
-                    <div>
-                        <a href="{{ route('posts.show', ['post' => $post, 'user' => $user]) }}">
-                            <img src="{{ asset('uploads') . '/' . $post->image }}" alt="{{ $post->title }}">
-                        </a>
-                    </div>
-                @endforeach
-            </div>
-
-            <div class="my-10">
-                {{ $posts->links() }}
-            </div>
-        @else
-            <p class="text-gray-600 uppercase text-sm text-center font-bold">No posts yet</p>
-        @endif
+        <x-list-post :posts="$posts" />
     </section>
 @endsection

resources/views/home.blade.php

@@ -3,4 +3,7 @@
 @section('title', 'Main Page')
 
 @section('content')
+
+    <x-list-post :posts="$posts" />
+
 @endsection

resources/views/layouts/app.blade.php

@@ -10,13 +10,15 @@
     @stack('styles')
 
     @vite(['resources/css/app.css', 'resources/js/app.js'])
+
+    @livewireStyles
 </head>
 
 <body class="bg-gray-100">
 
     <header class="p-5 border-b bg-white shadow">
         <div class="container mx-auto flex justify-between items-center">
-            <h1 class="text-3xl font-black">DevStagram</h1>
+            <a href="{{ route('home') }}" class="text-3xl font-black">DevStagram</a>
 
             @auth
                 <nav class="flex gap-2 items-center">
@@ -62,6 +64,8 @@
         DevStagram - {{ date('Y') }} All rights reserved.
     </footer>
 
+    @livewireScripts
+
 </body>
 
 </html>

resources/views/livewire/like-post.blade.php

@@ -0,0 +1,15 @@
+<div>
+    <div class="flex gap-2 items-center">
+        <button wire:click="like">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="{{ $isLiked ? 'red' : 'white' }}" viewBox="0 0 24 24"
+                stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
+            </svg>
+        </button>
+
+        <p class="font-bold">{{ $likes }}
+            <span class="font-normal">Likes</span>
+        </p>
+    </div>
+</div>

resources/views/posts/show.blade.php

@@ -11,40 +11,8 @@
 
             <div class="p-3 flex items-center gap-4">
                 @auth
-
-                    @if ($post->checkLike(auth()->user()))
-                        <form method="POST" action="{{ route('posts.likes.destroy', $post) }}">
-                            @csrf
-                            @method('DELETE')
-                            <div class="my-4">
-                                <button type="submit">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="red" viewBox="0 0 24 24" stroke-width="1.5"
-                                        stroke="currentColor" class="size-6">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </form>
-                    @else
-                        <form method="POST" action="{{ route('posts.likes.store', $post) }}">
-                            @csrf
-                            <div class="my-4">
-                                <button type="submit">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                        stroke-width="1.5" stroke="currentColor" class="size-6">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </form>
-                    @endif
+                    <livewire:like-post :post="$post" />
                 @endauth
-
-                <p class="font-bold">{{ $post->likes->count() }}
-                    <span class="font-normal">Likes</span>
-                </p>
             </div>
 
             <div>

routes/web.php

@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\CommentController;
 use App\Http\Controllers\FollowerController;
+use App\Http\Controllers\HomeController;
 use App\Http\Controllers\ImageController;
 use App\Http\Controllers\LikeController;
 use App\Http\Controllers\LoginController;
@@ -12,9 +13,7 @@ use App\Http\Controllers\SignupController;
 
 use Illuminate\Support\Facades\Route;
 
-Route::get('/', function () {
-    return view('main');
-});
+Route::get('/', HomeController::class)->name("home");
 
 Route::get("/signup", [SignupController::class, "index"])->name("signup");
 Route::post("/signup", [SignupController::class, "store"]);