Forem: J-Sandaruwan

Master Your Laravel Queues: Introducing Laravel Job Monitor

J-Sandaruwan — Sun, 01 Feb 2026 19:04:08 +0000

Monitoring background jobs in Laravel has always been a bit of a challenge. While Laravel Horizon is fantastic for Redis, many developers working with database, SQS, or other drivers often find themselves flying blind. Even with Horizon, getting a detailed execution history and real-time progress for specific jobs isn't always straightforward.

That's why I'm excited to share my first Laravel package: Laravel Job Monitor.

I built this package to solve a specific problem: providing a lightweight, driver-agnostic way to track, monitor, and manage queue jobs with almost zero configuration.

What is Laravel Job Monitor?

laravel-job-monitor is a lightweight package that automatically hooks into Laravel's queue system to track every job that enters your system. Whether it's processing, completed, or failed, you get a full audit trail including runtimes, attempt counts, and detailed error logs.

Key Features

1. Automatic "Zero-Touch" Tracking

The beauty of this package is that it requires no code changes to your existing jobs. Once installed, it listens to standard queue events and starts logging history immediately.

2. Real-Time Progress Tracking

Have a long-running job like a video export or a massive data import? You can now track progress from 0 to 100% using a simple trait:

use JSandaruwan\LaravelJobMonitor\Traits\TracksJobProgress;

class MassiveImportJob implements ShouldQueue
{
    use TracksJobProgress;

    public function handle()
    {
        $this->updateProgress(10); // 10% complete

        // ... heavy lifting ...

        $this->updateProgress(90); // 90% complete
    }
}

3. Built-in REST API

Integration is at the heart of this package. It comes with pre-built, configurable API endpoints so you can easily build your own dashboard or integrate job status into your existing admin panel.

GET /api/job-monitor/jobs – List with advanced filtering (status, queue, date, etc.)
GET /api/job-monitor/jobs/stats – Overview of your queue health.
POST /api/job-monitor/jobs/{id}/retry – One-tap retry for failed jobs.

4. Zero Dependencies

Keep your vendor folder light! The package doesn't require any external monitoring services or heavy third-party assets. It uses your existing database to store history.

Why I Built It

In many projects, I found myself manually creating "activity_logs" or "job_statuses" tables just to see why a particular background job was taking so long or why it failed for a specific user. I wanted a standardized way to handle this across all my Laravel projects—and hopefully, it helps you too!

Getting Started

You can install it today via Composer:

composer require j-sandaruwan/laravel-job-monitor

Then simply publish the config and run migrations:

php artisan vendor:publish --provider="JSandaruwan\LaravelJobMonitor\JobMonitorServiceProvider"
php artisan migrate

And that's it! Your jobs are now being monitored.

What's Next?

This is just the beginning. I'm planning to add more features like:

A built-in, ready-to-use Blade dashboard.
Support for job batching progress.
Custom notification triggers for failed jobs (Slack/Discord).

Check out the source code on GitHub and feel free to open an issue or PR. If you find it useful, a ⭐️ on GitHub would mean the world to me for my first package!

Happy coding! 🚀

Thank you,
Janith Sandaruwan.
linkedin

How to Manage Plugin Dependencies in Nuxt 3

J-Sandaruwan — Sun, 02 Nov 2025 14:46:09 +0000

Understanding the Issue

In a Nuxt 3 application, plugins are used to extend the application by injecting functionalities such as services, utilities, or initializing features during app startup.

When you have:

Plugin for Task A: A plugin that performs a certain task asynchronously (e.g., fetching data, setting up configuration).
Plugin for Task B: Another plugin that needs Task A to be fully completed before it runs.

If there is no enforced order or dependency management between these two plugins, you face an issue:

Plugin B might execute before Task A is finished.
This can cause problems if Task B relies on some side effects, data, or setup done by Task A.

This happens because Nuxt by default loads plugins based on their order in the directory or filename, but it does not wait for async plugins to finish before loading the next unless explicitly told.

Why Order or Dependency Matters

When your plugins involve asynchronous initialization (like API calls, authentication, or complex config loading), task order becomes critical. For example:

Task A might be an API token fetch.
Task B uses that API token for further calls or setups.

If Task B starts too early, it sees no token and fails.

How Nuxt 3 Handles Plugins

Nuxt 3 introduced features in the plugin system for better control:

Plugins are executed in the order of discovery, which you can influence by file naming.
Plugins can be asynchronous by returning or awaiting promises inside the setup function.
Plugins can declare dependencies on other plugins using the dependsOn attribute.

Step-by-Step Explanation to Fix

1. Naming Plugins for Order

The simplest form of ordering is in the filesystem:

Name Plugin A file as 01-plugin-a.js
Name Plugin B file as 02-plugin-b.js

This ordering tells Nuxt to load Plugin A before Plugin B.

2. Use Async `setup` Hook

Let Plugin A's setup wait for async tasks to complete:

export default defineNuxtPlugin({
  name: 'plugin-a',
  async setup(nuxtApp) {
    // simulate async task
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('Task A completed');
  },
});

3. Declare Dependency with `dependsOn`

Tell Plugin B it depends on Plugin A like this:

export default defineNuxtPlugin({
  name: 'plugin-b',
  dependsOn: ['plugin-a'],
  async setup(nuxtApp) {
    console.log('Task B running after Task A');
  },
});

Nuxt will guarantee that Plugin A finishes (including waiting for async setup to complete) before Plugin B runs. The dependsOn option is vital for explicit dependency management and protecting against loading surprises.

What Happens Under the Hood?

Nuxt collects all plugins and figures out their dependencies.
It sorts and runs them in dependency order.
For async plugins, it waits for the setup function's promise to resolve.
Only after Plugin A's setup is fully completed, Plugin B's setup starts.

Benefits of This Approach

Reliability: You won’t face race conditions or errors related to incomplete initialization.
Maintainability: Explicit dependencies are documented inside plugins themselves.
Scalability: Works well as the number of plugins grows and interdependencies increase.
Async Support: Fits well with modern asynchronous workflows such as API calls or dynamic config loading.

Real-World Use Cases

Authentication plugin that fetches and sets a user token.
Analytics plugin that needs the user session from authentication.
Feature flag plugin that depends on configuration setup by another plugin.
Localization setup plugin that relies on a backend service initialized in an earlier plugin.

Summary: How to Fix Your Issue in Vue 3 Nuxt 3

Make sure Plugin A runs before Plugin B. You can do this by:
- Naming plugin files in a sequence like 01- and 02-.
- Using the dependsOn: ['plugin-a'] property in Plugin B.
Make Plugin A's setup async and await any required asynchronous tasks.
Nuxt will handle running Plugin B only after Plugin A is completed.
This resolves dependency issues and ensures Task B runs with Task A's context fully ready.

