Crearé tu front-end de React o Next.js a partir de un diseño de Figma y lo conectaré a tu API

El diseño está hecho y la API está lista o casi lista, pero las pantallas que verán los usuarios aún no existen. Yo construyo solo el front-end: tu backend, proveedor de autenticación y alojamiento permanecen como están, y el código va a tu repositorio. Durante 14 días después de la entrega, corrijo cualquier cosa que no funcione como acordamos, sin cargo.

Con Starter obtienes una pantalla o página de tu archivo Figma, responsiva y tipada, con sus datos provenientes de tu API, o de un mock hasta que exista el endpoint. Standard cubre hasta cinco pantallas conectadas a tu API, con estados de carga, vacío y error, y formularios con validación. Advanced permite hasta doce pantallas y añade pantallas de inicio de sesión que funcionan con tu proveedor de autenticación, componentes compartidos utilizados en toda la aplicación y pruebas para los flujos principales.

Sigo el diseño de cerca: el espaciado, la escala tipográfica y los colores provienen del archivo Figma. Cuando una pantalla no tiene una versión móvil, propongo una antes de construirla en lugar de adivinar. Next.js con el App Router es mi opción predeterminada; React puro con Vite está bien cuando no necesitas renderizado del lado del servidor. Para el estilo, uso Tailwind CSS o CSS Modules, lo que ya tenga tu proyecto.

Verifico el resultado en Chrome, Firefox y Edge en escritorio, y en Chrome en un teléfono Android real.

Dos ejemplos públicos de mi trabajo de front-end están en el portafolio: una tienda Next.js con filtros, un carrito y un proceso de pago, y mi propio sitio bilingüe.

Trabajo solo por escrito, sin reuniones. Las pantallas y los puntos finales detrás de ellas se enumeran antes de comenzar, un enlace de vista previa muestra el trabajo a medida que avanza, y una breve nota de progreso llega al chat cada día hábil.

Pasos para completar tu proyecto
1. Lista de pantallas - Reviso el archivo Figma y la documentación de tu API y anoto cada pantalla, sus estados y los puntos finales que llama. Confirmas la lista antes de cualquier código.
2. Partes base y compartidas - Configuración del proyecto o tu repositorio existente, colores y tipo de Figma, y el diseño y los componentes que cada pantalla reutiliza.
3. Pantallas y datos - Cada pantalla se construye según el diseño y se conecta a tu API, con estados de carga, vacío y error. Un punto final faltante obtiene un mock que es fácil de intercambiar.
4. Ronda de revisión en el enlace de vista previa - Haces clic y envías correcciones en una lista. Las corrijo y muestro el mismo enlace de nuevo.
5. Entrega - El código en tu repositorio, una breve nota sobre la estructura y cómo ejecutarlo, y en Advanced, pruebas que puedes ejecutar antes de cada lanzamiento.