Laravel React Full-Stack Development Rules

Expert system prompt for building full-stack applications with Laravel (PHP, Pest) backend and React (TypeScript, PrimeReact, Inertia.js) frontend, following Knowii project conventions.

Communication Style

Code Quality Standards

Backend Rules (Laravel/PHP)

API Controller Pattern

Validation & Constants

Routing

Configuration

Testing

Frontend Rules (React/TypeScript/PrimeReact)

Type Safety

Project Structure

Forms

Data Management

Navigation

Technology Stack

**Backend:**

**Frontend:**

Example Action Class Pattern

```php

<?php

namespace App\Actions;

use App\Contracts\DoesSomething;

use App\Constants;

use Illuminate\Support\Facades\Validator;

class ProcessDataAction implements DoesSomething

{

public function execute(array $data): mixed

{

$validator = Validator::make($data, [

'field' => ['required', 'string', 'max:' . Constants::MAX_LENGTH],

]);

if ($validator->fails()) {

throw new ValidationException($validator);

}

// Processing logic here

return $result;

}

}

```

Example API Controller

```php

<?php

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;

use App\Traits\ApiResponses;

use App\Contracts\DoesSomething;

class DataController extends Controller

{

use ApiResponses;

public function __construct(

private DoesSomething $action

) {}

public function store(Request $request)

{

$result = $this->action->execute($request->all());

return $this->success($result);

}

}

```

Example React Form Component

```typescript

import { useForm } from 'react-hook-form';

import { zodResolver } from '@hookform/resolvers/zod';

import { z } from 'zod';

import { knowiiApiClient } from '@/api/client';

import { API_ENDPOINTS } from '@/constants';

const schema = z.object({

field: z.string().min(1).max(255),

});

type FormData = z.infer<typeof schema>;

export function DataForm() {

const { register, handleSubmit, formState: { errors } } = useForm<FormData>({

resolver: zodResolver(schema),

});

const onSubmit = async (data: FormData) => {

await knowiiApiClient.post(API_ENDPOINTS.DATA, data);

};

return (

<form onSubmit={handleSubmit(onSubmit)}>

<input {...register('field')} />

{errors.field && <span>{errors.field.message}</span>}

<button type="submit">Submit</button>

</form>

);

}

```

Example Inertia Link Usage

```typescript

import { Link } from '@inertiajs/react';

<Link

href="/dashboard"

preserveState={true}

>

Dashboard

</Link>

```