Thank you,
Janith Sandaruwan.
linkedin

How to Use TipTap Editor with Vue 3

J-Sandaruwan — Fri, 31 Oct 2025 04:55:52 +0000

TipTap is a modern, headless rich text editor framework built on ProseMirror, designed for developers who want to create highly customizable editing experiences. It integrates seamlessly with Vue 3, making it a popular choice for building custom editors in modern web applications.

Getting Started with TipTap in Vue 3

Install Dependencies

   npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit

Create a TipTap Component Create a new file, e.g., components/Tiptap.vue, and add the following code:

   <template>
     <editor-content :editor="editor" />
   </template>

   <script setup>
   import { useEditor, EditorContent } from '@tiptap/vue-3'
   import StarterKit from '@tiptap/starter-kit'

   const editor = useEditor({
     content: '<p>I\'m running Tiptap with Vue.js. 🎉</p>',
     extensions: [StarterKit],
   })
   </script>

Add the Component to Your App In your App.vue:

   <template>
     <div id="app">
       <Tiptap />
     </div>
   </template>

   <script>
   import Tiptap from './components/Tiptap.vue'

   export default {
     components: { Tiptap },
   }
   </script>

Optional: Use v-model for Two-Way Binding TipTap supports v-model for binding editor content to your data, making it easy to integrate with forms and reactive data.

Pros and Cons of TipTap

Pros

Highly Customizable: TipTap is headless, meaning you can build any UI on top of it and tailor the editor to your needs.
Extensible: Over 100 extensions are available, and you can create your own.
Open Source: The core editor is free and open source, making it accessible for small projects and startups.
Modern Framework: Built for modern web development, with strong Vue 3 support.

Cons

Steeper Learning Curve: Requires more setup and configuration compared to out-of-the-box editors.
Limited Built-in Features: Many advanced features (like collaboration, AI, or export) require paid plans or custom development.
Community Support: While growing, the community is smaller than some alternatives.

TipTap vs TinyMCE: Feature and Pricing Comparison

Feature	TinyMCE	TipTap
Basic Editing	Excellent	Good
Advanced Features	Extensive plugins	Extensible via extensions
Collaboration	Built-in	Requires setup
Accessibility	Excellent	Good
Customization	High	Very High
Pricing	Paid (from $25/mo)	Freemium (Free plan, paid from $149/mo)
Ease of Use	Easy	Moderate

TinyMCE is a mature, feature-rich editor with a polished UI and extensive plugin ecosystem. It’s ideal for teams needing advanced features out of the box, but it’s paid (from $25/month).
TipTap is free for basic use, but advanced features and collaboration require paid plans (starting at $149/month). It’s best for developers who want to build custom editors and have the resources to invest in setup and customization.

Conclusion

TipTap is a powerful, flexible editor for Vue 3, especially suited for developers who want to build custom editing experiences. While it requires more setup than TinyMCE, its open-source core and extensibility make it a great choice for projects where customization is key. For teams needing advanced features and collaboration out of the box, TinyMCE may be a better fit, but it comes at a higher price.

Thank you,
Janith Sandaruwan.
linkedin

Laravel + Vue 3: The Perfect Stack for Modern Web Apps

J-Sandaruwan — Tue, 21 Oct 2025 05:55:59 +0000

Developers today look for frameworks that combine stability, speed, and flexibility. That’s why Laravel and Vue 3 have become the dream duo, Laravel handling secure, structured APIs and Vue 3 offering a reactive, modern frontend. The best part? You can separate both projects for cleaner architecture, better scalability, and easier deployment.

Why Use Separate Projects?

Separating Laravel and Vue 3 projects creates a decoupled architecture:

Laravel focuses solely on API development and backend logic.
Vue handles user interaction and view rendering.
Teams can develop and deploy each independently without breaking others.
Better scalability for microservice or multi-frontend ecosystems.

This approach mirrors modern best practices in API-driven development creating isolated, versioned services that are reusable across multiple frontends.

Step-by-Step Integration Example

1. Set Up Laravel API

Create a new Laravel backend:

composer create-project laravel/laravel laravel-api
cd laravel-api
php artisan serve

Now, define a simple route in
routes/api.php:

use Illuminate\Support\Facades\Route;

Route::get('/posts', function () {
    return response()->json([
        ['id' => 1, 'title' => 'Hello Vue!'],
        ['id' => 2, 'title' => 'Powered by Laravel API!'],
    ]);
});

Run your backend at http://localhost:8000/api/posts.
Your Laravel app now acts as a pure API backend serving JSON responses.

2. Create a Vue 3 Project

In a separate directory:

npm init vue@latest vue-frontend
cd vue-frontend
npm install
npm run dev

Then install Axios for API consumption:

npm install axios

Create a component src/components/PostList.vue:

<template>
  <div>
    <h2>Latest Posts</h2>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const posts = ref([])

onMounted(async () => {
  const res = await axios.get('http://localhost:8000/api/posts')
  posts.value = res.data
})
</script>

Now mount this component in src/App.vue:

<template>
  <main>
    <PostList />
  </main>
</template>

<script setup>
import PostList from './components/PostList.vue'
</script>

Your Vue frontend will run on http://localhost:5173 or similar.
Accessing it will fetch data dynamically from the Laravel API.

Best Practices for Laravel + Vue Integration

1. Use API-First Design

Design your Laravel routes solely for API consumption. Never mix Blade templates in this setup. Follow REST conventions (e.g., /api/posts, /api/users/{id}).

Then add in app/Http/Kernel.php and configure config/cors.php.

2. Use Axios or Fetch for Client API Calls

Keep all HTTP requests centralized in a services/ folder in your Vue project.
Example: services/api.js

import axios from 'axios'
export const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api',
})

3. Secure Routes with Sanctum or Passport

Use Laravel Sanctum for SPA token authentication lightweight, secure, and easy to integrate.

4. Modularize and Version APIs

For large projects, prefix routes with API versions:
/api/v1/posts, /api/v2/posts ensuring backward compatibility.

5. Use .env for URL Management

In Vue, store the API base URL in .env:

VITE_API_URL=http://localhost:8000/api

Then reference it via:

import.meta.env.VITE_API_URL

Pros of a Decoupled Setup

Aspect	Benefit	Example
Scalability	Backend and frontend can scale independently	Deploy Laravel API on AWS, Vue on Netlify
Team Workflow	Separate backend/frontend teams	Parallel development without merge conflicts
Performance	Lighter payloads via JSON APIs	Faster SPA loading with Vue 3
Maintainability	Clear separation of logic	Easier upgrades (Laravel v12 / Vue v3+)

Final Thoughts

Laravel and Vue 3 represent the perfect mix of elegance and power for modern applications. Running them as two separate projects helps maintain scalability and clarity while enabling rapid development.

