DEV Community: Sayuri Kotikawaththa

🌐 The Architecture of a Decoupled Application

Sayuri Kotikawaththa — Tue, 23 Jun 2026 03:27:59 +0000

Connecting a React Frontend to a Laravel Backend

When you connect a React frontend to a Laravel backend, they act as two separate applications. Laravel serves as the API (Application Programming Interface) server, handling business logic, database operations, and data processing. React serves as the presentation layer, requesting and displaying data from the Laravel API.

Step-by-Step Integration Guide

Step 1: Prepare the Laravel Backend (API Server)

1. Create an API Route

Open routes/api.php and define an API endpoint:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProjectController;

Route::get('/projects', [ProjectController::class, 'index']);

2. Create the Controller

Generate a controller:

php artisan make:controller ProjectController

Open app/Http/Controllers/ProjectController.php and add:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\JsonResponse;

class ProjectController extends Controller
{
    public function index(): JsonResponse
    {
        $projects = [
            'Web App',
            'Mobile E-Commerce',
            'Portfolio'
        ];

        return response()->json($projects);
    }
}

3. Configure CORS

Open config/cors.php and ensure your React application's URL is allowed:

'allowed_origins' => [
    'http://localhost:3000',
],

If using Vite React:

'allowed_origins' => [
    'http://localhost:5173',
],

Start the Laravel server:

php artisan serve

Laravel API endpoint:

http://127.0.0.1:8000/api/projects

Step 2: Connect the React Frontend

1. Install Axios

Navigate to your React project directory and run:

npm install axios

2. Create a Component

Create ProjectList.jsx:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ProjectList() {
    const [projects, setProjects] = useState([]);

    useEffect(() => {
        axios
            .get('http://127.0.0.1:8000/api/projects')
            .then((response) => {
                setProjects(response.data);
            })
            .catch((error) => {
                console.error('Error fetching projects:', error);
            });
    }, []);

    return (
        <div>
            <h2>Projects List</h2>

            <ul>
                {projects.map((project, index) => (
                    <li key={index}>{project}</li>
                ))}
            </ul>
        </div>
    );
}

export default ProjectList;

3. Use the Component

Open App.jsx:

import React from 'react';
import ProjectList from './ProjectList';

function App() {
    return (
        <div>
            <h1>Laravel + React Integration Example</h1>
            <ProjectList />
        </div>
    );
}

export default App;

4. Start the React Application

npm run dev

npm start

depending on your React setup.

Data Flow

React Frontend
       │
       │ HTTP GET Request
       ▼
Laravel API
       │
       │ Fetch Data
       ▼
Database / Data Source
       │
       │ JSON Response
       ▼
React Frontend
       │
       ▼
Display Data

Expected Output

Laravel + React Integration Example

Projects List

• Web App
• Mobile E-Commerce
• Portfolio

This architecture keeps the frontend (React) and backend (Laravel) independent, making the application easier to maintain, scale, and develop.

[Boost]

Sayuri Kotikawaththa — Thu, 30 Apr 2026 05:00:46 +0000

Remigiusz Samborski for Google AI

Apr 28

How I used Gemini CLI to orchestrate a complex RAG migration

#gemini #agents #programming #ai

6 min read

BookBridge Sri Lanka 🇱🇰

Sayuri Kotikawaththa — Thu, 30 Apr 2026 04:56:04 +0000

📚 BookBridge Sri Lanka – A Second-Hand Book Exchange Platform for Uni Students 🇱🇰

Hey devs! 👋

I’ve been working on a project called BookBridge Sri Lanka – a web platform designed to help university students buy, sell, or exchange used textbooks and reference books at affordable prices.

The GitHub repo is currently private, but I wanted to share what I've built and get your feedback. After finishing the project, I decided to make it public.

🎯 The Problem It Solves

In Sri Lanka, university reference books can cost anywhere from LKR 1,500 to 8,000+. Right now, students rely on chaotic WhatsApp groups to find books.

BookBridge provides a dedicated, trusted, and organized marketplace just for students.

✨ Key Features

👤 User registration & login
📚 Post books for sale / exchange
🔍 Search & filter books by category, price, or condition
💬 In-platform messaging between buyers & sellers
⭐ Seller reviews & ratings
🔖 Wishlist to save books
🛡️ Admin dashboard for moderation
📱 Fully mobile responsive

🛠️ Built With

Frontend: HTML5, CSS3, JavaScript, Bootstrap 5
Backend: PHP 8.x
Database: MySQL 8.x
Tools: XAMPP/WAMP, VS Code, Git

🚀 How It Works (Local Setup)

Clone the repo (private, but I can share structure below)
Move to C:\wamp64\www\bookbridge\
Import database/bookbridge_db.sqlvia phpMyAdmin
Update includes/db.php with your DB credentials
Run http://localhost/bookbridge/

📁 Quick Project Structure

bookbridge/ ├── admin/ → Dashboard, manage users & books ├── assets/ → CSS, JS, images ├── database/ → SQL export ├── includes/ → Header, footer, DB connection, auth check ├── uploads/ → Book cover images ├── index.php → Homepage ├── register.php → Registration ├── login.php → Login ├── listings.php → Browse books ├── post-book.php → Add new book ├── messages.php → Messaging system ├── wishlist.php → Saved books ├── review.php → Ratings & reviews └── ...

👩‍💻 About Me

Sayuri Kotikawaththa
2nd Year, Web Programming @ BCI Campus, Negombo, Sri Lanka
📧 annsayu12@gmail.com

❓ Feedback I’d Love From You

How can I improve the user experience for buyers & sellers?
Any security or performance tips for a PHP + MySQL student project?
Would you use something like this as a student? Why or why not?

Thanks for reading! 🙌

If you’d like to see the code or collaborate, drop a comment or DM me – happy to grant access to serious contributors.