Configuración de Pila Completa Moderna: FastAPI + React.js + Vite + MUI con TypeScript

Este tutorial te guía a través de la creación de una aplicación full-stack utilizando FastAPI para el back-end, React.js con Vite para el front-end y Material-UI para una interfaz de usuario limpia, todo con TypeScript. La pila elegida es ideal para aplicaciones modernas debido a la velocidad y capacidades asíncronas de FastAPI, el entorno de desarrollo rápido y la estructura modular del front-end de React y Vite, y el aspecto pulido y profesional de MUI. La estructura del proyecto consiste en una carpeta de back-end para la aplicación FastAPI y una carpeta de front-end para la aplicación React con Vite. Para configurar FastAPI, necesitas crear un nuevo directorio, instalar poetry, agregar las dependencias de FastAPI y uvicorn. Luego, puedes crear un archivo main.py con una aplicación FastAPI básica y ejecutar el servidor utilizando uvicorn. Para el front-end, necesitas crear un nuevo directorio, instalar Vite y React con TypeScript, y agregar las dependencias de MUI y axios. También necesitas agregar configuraciones de proxy al archivo vite.config.ts para proxyar solicitudes de API al servidor FastAPI. Para conectar React a FastAPI, necesitas crear un componente App que realice una llamada API al servidor FastAPI utilizando axios y muestre el mensaje de respuesta. Finalmente, puedes ejecutar ambos servidores de back-end y front-end y acceder a la aplicación en http://localhost:3000. Este tutorial proporciona una configuración básica para una aplicación full-stack, y también puedes consultar un modelo de plantilla completo con características como autenticación de usuarios y integración de base de datos para la preparación para la producción y proyectos de inicio.