Full Stack Lab | Yan Pool Bedoya

Frontend · React

Task Board

Demo en vivo

Agrega tareas, márcalas como completadas o elimínalas. El estado se administra con hooks de React.

Cargando demo React…

Frontend · Vue 3

Task Board

Demo en vivo

La misma experiencia implementada con la reactividad de Vue y directivas de plantilla.

Cargando demo Vue…

Backend · Laravel

Diseño de API REST

PHP · Eloquent

Contrato de endpoints para conectar cualquiera de los dos frontends con un backend real. Esta sección documenta el diseño; no ejecuta Laravel en GitHub Pages.

GET/api/tasksListar tareas

POST/api/tasksCrear tarea

PATCH/api/tasks/{id}Actualizar estado o título

DELETE/api/tasks/{id}Eliminar tarea

Ejemplo de controlador Laravel

<?php

namespace App\\Http\\Controllers\\Api;

use App\\Http\\Controllers\\Controller;
use App\\Models\\Task;
use Illuminate\\Http\\Request;

class TaskController extends Controller
{
    public function index()
    {
        return Task::query()->latest()->get();
    }

    public function store(Request $request)
    {
        $data = $request->validate([
            'title' => ['required', 'string', 'max:120'],
        ]);

        return response()->json(
            Task::create($data),
            201
        );
    }
}

Nota de despliegue: GitHub Pages publica contenido estático. Para convertir esta API en funcional, se debe desplegar Laravel en un servidor compatible con PHP y configurar la URL de la API, CORS, autenticación y persistencia de datos.

Qué demuestra este laboratorio

01 · InterfazComponentes, formularios, eventos, validación y estado reactivo.

02 · APIDiseño REST, verbos HTTP, respuestas JSON y validación de entrada.

03 · IntegraciónSeparación frontend/backend y camino de evolución hacia persistencia y pruebas.