Guía del stack FARM: cómo crear apps full‑stack con FastAPI, React y MongoDB

El generador de aplicaciones full‑stack FastAPI, React, MongoDB (FARM) es una potente herramienta diseñada para agilizar la creación de aplicaciones web de nivel producción. Al integrar FastAPI para el back end, React para el front end y MongoDB como base de datos NoSQL escalable, el generador FARM permite a desarrolladores de Python levantar aplicaciones robustas en minutos y con una configuración mínima. Es ideal si quieres centrarte en crear funcionalidades en lugar de pelearte con el código de arranque.

En este artículo presentamos el generador FARM, explicamos sus funciones clave, te guiamos paso a paso por la instalación y demostramos sus capacidades con un ejemplo real: una aplicación de gestión de tareas. Nuestro objetivo es mostrar cómo simplifica el desarrollo full‑stack y cómo ayuda a quienes programan en Python a crear aplicaciones escalables y listas para producción.

Si necesitas ponerte al día con MongoDB, no te pierdas el curso de DataCamp Introduction to MongoDB in Python. 

¿Qué es el generador de aplicaciones FastAPI?

El generador FARM automatiza la creación de una pila web completa con estos componentes:

• Configuración full‑stack: genera un back end en FastAPI, un front end en React y una base de datos MongoDB, todo integrado para desarrollar a gran velocidad.
• Autenticación preconfigurada: incluye OAuth2 con JWT, autenticación por enlace mágico y gestión de cookies para un acceso de usuario seguro. OAuth2 con JWT es como un “pase VIP” (token JWT) que recibes tras iniciar sesión para entrar en áreas privadas.
• Integración con Docker Compose: proporciona archivos de Docker Compose ya preparados para facilitar el desarrollo y las pruebas en local.
• Herramientas operativas: incorpora Celery para tareas asíncronas, Traefik para balanceo de carga y GitHub Actions para CI/CD, ofreciendo un entorno listo para producción.

Puedes consultar todas las funciones en el repositorio de GitHub.

Ventajas para desarrolladores

El generador FARM ofrece ventajas claras:

• Ahorro de tiempo: elimina tareas repetitivas de configuración, como la autenticación o las conexiones a base de datos, para que puedas ponerte a programar de inmediato.
• Mejores prácticas: garantiza una estructura escalable, segura y mantenible alineada con los estándares del sector.
• Flexibilidad: te da una base personalizable que puedes extender según las necesidades de tu proyecto.

Cómo ejecutar el generador de aplicaciones FastAPI con MongoDB

Para ilustrar sus capacidades, vamos a crear un proyecto de ejemplo. Estas instrucciones asumen que tienes Python 3.8+, Node.js, Docker y Docker Compose instalados.

Instrucciones paso a paso

Para la demo, crearemos un proyecto llamado task-manager. Asegúrate de tener instalado lo siguiente:

• Python 3.11+: preferiblemente 3.12, verificado con python3.12 --version.
• Node.js: para el front end en React.
• Docker Desktop: para el desarrollo en contenedores.
• MongoDB: instalación local (por ejemplo, con Homebrew: brew install mongodb-community@7.0) o MongoDB Atlas (usa una URI como mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority).
• Cookiecutter: para generar la plantilla del proyecto.
• Hatch: para la gestión de dependencias.
• MongoDB Compass (opcional): para visualizar la base de datos.

Antes de continuar, crea un entorno virtual con /usr/local/bin/python3.12 -m venv task-manager-venv y actívalo con source task-manager-venv/bin/activate.

1. Instala la librería cookiecutter: pip install cookiecutter
2. Genera el proyecto: usa el generador FARM para crear un proyecto:

cookiecutter https://github.com/mongodb-labs/full-stack-fastapi-mongodb --no-input project_name="task-manager"
cd task-manager

3. Instala MongoDB en local o usa MongoDB Atlas:

brew tap mongodb/brew
brew install mongodb-community@7.0
brew services start mongodb-community@7.0

Para Atlas, regístrate, crea un clúster gratuito y obtén una cadena de conexión (p. ej., mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority) para usar en tu archivo .env.

4. Configura las variables de entorno: 

Copia y edita el archivo .env:

cp .env.example .env
nano .env

Actualiza la URI de MongoDB, el nombre de la base de datos y los secretos:

MONGODB_URI=mongodb://localhost:27017
MONGO_DATABASE=task_manager
SECRET_KEY=your-secret-key
FIRST_SUPERUSER=admin@task-manager.com
FIRST_SUPERUSER_PASSWORD=changethis

