Transformez l'architecture d'une application existante

Plot

This code contains the minimal changes required to migrate the Renote application from a monolithic Laravel + Livewire architecture to a Laravel + React architecture with proper MVC backend structure.

Implemented Changes

Frontend Architecture

• View Layer: React JSX components for UI presentation (Notes.jsx)
• State Management: Zustand stores for centralized state and API communication (useNotesStore.js)
• Benefits: Centralized state management with Zustand, clean separation between UI and business logic

Backend MVC

• Controller Layer: NoteController refactored to handle only HTTP concerns
• Service Layer: NoteService created with business logic for CRUD operations
• Repository Layer: NoteRepository and NoteRepositoryInterface for data access abstraction
• DTOs: Data Transfer Objects (CreateNoteDTO, NoteDTO) for type-safe data handling
• Form Requests: StoreNoteRequest for centralized validation logic
• Dependency Injection: Interface-based injection with service provider binding

Architecture Benefits

• Centralized State Management: Zustand stores provide predictable state updates and actions
• UI/Logic Separation: React components focus on presentation, Zustand handles state and API calls
• Backend MVC + Repository: Clear separation between HTTP, business logic, and data access layers
• Data Access Abstraction: Repository pattern isolates database concerns from business logic
• Testability: Each layer can be tested independently with easy mocking
• Maintainability: Business logic centralized in service classes and Zustand stores
• Flexibility: Easy to switch data sources without affecting business logic
• Type Safety: DTOs and interfaces provide consistent data structures

What remains to do:

• Migrate authentication to React components
• Add back and migrate the Tag component (removed for simplification)

Install

1. Install Laravel's Herd: https://laravel.com/docs/12.x/installation#installation-using-herd

This will install Php, Composer and Laravel.

2. Install node v22

Install node version manager (MVN). On Windows you can use this distribution: https://github.com/coreybutler/nvm-windows#readme

3. Clone this project

4. Run npm i and npm run dev

5. Start Herd

6. Access http://mvc-php-react.test from your browser

You are setup!