Fullstack Laravel Example - Burger Shop

0️⃣ Project Structure → Files & Folders

burger_shop/                # Laravel project root
│
├── app/
│   ├── Models/                # Eloquent models (Burger, CartItem)
│   └── Http/Controllers/      # Controllers for API & web
│
├── database/
│   └── migrations/            # Database schema
│
├── resources/
│   ├── views/                 # Blade templates (index.blade.php)
│   └── js/ css/               # Frontend assets
│
├── routes/
│   ├── web.php                # Routes for Blade views
│   └── api.php                # Routes for JSON API
│
├── public/                    # Publicly accessible folder
├── artisan                    # Laravel CLI
└── composer.json              # PHP dependencies
            

1️⃣ Database → Eloquent Models

// app/Models/Burger.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Burger extends Model {
    protected $fillable = ['name', 'price'];
}
            

2️⃣ Laravel Controllers → JSON API

// app/Http/Controllers/BurgerController.php
namespace App\Http\Controllers;

use App\Models\Burger;

class BurgerController extends Controller {
    public function index() {
        return response()->json(Burger::all());
    }
}
            

Add the route in routes/api.php:

use App\Http\Controllers\BurgerController;

Route::get('/burgers', [BurgerController::class, 'index']);
            

3️⃣ JavaScript → API Consumption

async function addToCart(burgerId, qty = 1) {
  const res = await fetch('/api/cart', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({burger_id: burgerId, quantity: qty})
  });
  return res.json();
}
            

4️⃣ Blade Templates → Initial Render

<ul id="catalog">
  @foreach ($burgers as $b)
    <li>
      <strong>{{ $b->name }}</strong> — ${{ $b->price }}
      <button class="add-to-cart" data-id={{ $b->id }}>Add</button>
    </li>
  @endforeach
</ul>
            

5️⃣ Testing → PHP & JS

// PHPUnit test for Burger model
public function testBurgerModel() {
    $burger = new Burger(['name' => 'Cheese', 'price' => 5.99]);
    $this->assertEquals('Cheese', $burger->name);
}

// JS test
async function testAddToCart() {
  const res = await addToCart(1, 2);
  console.log('Cart response:', res);
}
  

6️⃣ Complete Data Flow