Laravel 12 ReactJS Starter Kit: Build a Multi-Language Blog (Arabic, English, Spanish)

Building modern web applications that cater to a global audience has never been easier. With the Laravel 12 + ReactJS Starter Kit, you can jump-start your project with multi-language support, featuring Arabic, English, and Spanish languages—all in one cohesive package. This starter kit combines the powerful backend of Laravel with the dynamic frontend capabilities of ReactJS and Inertia.js to create a full-fledged blog CRUD application with a host of advanced features.

View Project Now

Why Multi-Language Support Matters

In today’s interconnected world, reaching out to users in their native language is key to delivering a personalized experience. This starter kit enables you to:

Expand your audience: Support Arabic, English, and Spanish to reach a diverse group of users.
Enhance user engagement: By providing content in a language your visitors are comfortable with, you build trust and ease of navigation.
Simplify development: With pre-built translation files and middleware, adding and managing languages becomes straightforward.

Key Features of the Starter Kit

1. Multi-Language Translation Files

The project comes with dedicated language files for Arabic, English, and Spanish. For each language, you have separate files like messages.php and validation.php stored under /lang/{locale}. This structure makes it easy to:

Update UI text and validation messages.
Ensure consistency across the application.

Example File Structure:

/lang/ar
   ├─ messages.php
   └─ validation.php
/lang/en
   ├─ messages.php
   └─ validation.php
/lang/es
   ├─ messages.php
   └─ validation.php

2. Custom Middleware for Locale Management

The starter kit includes a SetLocale middleware, which dynamically sets the application language based on the user session. It also loads translations into Inertia.js, making them accessible in your React components.

Key Code Snippet:

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\App;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Lang;
use Inertia\Inertia;
use Symfony\Component\HttpFoundation\Response;

class SetLocale
{
    public function handle(Request $request, Closure $next): Response
    {
        $locale = Session::get('locale', config('app.locale'));
        App::setLocale($locale);
        $translations = [];
        $langPath = base_path("lang/{$locale}");

        if (File::exists($langPath)) {
            foreach (File::allFiles($langPath) as $file) {
                $filename = pathinfo($file, PATHINFO_FILENAME);
                $translations[$filename] = Lang::get($filename);
            }
        }

        $locales = [
            'en' => 'English',
            'ar' => 'Arabic',
            'es' => 'Spanish',
        ];

        Inertia::share('translations', $translations);
        Inertia::share('locale', $locale);
        Inertia::share('locales', $locales);

        return $next($request);
    }
}

This middleware:

Sets the locale based on session data.
Loads and shares translation files with the front end.
Provides a list of supported locales.

3. Frontend Integration with ReactJS

On the React side, integrating translations is a breeze. With a custom hook (e.g., useTranslations), you can access and render translated strings effortlessly:

Example Usage in a React Component (PostShow.tsx):

import { useTranslations } from '@/hooks/useTranslations';

const PostShow = () => {
  const { t } = useTranslations();
  
  return (
    <div>
      <h1>{t('messages.home')}</h1>
      {/* Additional content */}
    </div>
  );
};

export default PostShow;

For right-to-left languages like Arabic, you simply adjust the text direction in your Blade layout:

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">

4. Comprehensive Blog CRUD Features

The blog system in the starter kit includes:

Creating a Blog Post:
- Route and Form: Access the Create Post page at /posts/create.
- Rich Text Editor: Integrated with React Quill to allow formatted content creation.
- Image Upload: Easily upload images using Laravel’s Storage facade.
- Language Selection: A dropdown lets users choose the post language.
- Slug Generation: Automatically generate SEO-friendly slugs using Laravel’s string helper.
Editing a Blog Post:
- Edit Page: Pre-populated forms allow seamless editing.
- Dynamic Language Field: Automatically shows the post’s current language.
Viewing Blog Posts:
- Home Page Display: Posts are presented in a clean grid layout with thumbnails and excerpts.
- Detailed View: Users can click "Read More" to view the full content with HTML rendered correctly.

5. Customization and Extensibility

The kit isn’t just a one-trick pony—it’s designed to be your launchpad:

Add New Languages: Simply add new translation files and update the middleware.
Tailwind CSS Integration: Customize the design with Tailwind’s utility-first CSS framework.
Extend Functionality: Easily extend controllers and models to add new features as your project grows.

Getting Started

Setting up the project is simple:

Download & Extract:
- Purchase and download the ZIP from Kritimyantra.
- Extract the contents; the package includes a preconfigured .env file and a sample SQLite database.
Install Dependencies:
- Run composer install for PHP dependencies.
- Run npm install for frontend packages.
Run the Project:
- Compile assets using npm run dev (powered by Vite).
- Start the Laravel development server with php artisan serve.
- Visit http://localhost:8000 to see your multi-language blog in action.

Conclusion

The Laravel 12 + ReactJS Starter Kit is a powerful, feature-rich solution for developers who want to build multi-language blogs quickly and efficiently. Whether you’re targeting a global audience or looking to support right-to-left languages like Arabic, this starter kit provides all the tools you need—from translation management to advanced blog CRUD operations.

Don’t miss out on this opportunity to streamline your development process and launch your multi-lingual project with confidence.

Buy the Project Now

Happy coding!