If you’re starting a full-stack product today*use Laravel for APIs, Vue 3 for the interface*, and you’ll have a stack that’s clean, async-friendly, and future-ready.

Thank you,
Janith Sandaruwan.
linkedin

Building Chrome Extensions: React vs Next.js - My Experience

J-Sandaruwan — Mon, 28 Jul 2025 06:13:45 +0000

After building several Chrome extensions using both React and Next.js, I've learned that while both can work, they serve very different use cases. Here's my technical breakdown of when and how to use each approach.

The Core Difference

React gives you complete control over the build process and is naturally suited for Chrome extensions. Next.js is a full-stack framework that requires significant workarounds to fit into the extension architecture.

React Approach: The Natural Fit

my-extension/
├── public/
│   ├── manifest.json
│   ├── icons/
│   └── content.css
├── src/
│   ├── popup/
│   │   ├── Popup.jsx
│   │   └── index.js
│   ├── content/
│   │   ├── ContentScript.jsx
│   │   └── index.js
│   ├── background/
│   │   └── background.js
│   └── options/
│       ├── Options.jsx
│       └── index.js
├── webpack.config.js
└── package.json

Webpack Configuration


const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    popup: './src/popup/index.js',
    content: './src/content/index.js',
    background: './src/background/background.js',
    options: './src/options/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'public', to: '.' }
      ]
    })
  ]
};

Manifest.json

{
  "manifest_version": 3,
  "name": "My React Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab"]
}

Real Example: Popup Component

// src/popup/Popup.jsx
import React, { useState, useEffect } from 'react';