5. Compila y ejecuta con Docker Compose:

Asegúrate de que Docker Desktop está en marcha y luego:

docker compose build --no-cache

1. docker compose up -d
2. Accede a la aplicación:
• Front end: http://localhost:3000
• Back end: http://localhost/api/v1
• Swagger UI: http://localhost/docs (documentación interactiva del API)
• ReDoc: http://localhost/redoc
• Flower: http://localhost:5555 (monitorización de Celery)
• Traefik UI: http://localhost:8090 (panel de enrutado)
3. Inicia sesión con admin@task-manager.com (contraseña: changethis).
4. Prueba la autenticación: usa Swagger UI (/docs) para probar los endpoints /auth/login o /auth/magic-link.
5. Configura CI/CD: haz push a GitHub para activar los flujos de trabajo incluidos de GitHub Actions.

Explora la estructura full‑stack generada

Al usar el generador FARM, se crea un proyecto task-manager con todo bien organizado. Es como entrar en una casa prefabricada donde cada estancia tiene su función:

• backend/: es la cocina donde funciona el back end de FastAPI. Incluye carpetas como app/ (tu código del API) y conf/ (ajustes) para gestionar tareas y datos.

• frontend/: es el salón donde las personas ven tu web, con Next.js/React. La carpeta app/ contiene páginas (p. ej., about, TaskList) con archivos como layout.tsx (el marco) y page.tsx (el contenido). En public/ se guardan recursos como el icono del sitio.

• Otros archivos: encontrarás docker-compose.yml (para arrancarlo todo con Docker), .env (tus ajustes sensibles) y .github/workflows/ (para pruebas automáticas al compartir el código).

Esta configuración está lista para escalar, y el generador añade herramientas muy útiles para facilitar el desarrollo.

Qué puedes hacer con las funciones del generador

El generador FARM viene con herramientas integradas que te ayudan a crear todo tipo de proyectos. Aquí tienes un vistazo sencillo a lo que hacen y cómo te benefician:

Integración con Docker Compose: optimizada para desarrollo local

• Qué hace: Docker Compose es como un botón mágico que levanta y ejecuta todo tu proyecto (back end, front end, base de datos) con un solo comando. Usa contenedores para mantenerlo todo aislado y es perfecto para probar en tu equipo.
• Cómo te ayuda: puedes arrancar tu app task-manager con docker compose up -d y pararla con docker compose down. Es ideal para probar ideas sin ensuciar tu sistema. Revisa su estado con docker compose ps; si todo está “Up”, ¡estás listo!

Ejemplo: tras configurar tu proyecto, ejecuta:

cd task-manager
docker compose up -d

Abre http://localhost:3000 para ver el front end: ¡lo tendrás todo funcionando en local!

Sistema de autenticación integrado

• Qué hace: añade un sistema de inicio de sesión con cuentas de usuario, incluido un superusuario por defecto (como admin@task-manager.com con contraseña changethis). Usa OAuth2 con tokens JWT (códigos de acceso seguros) y enlaces mágicos (acceso mediante enlace por email).
• Cómo te ayuda: puedes permitir que las personas se registren, inicien sesión o entren con enlace mágico. Pruébalo en http://localhost/docs (Swagger UI): busca /api/v1/login/oauth para testear el login. Es ideal cuando solo usuarios autorizados deben ver ciertos contenidos, como una lista privada de tareas.

Ejemplo: inicia sesión con el usuario por defecto:

1. Ve a http://localhost/docs.
2. Busca /api/v1/login/oauth, introduce admin@task-manager.com y la contraseña indicada, y pulsa “Execute”. ¡Recibirás un token JWT para acceder a páginas privadas!

El API de task-manager

Demostración del API de OAuth

Respuesta del API de OAuth

Funciones del back end en FastAPI

Veamos de cerca las funciones clave del back end con FastAPI y cómo simplifica las operaciones con la base de datos, el diseño del API y la escalabilidad.

• MongoDB Motor: es el motor que se comunica con tu base de datos MongoDB a gran velocidad, incluso con muchas peticiones simultáneas.
• MongoDB ODMantic: un ayudante que facilita guardar y consultar datos en MongoDB, como si ordenaras las tareas en cajas.
• Soporte CRUD común: CRUD significa crear, leer, actualizar y eliminar. Incluye utilidades listas para gestionar datos (como tareas) sin empezar de cero.
• Basado en estándares: sigue estándares como OpenAPI y JSON Schema, para que tu API sea clara y compatible con otras herramientas o apps.
• Cómo te ayuda: puedes construir un back end para almacenar tareas rápidamente. El generador te lo deja preparado y tú solo tienes que añadir tus ideas, como nuevas funcionalidades de tareas, sobre el código base.

