Laract News Portal

A simple news blog application built with Laravel 11 and React, demonstrating the powerful combination of Laravel backend with React frontend using Inertia.js. This learning project showcases modern fullstack development practices.

📋 Overview

This project was created as a learning exercise to understand how to integrate Laravel 11 with React using Inertia.js. Based on the excellent tutorial by Dea Afrizal, this implementation upgrades the stack to Laravel 11 while maintaining all the core functionality.

✨ Features

• News Management (CRUD)

  • Create news articles with rich content
  • Read news with clean, responsive layout
  • Update existing articles
  • Delete articles with confirmation

• Modern Stack Integration

  • Seamless SPA experience with Inertia.js
  • React components for interactive UI
  • Laravel Breeze for authentication
  • Real-time reactivity without API endpoints

• User Experience

  • Responsive design with Tailwind CSS
  • Fast page transitions
  • No page reloads (SPA behavior)
  • Clean, modern interface

🛠️ Tech Stack

📁 Project Structure

learn-laract-news/
├── app/
│   ├── Http/Controllers/      # Laravel controllers
│   └── Models/                # Eloquent models
├── database/
│   ├── migrations/            # Database migrations
│   └── seeders/              # NewsSeeder.php
├── resources/
│   ├── js/
│   │   ├── Pages/            # React page components
│   │   ├── Components/       # Reusable React components
│   │   └── app.jsx          # React entry point
│   └── css/
│       └── app.css          # Tailwind styles
├── routes/
│   └── web.php              # Inertia routes
└── tailwind.config.js       # Tailwind configuration

🚀 Getting Started

Prerequisites

• PHP 8.2 or higher
• Composer
• Node.js & npm
• MySQL

Installation Steps

1. Clone the Repository

   git clone <repository-url>
   cd learn-laract-news
   

2. Install PHP Dependencies

   composer install
   

3. Install Node Dependencies

   npm install
   

4. Environment Setup

   cp .env.example .env
   php artisan key:generate
   

5. Configure Database

   Create database named laract-news in MySQL, then update .env:

   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=laract-news
   DB_USERNAME=root
   DB_PASSWORD=your_password
   

6. Run Migrations

   php artisan migrate
   

7. Seed Sample Data

   php artisan db:seed --class=NewsSeeder
   

8. Start Development Servers

   Terminal 1 - Frontend:

   npm run dev
   

   Terminal 2 - Backend:

   php artisan serve
   

9. Access Application

   Open browser: http://localhost:8000

💻 Usage

Viewing News

• Homepage displays all news articles
• Click on article to read full content
• Responsive grid layout

Managing News (Admin)

1. Register/Login to access admin features
2. Navigate to "Create News"
3. Fill in article details:
   • Title
   • Content
   • Author
   • Category
   • Featured image
4. Submit to publish

Editing News

1. Click "Edit" on any article (admin only)
2. Modify content as needed
3. Save changes

Deleting News

1. Click "Delete" button
2. Confirm deletion
3. Article removed from database

🎓 Learning Objectives

This project teaches:

Frontend (React + Inertia)

• React component composition
• Inertia.js page components
• Form handling with Inertia
• Client-side routing
• State management

Backend (Laravel)

• Laravel 11 features
• Inertia responses
• CRUD operations
• Database relationships
• File uploads
• Authentication with Breeze

Full Stack Integration

• Passing data from Laravel to React
• Form submissions without API
• Shared data across components
• Flash messages and notifications

🔧 Configuration

Inertia Setup

The app is configured to use Inertia.js for seamless integration:

// Controller example
use Inertia\Inertia;

public function index()
{
    return Inertia::render('News/Index', [
        'news' => News::all()
    ]);
}

React Component Example

// resources/js/Pages/News/Index.jsx
import React from 'react';
import { Head, Link } from '@inertiajs/react';

export default function Index({ news }) {
    return (
        <>
            <Head title="News" />
            <div className="grid grid-cols-3 gap-4">
                {news.map(article => (
                    <div key={article.id} className="p-4 border">
                        <h2>{article.title}</h2>
                        <p>{article.excerpt}</p>
                        <Link href={`/news/${article.id}`}>
                            Read More
                        </Link>
                    </div>
                ))}
            </div>
        </>
    );
}

📡 API vs Inertia

Unlike traditional SPAs, this project doesn't use a separate API:

• No API endpoints needed
• No Axios/Fetch calls
• Direct controller to component data flow
• Automatic CSRF protection

🎨 Styling

Tailwind CSS is configured and ready:

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <h1 className="text-3xl font-bold text-gray-900">
    News Portal
  </h1>
</div>

🐛 Troubleshooting

Vite not running?

npm run dev

Inertia version mismatch?

composer update inertiajs/inertia-laravel
npm install @inertiajs/react@latest

CSS not loading?

npm run build
php artisan optimize:clear

🙏 Acknowledgments

This project is based on the tutorial by Dea Afrizal:

• Original repo: laract9-crud-basic-portal-berita
• YouTube channel for tutorials

Big thanks to Dea Afrizal for the excellent learning resources! 🙏

Differences from Original

• Upgraded to Laravel 11 (original used Laravel 9)
• Updated React to version 19
• Modern Vite configuration
• Latest Breeze implementation
• Enhanced Tailwind setup

📚Resources

• Laravel Documentation
• React Documentation
• Inertia.js Documentation
• Tailwind CSS Documentation
• Dea Afrizal's Tutorial

🤝 Contributing

This is a learning project. Feel free to fork and experiment!

📄 License

Open source - available for educational purposes.

Happy Learning! 📚✨
Built while learning Laravel + React with Inertia.js