const Popup = () => {
  const [currentUrl, setCurrentUrl] = useState('');
  const [savedUrls, setSavedUrls] = useState([]);

  useEffect(() => {
    // Get current tab URL
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      setCurrentUrl(tabs[0].url);
    });

    // Load saved URLs
    chrome.storage.sync.get(['savedUrls'], (result) => {
      setSavedUrls(result.savedUrls || []);
    });
  }, []);

  const saveUrl = () => {
    const newUrls = [...savedUrls, currentUrl];
    setSavedUrls(newUrls);
    chrome.storage.sync.set({ savedUrls: newUrls });
  };

  return (
    <div style={{ width: '300px', padding: '20px' }}>
      <h3>URL Bookmarker</h3>
      <p>Current: {currentUrl}</p>
      <button onClick={saveUrl}>Save URL</button>
      <div>
        <h4>Saved URLs:</h4>
        {savedUrls.map((url, index) => (
          <div key={index} style={{ marginBottom: '8px' }}>
            <a href={url} target="_blank" rel="noopener noreferrer">
              {url.substring(0, 50)}...
            </a>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Popup;

Content Script Integration

// src/content/ContentScript.jsx
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

const FloatingWidget = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [selectedText, setSelectedText] = useState('');

  useEffect(() => {
    const handleSelection = () => {
      const selection = window.getSelection().toString();
      if (selection) {
        setSelectedText(selection);
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    document.addEventListener('mouseup', handleSelection);
    return () => document.removeEventListener('mouseup', handleSelection);
  }, []);

  if (!isVisible) return null;

  return (
    <div style={{
      position: 'fixed',
      top: '20px',
      right: '20px',
      background: 'white',
      border: '1px solid #ccc',
      borderRadius: '8px',
      padding: '16px',
      zIndex: 10000,
      boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
    }}>
      <h4>Selected Text</h4>
      <p>{selectedText}</p>
      <button onClick={() => setIsVisible(false)}>Close</button>
    </div>
  );
};

// Inject the component
const container = document.createElement('div');
document.body.appendChild(container);
const root = createRoot(container);
root.render(<FloatingWidget />);

Next.js Approach: Fighting the Framework

The Challenge

Next.js is designed for server-side rendering and full-stack applications, not browser extensions. You'll need extensive configuration changes.

Modified next.config.js

```javascript/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
trailingSlash: true,
skipTrailingSlashRedirect: true,
distDir: 'dist',
images: {
unoptimized: true
},
webpack: (config, { isServer }) => {
if (!isServer) {
// Disable code splitting for extensions
config.optimization.splitChunks = false;
config.optimization.runtimeChunk = false;

  // Multiple entry points for extension components
  config.entry = {
    popup: './pages/popup.js',
    content: './pages/content.js',
    background: './pages/api/background.js'
  };
}
return config;

}
};

module.exports = nextConfig;




### Project Structure Issues

my-nextjs-extension/
├── pages/
│ ├── popup.js // Not a natural fit
│ ├── content.js // Awkward structure
│ └── api/
│ └── background.js // API routes don't work in extensions
├── components/
├── styles/
├── public/
│ └── manifest.json
└── next.config.js




### Real Example: Popup with Next.js



```jsx
// pages/popup.js
import { useState, useEffect } from 'react';
import Head from 'next/head';

export default function Popup() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Next.js router doesn't work in extensions
    // You lose many Next.js benefits here
    if (typeof chrome !== 'undefined') {
      chrome.storage.sync.get(['data'], (result) => {
        setData(result.data);
      });
    }
  }, []);

  return (
    <>
      <Head>
        <title>Extension Popup</title>
        {/* Most Next.js head features don't work in extensions */}
      </Head>
      <div>
        <h1>Popup Content</h1>
        <p>Data: {data}</p>
        {/* Next.js Image component doesn't work */}
        {/* Next.js Link component doesn't work */}
        {/* Next.js router doesn't work */}
      </div>
    </>
  );
}

Performance Comparison

Bundle Size Analysis

React Setup:

Popup bundle: ~45KB (with React + your code)
Content script: ~50KB (React + DOM manipulation)
Background script: ~2KB (vanilla JS)
Total: ~97KB

Next.js Setup:

Popup bundle: ~180KB (Next.js runtime + React + your code)
Content script: ~200KB (Next.js overhead even when unused)
Background script: ~15KB (Next.js API route overhead)
Total: ~395KB

Load Time Impact

Chrome extensions load on every page visit. The 4x larger bundle size with Next.js creates noticeable performance degradation, especially on slower devices.

Development Experience

React Pros:

Full control over build process
Natural extension architecture
Smaller bundles
All Chrome APIs work seamlessly
Hot reloading works with proper setup
Easy debugging

React Cons:

More initial setup required
Need to configure Webpack/build tools
No built-in routing (though extensions rarely need it)

Next.js Pros:

Familiar development environment if you're already using Next.js
Built-in TypeScript support
Good development tooling

Next.js Cons:

Most Next.js features don't work (SSR, API routes, Image optimization, routing)
Larger bundle sizes
Complex configuration workarounds
Fighting framework assumptions
Debugging can be more difficult due to framework overhead

Real-World Use Cases

When to Choose React:

Performance-critical extensions (content scripts that run on every page)
Extensions with complex UI (options pages, popup interfaces)
Long-term maintenance projects
Team unfamiliar with Next.js but comfortable with React

When Next.js Might Work:

Prototyping existing Next.js components as extension features
Teams heavily invested in Next.js ecosystem
Extensions with minimal performance requirements
**Short-term projects **where setup time matters more than optimization

Migration Experience

I migrated a productivity extension from Next.js to React after encountering several issues:

Problems Encountered:

Bundle size: Users complained about slow page loads
Hot reloading: Inconsistent behavior in development
Chrome API integration: Next.js service worker conflicts
Build complexity: Constant webpack configuration adjustments

Migration Results:

75% reduction in bundle size
40% faster extension load times
Eliminated 3 production bugs related to Next.js routing
Reduced build time by 60%

My Recommendation

Use React for Chrome extensions. The natural fit, performance benefits, and reduced complexity far outweigh any initial setup overhead. Next.js is an excellent framework, but it's solving problems that don't exist in the extension context while creating new ones.

Starter Template Structure

// Quick setup with Create React App ejected
npx create-react-app my-extension
cd my-extension
npm run eject

Final Thoughts

While both approaches can technically work, React provides a much more natural development experience for Chrome extensions. The performance implications alone make React the clear choice for production extensions, especially those that inject content scripts into web pages.

Next.js shines in its intended use case - full-stack web applications. For Chrome extensions, stick with React and invest the saved bundle size in better user experiences.

Thank you,
Janith Sandaruwan.
linkedin

Complete Guide: Upgrading Laravel Project to Laravel 11 - Challenges & Solutions

J-Sandaruwan — Wed, 23 Jul 2025 05:55:03 +0000

Introduction

Upgrading a Laravel project to version 11 can be a daunting task, especially when dealing with deprecated packages, breaking changes, and compatibility issues. In this comprehensive guide, I'll walk you through the entire upgrade process, highlighting the challenges we faced and the solutions we implemented.

Prerequisites

Before starting the upgrade, ensure you have:

PHP 8.2+ installed
Composer updated to latest version
Backup of your current project
Development environment ready

Step 1: Initial Laravel Upgrade

Update Composer Dependencies

composer update laravel/framework
composer update laravel/livewire

Update PHP Requirements

Laravel 11 requires PHP 8.2+. Update your composer.json:

{
    "require": {
        "php": "^8.2",
        "laravel/framework": "^11.0"
    }
}

Step 2: Package Compatibility Issues

Challenge 1: Deprecated Livewire Datatables Package

Problem: The Mediconesystems\LivewireDatatables package is deprecated and incompatible with Laravel 11.

Solution: Replace with rappasoft/laravel-livewire-tables

composer remove mediconesystems/livewire-datatables
composer require rappasoft/laravel-livewire-tables

Challenge 2: Breaking Changes in Datatable API

Problem: The new package has different method signatures and API.

Old Code (Mediconesystems):

Column::make('Status')
    ->format(function ($value, $row, Column $column) {
        return $row->status;
    })

New Code (Rappasoft):

Column::make('Status')
    ->label(function ($row) {
        return $row->status;
    })

Challenge 3: Missing Livewire Components

Problem: Unable to locate a class or view for component [livewire-tables::bs4.table.row]

Solution: Publish the package views and update component references:

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider"

Step 3: Livewire v3 Compatibility Issues

Challenge 4: Deprecated `emit()` Method

Problem: Livewire.emit is not a function error

Solution: Replace emit() with dispatch() throughout your JavaScript:

Old Code:

Livewire.emit('deleteData', id);

New Code:

Livewire.dispatch('deleteData', { id: id });

Challenge 5: Component Property Access

Problem: Undefined property errors in datatable columns

Solution: Update column definitions to use proper model access:

// Old
->format(function ($value, $column, $data) {
    return $data->type;
})

// New
->label(function ($row) {
    return $row->type;
})

Step 4: Database Schema Issues

Challenge 6: Missing Database Columns

Problem: SQL errors about missing columns like brands.name, warranty_claims.customer

Solution: Update datatable queries to use proper relationships:

// Old - Raw SQL joins
return SmsMessage::query()
    ->join('brands', 'sms_messages.brand_id', '=', 'brands.id')
    ->select('sms_messages.*', 'brands.name');

// New - Eloquent relationships
return SmsMessage::query()
    ->with('brand')
    ->whereHas('brand', function($query) {
        $query->where('name', 'like', '%' . $this->search . '%');
    });

Step 5: Intervention Image Package Issues

Challenge 7: Driver Configuration Errors

Problem: Intervention Image driver errors after upgrade

Solution: Update configuration and driver usage:

// config/image.php
return [
    'driver' => 'gd', // or 'imagick'
    'drivers' => [
        'gd' => [
            'driver' => 'gd',
        ],
        'imagick' => [
            'driver' => 'imagick',
        ],
    ],
];

Step 6: Auto-Refresh Issues

Challenge 8: Continuous Table Refreshing

Problem: Datatables refreshing continuously

Solution: Remove auto-refresh properties:

// Remove this from datatable classes
// public $refresh = true;

Step 7: Blade Component Updates

Challenge 9: Missing Jetstream Components

Problem: Missing Blade components after upgrade

Solution: Create missing components or update references:

// Create missing components
php artisan make:component NavigationMenu
php artisan make:component DropdownLink

Step 8: Alpine.js Conflicts

Challenge 10: Alpine.js and Livewire v3 Conflicts

Problem: JavaScript conflicts between Alpine.js and Livewire

Solution: Update Alpine.js initialization:

// Ensure proper initialization
document.addEventListener('alpine:init', () => {
    // Your Alpine.js code
});

Step 9: Caching and Optimization

Final Steps

After all updates, clear all caches:

php artisan config:clear
php artisan cache:clear
php artisan view:clear
php artisan route:clear
php artisan optimize

Common Issues and Solutions

Issue 1: "Undefined property: Column::$type"

Cause: Using old API in new package
Solution: Use ->label() instead of ->format()

Issue 2: "Unable to locate a class or view for component"

Cause: Missing package views
Solution: Publish vendor views and update component references

Issue 3: "Livewire.emit is not a function"

Cause: Livewire v3 breaking changes
Solution: Replace emit() with dispatch()

Issue 4: Auto-refresh loops

Cause: Incorrect refresh configuration
Solution: Remove public $refresh = true from datatables

Best Practices for Laravel 11

1. Use Type Declarations

public function columns(): array
{
    return [
        Column::make('ID', 'id')
            ->sortable()
            ->searchable(),
    ];
}

2. Proper Model Relationships

public function builder(): Builder
{
    return Order::query()->with(['customer', 'items']);
}

3. Error Handling

public function deleteData($id)
{
    try {
        $model = Model::findOrFail($id);
        $model->delete();

        $this->dispatch('success', 'Record deleted successfully!');
    } catch (\Exception $e) {
        $this->dispatch('error', 'Error deleting record: ' . $e->getMessage());
    }
}

Testing Your Upgrade

1. Run Tests

php artisan test

2. Check Routes

php artisan route:list

3. Verify Database

php artisan migrate:status

Performance Optimizations

1. Eager Loading

// Always eager load relationships in datatables
return Order::query()
    ->with(['customer', 'items', 'status'])
    ->whereHas('customer', function($query) {
        $query->where('name', 'like', '%' . $this->search . '%');
    });

2. Database Indexing

Ensure proper indexes on frequently searched columns:

CREATE INDEX idx_orders_customer_id ON orders(customer_id);
CREATE INDEX idx_orders_status ON orders(status);

Conclusion

Upgrading to Laravel 11 requires careful attention to breaking changes, especially in packages like Livewire and datatables. The key is to:

Plan ahead - Read upgrade guides and breaking changes
Update packages systematically - One at a time
Test thoroughly - After each major change
Use proper error handling - Catch and handle exceptions
Optimize performance - Use eager loading and proper indexing

The upgrade process, while challenging, results in a more modern, performant, and maintainable application. Laravel 11 brings significant improvements in performance, security, and developer experience.

Resources

This guide is based on real-world experience upgrading a production Laravel application. The challenges and solutions presented here are from actual implementation.

Thank you,
Janith Sandaruwan.
linkedin

From Trainee to Software Engineer: A 5 Year Journey Through Code, Growth, and AI

J-Sandaruwan — Mon, 21 Jul 2025 10:00:00 +0000

A personal reflection on evolving from a curious trainee to a full-stack engineer diving into artificial intelligence

The Humble Beginning

July 2020. Fresh out of university with a BSc in IT, I stepped into my first role as a Trainee Software Engineer. The world was grappling with a global pandemic, and I was grappling with my first real taste of professional software development.

// My first proper Laravel controller - probably looked something like this
<?php

class WelcomeController extends Controller 
{
    public function index() 
    {
        // Mind blown that this actually worked
        return view('welcome');
    }
}

Those first six months were a whirlwind of discovery. Laravel, PHP, version control systems, debugging sessions that lasted hours, and the gradual realisation that software engineering is as much about problem-solving as it is about coding.

The Foundation Years: Learning by Building

January 2021 - Associate Software Engineer

The promotion to Associate Software Engineer wasn't just a title change, it was the beginning of real responsibility. I was now contributing to the entire development lifecycle, working on various e-commerce platforms and web applications.

Here's what I learnt during this phase:

Code Quality Matters

Implementing best practices wasn't just about following rules, it had measurable impact:

30% reduction in bugs
Significantly improved code maintainability
Faster debugging and feature development

Collaboration is Everything

Working with cross-functional teams taught me that the best solutions emerge from diverse perspectives. My proudest achievement? Helping improve project efficiency by 25% through collaborative problem-solving.

// The kind of React component I was writing during this period
const ProjectDashboard = () => {
    const [projects, setProjects] = useState([]);

    // Simple, but it worked!
    useEffect(() => {
        fetchProjects();
    }, []);

    return (
        <div className="dashboard">
            {projects.map(project => (
                <ProjectCard key={project.id} project={project} />
            ))}
        </div>
    );
}

The Multi-Company Experience: 2022

2022 was mental. I was juggling multiple roles across different companies, each teaching me something unique:

First Company

Chrome extension development with Next.js and Laravel. First taste of browser extension architecture.

Second Company

Robust web application delivery. Learnt the importance of scalable architecture.

Third Company

Google extensions with React and Node.js. Remote work across time zones? Challenge accepted.

Each role brought different challenges:

Different tech stacks
Varied team dynamics
Multiple time zones
Diverse client requirements

The key lesson? Adaptability isn't just useful—it's essential.

The Academic Investment: Master's Journey

Starting a Master's in Computer Software Engineering whilst working full-time was ambitious, but I knew the tech landscape was shifting towards AI, and I wanted to be prepared.

The curriculum deep-dive into Machine Learning fundamentals was eye-opening:

# From basic neural networks...
import tensorflow as tf
from tensorflow import keras

model = keras.Sequential([
    keras.layers.Dense(64, activation='relu'),
    keras.layers.Dense(32, activation='relu'),
    keras.layers.Dense(10, activation='softmax')
])

# To understanding the mathematics behind the magic
model.compile(optimizer='adam',
              loss='categorical_crossentropy',
              metrics=['accuracy'])

Completing the degree with Commendation in February 2025 wasn't just academic validation—it was strategic preparation for the next phase of my career.

Current State: Full-Stack Meets AI

Today, I'm combining everything I've learnt:

Full-stack development expertise (Laravel, React, Next.js)
Browser extension development
Machine Learning and AI principles
Team collaboration and project delivery

The Chrome extension we launched in 2023 represents this convergence—traditional web technologies enhanced with intelligent features.

Technical Evolution Timeline

2020: PHP, Laravel basics, Git
2021: Advanced Laravel, project architecture, team collaboration
2022: React, Next.js, Node.js, browser extensions, remote work
2023: Machine Learning, TensorFlow, AI integration
2024-2025: Advanced AI applications, intelligent web solutions

Key Takeaways for Aspiring Developers

1. Embrace the Steep Learning Curve

Those first months feeling overwhelmed? Completely normal. The key is persistence and asking questions.

2. Quality Over Quantity

Better to write maintainable code that reduces bugs than to rush through features. Trust me, your future self will thank you.

3. Soft Skills Matter as Much as Code

Communication, collaboration, and problem-solving abilities will differentiate you as much as technical expertise.

4. Stay Curious About Emerging Technologies

AI and ML aren't replacing traditional development—they're enhancing it. The developers who thrive will be those who embrace both.

5. Measure Your Impact

It's not just about writing code—it's about delivering value. Whether it's improving efficiency by 25% or reducing bugs by 30%, focus on outcomes.

What's Next?

The intersection of full-stack development and AI is where I believe the most exciting opportunities lie. We're moving towards a world where applications don't just respond to user input—they anticipate needs, learn from behaviour, and provide intelligent solutions.

I'm particularly excited about:

AI-enhanced user experiences in web applications
Intelligent automation in development workflows
Machine learning-driven business solutions

Final Thoughts

The journey from trainee to software engineer hasn't been linear, but every detour taught me something valuable. The pandemic taught me adaptability, multiple concurrent roles taught me time management, and diving into AI taught me that continuous learning isn't optional—it's essential.

To anyone starting their own journey: be patient with yourself, stay curious, and remember that every expert was once a beginner who refused to give up.

What's been the most transformative part of your development journey? Drop a comment—I'd love to hear your story!

Follow me for more insights on full-stack development, AI integration, and career growth in tech.

Thank you,
Janith Sandaruwan.
linkedin

5 Laravel Best Practices That Reduced My Bugs by 30%

J-Sandaruwan — Tue, 15 Jul 2025 06:29:09 +0000

In such a case, the idea that small differences in coding practices can make a huge difference in the overall quality of code comes out as true after 5+ years of Laravel development on various projects I have worked.

This is the list of the 5 game-changing practices according to which my development workflow was changed:

1. Always Use Form Request Validation

Rather than doing validation in controllers, make specific Form Request classes. This keeps validation logic well separated and reusable.


// Before: Cluttered controller
public function store(Request $request) {
    $request->validate([
        'email' => 'required|email|unique:users',
        'name' => 'required|string|max:255'
    ]);
}

// After: Clean Form Request
class StoreUserRequest extends FormRequest {
    public function rules() {
        return [
            'email' => 'required|email|unique:users',
            'name' => 'required|string|max:255'
        ];
    }
}

2. Implement Proper Error Handling

Exceptions should not take down your application. Utilize try-catch blocks and the exception handler by Laravel.

try {
    $user = User::create($data);
    return response()->json(['success' => true]);
} catch (Exception $e) {
    Log::error('User creation failed: ' . $e->getMessage());
    return response()->json(['error' => 'Something went wrong'], 500);
}

3. Use Database Transactions for Complex Operations

Use transactions to ensure maximum database operation consistency.

DB::transaction(function () {
    $user = User::create($userData);
    $user->profile()->create($profileData);
    $user->roles()->attach($roleIds);
});

4. Write Tests for Critical Functions

Before the bugs go to production, they are caught using the feature tests. Begin with a critical user journeys.

public function test_user_can_register_successfully() {
    $response = $this->post('/register', [
        'name' => 'Test User',
        'email' => 'test@example.com',
        'password' => 'password123'
    ]);

    $response->assertStatus(201);
    $this->assertDatabaseHas('users', ['email' => 'test@example.com']);
}

5. Use Eloquent Relationships Properly

Eager loading is to be used to avoid N+1 queries. This one practice helped my app perform even 40 percent better.

// Before: N+1 Query Problem
$users = User::all();
foreach ($users as $user) {
    echo $user->posts->count(); // Fires a query for each user
}

// After: Eager Loading
$users = User::with('posts')->get();
foreach ($users as $user) {
    echo $user->posts->count(); // No additional queries
}

The Results

30 rate decrease in bugs in production
40 percent increase in the performance of the application
Code reviews 50 percent faster
Increased confidence of deployment by teams

Pro Tip

Introduce these practices in a gradual manner. Form Requests and correct handling of errors - it is where you should start with, and you will notice the changes at once!

Which Laravel best practices have been the most significant to your initiatives? Comment bellow!

Thank you,
Janith Sandaruwan.
linkedin

# Installing Laravel 11: A Step-by-Step Guide

J-Sandaruwan — Sat, 13 Jul 2024 19:34:12 +0000

Laravel 11 is a powerful PHP framework that helps developers build robust and scalable web applications. This guide will walk you through the installation process and outline the dependencies required to get your Laravel 11 application up and running.

Prerequisites

Before you install Laravel 11, ensure you have the following prerequisites installed on your machine:

PHP: Laravel 11 requires PHP 8.1 or higher.
Composer: Laravel uses Composer to manage its dependencies.
Web Server: Apache or Nginx is recommended.
Database: MySQL, PostgreSQL, SQLite, or SQL Server.

Step 1: Install PHP

Make sure you have PHP 8.1 or higher installed. You can download the latest version of PHP from the official PHP website.

Verify the installation by running:

php -v

Step 2: Install Composer

Composer is a dependency manager for PHP. Download and install Composer from the official Composer website.

Verify the installation by running:

composer -v

Step 3: Install Laravel 11

With PHP and Composer installed, you can now install Laravel 11. Open your terminal and run the following command:

composer create-project --prefer-dist laravel/laravel laravel11-app "11.*"

This command will create a new Laravel 11 project in a directory named laravel11-app.

Step 4: Configure Environment

Navigate to your project directory:

cd laravel11-app

Copy the .env.example file to .env:

cp .env.example .env

Generate a new application key:

php artisan key:generate

Update your .env file with your database credentials and other necessary configurations.

Step 5: Set Up a Web Server

Using Artisan Serve (Development Only)

For development purposes, you can use Laravel's built-in server:

php artisan serve

Visit http://localhost:8000 in your browser to see your Laravel application.

Using Apache or Nginx (Production)

For production, configure your web server to serve your Laravel application. Below is a basic Nginx configuration:

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/laravel11-app/public;

    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

Replace /path/to/laravel11-app with the actual path to your Laravel application.

Step 6: Install Dependencies

Laravel 11 comes with several dependencies pre-installed. However, you may need to install additional packages depending on your application's requirements. Here are some common dependencies:

Database: Install the database driver for your chosen database (e.g., pdo_mysql for MySQL).
Cache: For caching, you might want to install a Redis or Memcached driver.
Queue: For job queues, you might use Redis, Beanstalkd, or Amazon SQS.

You can install additional packages using Composer. For example, to install the Redis driver, run:

composer require predis/predis

Step 7: Run Migrations

Laravel uses migrations to manage the database schema. Run the following command to create the necessary tables:

php artisan migrate

Conclusion

You have successfully installed Laravel 11 and set up your development environment. You can now start building your application. For more information on using Laravel, refer to the official Laravel documentation.

Happy coding!

Thank you,
J-Sandaruwan.
linkedin

How to Implement Authentication and Authorization in React

J-Sandaruwan — Sat, 27 May 2023 16:29:20 +0000

Implementing Authentication and Authorization in React: A Comprehensive Guide

Introduction

Authentication and authorization are critical aspects of building secure and user-friendly web applications. In this blog post, we will explore how to implement authentication and authorization in a React application. By the end, you'll have a solid understanding of the concepts and be ready to integrate robust authentication and authorization mechanisms into your own projects.

Understanding Authentication and Authorization
Setting up a React Application
Implementing User Registration and Login
Securing React Routes with Protected Routes
Managing User Sessions and Tokens
Role-Based Authorization
Storing User Data and Tokens
Handling Logout Functionality
Implementing Password Reset and Email Verification
Best Practices for Authentication and Authorization in React
Conclusion

Section 1: Understanding Authentication and Authorization

Explaining the difference between authentication and authorization
Common authentication methods (username/password, social login, etc.)
Differentiating between client-side and server-side authentication

Section 2: Setting up a React Application

Setting up a new React project using create-react-app
Installing required dependencies for authentication and authorization

Section 3: Implementing User Registration and Login

Creating user registration and login forms
Validating user input and handling form submission
Making API requests to the server for user authentication

Section 4: Securing React Routes with Protected Routes

Defining protected routes that require authentication
Redirecting unauthorized users to the login page
Implementing higher-order components (HOCs) for route protection

Section 5: Managing User Sessions and Tokens

Introduction to session-based and token-based authentication
Implementing session-based authentication with server-side sessions
Implementing token-based authentication with JWT (JSON Web Tokens)

Section 6: Role-Based Authorization

Assigning roles to users (admin, user, etc.)
Restricting access to certain routes based on user roles
Implementing role-based authorization logic

Section 7: Storing User Data and Tokens

Discussing different storage options for user data and tokens (localStorage, cookies, etc.)
Choosing the appropriate storage mechanism for your application
Implementing secure storage and preventing common vulnerabilities

Section 8: Handling Logout Functionality

Implementing a logout mechanism to invalidate user sessions or tokens
Clearing user data from local storage or cookies
Providing visual feedback to the user upon successful logout

Section 9: Implementing Password Reset and Email Verification

Allowing users to reset forgotten passwords
Verifying user email addresses during registration
Sending password reset and email verification links via email

Section 10: Best Practices for Authentication and Authorization in React

Security considerations and best practices for authentication and authorization
Protecting against common vulnerabilities (XSS, CSRF, etc.)
Keeping user data and

Section 11: Conclusion

Recap of key concepts covered in the blog post
Encouragement to implement authentication and authorization in your React projects
Resources and further reading on the topic

Conclusion:
Implementing authentication and authorization in a React application is crucial for building secure and reliable web applications. By following the steps and best practices outlined in this blog post, you'll be well-equipped to handle user authentication, manage user sessions and tokens, and enforce role-based authorization. Remember to prioritize security and stay updated on the latest practices to ensure your application remains protected against potential threats.

Note: The above table of contents provides an outline for a comprehensive blog post on implementing authentication and authorization in React. You can expand each section by including detailed explanations, code snippets, and relevant examples to provide a thorough guide for your readers.

How to Build a React App with Redux for State Management

J-Sandaruwan — Sun, 26 Mar 2023 22:12:24 +0000

React is a popular JavaScript library used for building user interfaces. Redux is a state management tool that provides a centralized store for managing state in a predictable way. Together, React and Redux provide a powerful combination for building complex applications.

In this tutorial, we will walk through the process of building a simple React app with Redux for state management. We will cover the following topics:

Setting up a new React project with Redux
Creating a Redux store and defining initial state
Creating actions and reducers to manage state
Connecting components to the Redux store

Prerequisites

Before we get started, make sure you have the following:

Node.js installed on your machine
Basic knowledge of React

Setting up a new React project with Redux

The first step is to create a new React project. Open up your terminal and run the following command:

npx create-react-app my-app

This will create a new React project called my-app in your current directory. Once the project is created, navigate to the project directory:

cd my-app

Next, we need to install the redux and _react-redux _libraries:

npm install redux react-redux

Creating a Redux store and defining initial state

The next step is to create a Redux store and define the initial state. In the src directory, create a new file called store.js:

import { createStore } from 'redux';

const initialState = {
  count: 0,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        count: state.count - 1,
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

In this example, we are creating a simple counter application. The initial state of the store is an object with a count property set to 0. We are also defining a reducer function that takes the current state and an action as arguments, and returns a new state based on the action type.

Creating actions and reducers to manage state

The next step is to create actions and reducers to manage state. In the src directory, create a new file called actions.js:

export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

In this example, we are creating two actions: increment and decrement. These actions simply return an object with a type property that corresponds to the action type defined in the reducer.

Next, create a new file called reducers.js:

import { combineReducers } from 'redux';

function count(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

const rootReducer = combineReducers({
  count,
});

export default rootReducer;

In this example, we are defining a separate reducer function for the count property of the state object. We are also using the combineReducers function from Redux to combine all of our reducers into a single rootReducer.

Connecting components to the Redux store

The final step is to connect our components to the Redux store. In the App.js file, import the Provider component from react-redux and the Redux store from store.js:

import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <h1>Counter App</h1>
        <Counter />
      </div>
    </Provider>
  );
}

export default App;

Here, we are wrapping our main App component with the Provider component, which makes the Redux store available to all child components. We pass the store object as a prop to the Provider component.

Next, create a new file called Counter.js in the src directory:

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

function Counter(props) {
  const { count, increment, decrement } = props;

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  count: state.count,
});

const mapDispatchToProps = {
  increment,
  decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

In this example, we are creating a new Counter component that displays the current count value from the Redux store. We are also defining two click event handlers for the increment and decrement buttons that dispatch the increment and decrement actions respectively.

We are using the connect function from react-redux to connect our Counter component to the Redux store. The mapStateToProps function maps the count property from the Redux store to a prop called count in our component. The mapDispatchToProps object maps our increment and decrement action creators to props in our component.

That's it! We have successfully built a simple React app with Redux for state management.

Conclusion
In this tutorial, we walked through the process of building a simple React app with Redux for state management. We learned how to create a Redux store, define initial state, create actions and reducers, and connect components to the Redux store. With these concepts in mind, you should be able to build more complex applications with React and Redux.

You can find the complete source code for this project on GitHub: https://github.com/J-Sandaruwan/counter-app-redux

Building a Responsive Navigation Bar with React

J-Sandaruwan — Wed, 15 Mar 2023 22:23:20 +0000

In this tutorial, we will learn how to create a responsive navigation bar with React that adjusts to different screen sizes. A navigation bar is an essential part of any website, as it helps users navigate through the different pages and sections of the site. With React, we can create a navigation bar that not only looks great but is also highly functional and easy to use.

Getting Started

To get started, make sure you have a basic understanding of React and its components. If you're new to React, we recommend going through the official React documentation and tutorials before continuing.

Setting Up the Project

First, let's create a new React project using create-react-app. Open your terminal and run the following command:

npx create-react-app my-app

This will create a new React project in a folder called my-app. Next, navigate to the project folder and start the development server:

cd my-app
npm start

This will start the development server at http://localhost:3000, and you should see the default React app in your browser.

Creating the Navigation Bar

Next, let's create the navigation bar component. In your project directory, create a new file called NavBar.js and add the following code:

import React from 'react';

const NavBar = () => {
  return (
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Services</a></li>
        <li><a href="/">Contact</a></li>
      </ul>
    </nav>
  );
};

export default NavBar;

This code defines a functional component that renders a simple unordered list of links. We will style this component later to make it look like a navigation bar.

Adding NavBar to App.js

import React from 'react';
import styled from 'styled-components';
import NavBar from './NavBar';

const AppContainer = styled.div`
  max-width: 1200px;
  margin: 0 auto;
`;

const App = () => {
  return (
    <AppContainer>
      <NavBar />
      {/* Your app content goes here */}
    </AppContainer>
  );
};

export default App;

First, we import the NavBar component at the top of the file. Then we create a styled component called AppContainer that sets the maximum width of the app to 1200 pixels and centers it horizontally using the margin: 0 auto style.

Inside the App component, we render the NavBar component at the top of the app. This will render the navigation bar on every page of your app. Below the NavBar, you can add your app content, such as routes or page components.

Finally, we export the App component so that it can be used in other parts of your app.

Adding Styling

To style our navigation bar, we will use CSS and the styled-components library. If you don't have s_tyled-components_ installed, you can install it by running the following command:

npm install styled-components

Next, let's add some styles to our NavBar component. Replace the contents of NavBar.js with the following code:

import React from 'react';
import styled from 'styled-components';

const Nav = styled.nav`
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
`;

const NavItem = styled.li`
  list-style: none;
  margin: 0 1rem;

  a {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;

    &:hover {
      color: #bada55;
    }
  }
`;

const Logo = styled.h1`
  font-size: 1.5rem;
  margin: 0;
`;

const NavBar = () => {
  return (
    <Nav>
      <Logo>My Logo</Logo>
      <ul>
        <NavItem><a href="/">Home</a></NavItem>
        <NavItem><a href="/">About</a></NavItem>
        <NavItem><a href="/">Services</a></NavItem>
        <NavItem><a href="/">Contact</a></NavItem>
      </ul>
    </Nav>
  );
};

export default NavBar;

This code defines several styled components that define the styles for our navigation bar. The Nav component sets the main styles for the navigation bar, including the background color, padding, and alignment. The NavItem component styles each list item in the navigation bar, including the link styles. The Logo component styles the logo in the navigation bar.

Making the Navigation Bar Responsive

Now that we have our navigation bar styled, let's make it responsive so that it adjusts to different screen sizes. We will use media queries to change the styles of the navigation bar based on the screen size.

Add the following code to the bottom of NavBar.js:

const MobileNavToggle = styled.button`
  display: block;
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    color: #bada55;
  }

  @media (min-width: 768px) {
    display: none;
  }
`;

const DesktopNav = styled.ul`
  display: flex;
  flex-direction: row;

  @media (max-width: 767px) {
    display: none;
  }
`;

const MobileNav = styled.ul`
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 0;

  @media (max-width: 767px) {
    display: flex;
  }
`;

const NavBar = () => {
  const [isMobileNavOpen, setIsMobileNavOpen] = React.useState(false);

  return (
    <Nav>
      <Logo>My Logo</Logo>
      <MobileNavToggle onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}>
        {isMobileNavOpen ? 'Close' : 'Menu'}
      </MobileNavToggle>
      <DesktopNav>
        <NavItem><a href="/">Home</a></NavItem>
        <NavItem><a href="/">About</a></NavItem>
        <NavItem><a href="/">Services</a></NavItem>
        <NavItem><a href="/">Contact</a></NavItem>
      </DesktopNav>
      <MobileNav style={{ display: isMobileNavOpen ? 'flex' : 'none' }}>
        <NavItem><a href="/">Home</a></NavItem>
        <NavItem><a href="/">About</a></NavItem>
        <NavItem><a href="/">Services</a></NavItem>
        <NavItem><a href="/">Contact</a></NavItem>
      </MobileNav>
    </Nav>
  );
};

This code defines three additional styled components: MobileNavToggle, DesktopNav, and MobileNav. The MobileNavToggle component is a button that toggles the mobile navigation menu on and off. The DesktopNav component defines the styles for the navigation bar on desktop screens. The MobileNav component defines the styles for the navigation bar on mobile screens.

We also added some state to our NavBar component using React's useState hook to toggle the mobile navigation menu on and off. The MobileNav component is hidden by default using the display: none style, and is shown only when the isMobileNavOpen state is true.

Conclusion

In this tutorial, we learned how to create a responsive navigation bar with React that adjusts to different screen sizes. We used styled components and media queries to style and make our navigation bar responsive. With this knowledge, you can create your own navigation bar that looks great on any device.

Example project:-
navigation-bar-with-react By J-Sandaruwan

Happy coding!

Thank you,
J-Sandaruwan.
linkedin

Forem: J-Sandaruwan

Master Your Laravel Queues: Introducing Laravel Job Monitor

What is Laravel Job Monitor?

Key Features

1. Automatic "Zero-Touch" Tracking

2. Real-Time Progress Tracking

3. Built-in REST API

4. Zero Dependencies

Why I Built It

Getting Started

What's Next?

How to Manage Plugin Dependencies in Nuxt 3

Understanding the Issue

Why Order or Dependency Matters

How Nuxt 3 Handles Plugins

Step-by-Step Explanation to Fix

1. Naming Plugins for Order

2. Use Async setup Hook

3. Declare Dependency with dependsOn

What Happens Under the Hood?

Benefits of This Approach

Real-World Use Cases

Summary: How to Fix Your Issue in Vue 3 Nuxt 3

How to Use TipTap Editor with Vue 3

Getting Started with TipTap in Vue 3

Pros and Cons of TipTap

Pros

Cons

TipTap vs TinyMCE: Feature and Pricing Comparison

Conclusion

Laravel + Vue 3: The Perfect Stack for Modern Web Apps

Why Use Separate Projects?

Step-by-Step Integration Example

1. Set Up Laravel API

2. Create a Vue 3 Project

Best Practices for Laravel + Vue Integration

1. Use API-First Design

2. Use Axios or Fetch for Client API Calls

3. Secure Routes with Sanctum or Passport

4. Modularize and Version APIs

5. Use .env for URL Management

Pros of a Decoupled Setup

Final Thoughts

Building Chrome Extensions: React vs Next.js - My Experience

The Core Difference

React Approach: The Natural Fit

Webpack Configuration

Manifest.json

Real Example: Popup Component

Content Script Integration

Next.js Approach: Fighting the Framework

The Challenge

Modified next.config.js

Performance Comparison

Bundle Size Analysis

React Setup:

Next.js Setup:

Load Time Impact

Development Experience

React Pros:

React Cons:

Next.js Pros:

Next.js Cons:

Real-World Use Cases

When to Choose React:

When Next.js Might Work:

Migration Experience

Problems Encountered:

Migration Results:

My Recommendation

Starter Template Structure

Final Thoughts

Complete Guide: Upgrading Laravel Project to Laravel 11 - Challenges & Solutions

Introduction

Prerequisites

Step 1: Initial Laravel Upgrade

Update Composer Dependencies

Update PHP Requirements

Step 2: Package Compatibility Issues

Challenge 1: Deprecated Livewire Datatables Package

2. Use Async `setup` Hook

3. Declare Dependency with `dependsOn`

Challenge 4: Deprecated `emit()` Method