Ejemplo: añade un visor rápido de tareas en backend/app/api/tasks.py:

from fastapi import APIRouter, Depends
from odmantic import AIOEngine, Model
from motor.motor_asyncio import AsyncIOMotorClient
router = APIRouter(prefix="/tasks", tags=["tasks"])
class Task(Model):
    title: str
async def get_db():
    client = AsyncIOMotorClient("mongodb://localhost:27017")
    return AIOEngine(client, database="task_manager")
@router.get("/")  # View all tasks
async def get_tasks(db: AIOEngine = Depends(get_db)):
    return await db.find(Task)

Pruébalo en http://localhost/api/v1/tasks tras reconstruir con docker compose up --build.

Front end con Next.js/React

El front end en React es donde las personas interactúan con tu app. Veamos su estructura y qué herramientas incluye para ayudarte a construir páginas pulidas y responsivas.

• Autorización por middleware: actúa como un portero, comprobando si hay sesión iniciada antes de mostrar ciertas páginas (p. ej., solo usuarios autenticados ven /TaskList).
• Validación de formularios con React Hook Form: garantiza que los formularios (como el de añadir tareas) tengan la información correcta antes de guardar.
• Gestión de estado con Redux: lleva el control de lo que ocurre (p. ej., tareas seleccionadas) para que tu app sea fluida incluso con muchos datos.
• CSS y componentes con TailwindCSS, HeroIcons y HeadlessUI: son herramientas de diseño listas para usar. TailwindCSS da estilo, HeroIcons aporta iconos y HeadlessUI te ofrece botones y menús accesibles.
• Cómo te ayuda: puedes construir una página de tareas con buen diseño, formularios sencillos y acceso seguro. El generador deja la base montada para que te centres en añadir funcionalidades.

Ejemplo: añade un formulario sencillo de tareas en frontend/app/TaskList/page.tsx:

import { useState } from 'react';
export default function TaskList() {
  const [task, setTask] = useState({ title: '' });
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    fetch('http://localhost/api/v1/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(task),
    });
    setTask({ title: '' });
  };
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold">Add Task</h1>
      <form onSubmit={handleSubmit}>
        <input
          className="border p-2"
          value={task.title}
          onChange={e => setTask({ title: e.target.value })}
          placeholder="Task name"
        />
        <button className="bg-blue-500 text-white p-2" type="submit">Add</button>
      </form>
    </div>
  );
}

Visita http://localhost:3000/TaskList para añadir una tarea.

Cómo hacer crecer tu gestor de tareas

El generador te da un punto de partida sólido para un gestor de tareas. Por ejemplo, puedes:

• Añadir un botón para marcar tareas como hechas usando las utilidades CRUD.
• Usar la autenticación para mantener tu lista de tareas privada.
• Darle estilo con TailwindCSS para que luzca genial.
• Configurar Celery para enviar recordatorios de tareas por email.

Otras ideas para explorar

Con estas funciones, puedes construir mucho más que un gestor de tareas:

• Blog o sitio web: guarda las publicaciones en MongoDB, muéstralas con FastAPI y diseña el sitio con Next.js.
• Tienda online: almacena productos en MongoDB, gestiona pedidos con Celery y crea la tienda con Next.js.
• Actualizaciones en vivo: muestra información en tiempo real (por ejemplo, el marcador de un juego) con MongoDB, funciones en vivo de FastAPI y un panel en Next.js.

Conclusión

El generador de aplicaciones FARM agiliza el desarrollo full‑stack con una pila preconfigurada y lista para producción que integra FastAPI, React y MongoDB. Al automatizar la configuración, seguir las mejores prácticas y ofrecer una arquitectura flexible, se convierte en una herramienta muy valiosa para quienes programan en Python. Ya sea para un gestor de tareas o una aplicación web compleja, el generador FARM acelera el desarrollo y garantiza la escalabilidad. Pruébalo hoy siguiendo los pasos de instalación y explora la documentación completa en el repositorio de GitHub para sacarle todo el partido.

Si quieres aprender más, echa un vistazo a estos recursos:

• Repositorio oficial: explora el código fuente, lee la documentación completa y consulta novedades o contribuye.
• Documentación de FastAPI: descubre más sobre las funciones de FastAPI y cómo impulsa el back end.
• Introduction to FastAPI Course: crea APIs robustas y listas para producción con FastAPI, dominando operaciones HTTP, validación y ejecución asíncrona para construir pipelines eficientes de datos y ML.