Prueba técnica Next.JS

Instrucciónes

Desarrolla las funcionalidades descritas en uno de los siguientes niveles, el mayor que tus habilidades permitan.

Requisitos generales:

  • En caso de implementar supabase, es necesario compartir las credenciales de la cuenta con acceso al proyecto de supabase.
  • El código desarrollado deberá utilizar git como su administrador de versiones (de preferencia publicado en github), se deberá utilizar el estandar de la industria para agregar y modificar funcionalidades.
  • Se deberá entregar el código fuente y este deberá de poder ser reproducido en otro ambiente.
  • Se deberá entregar documentación de lo trabajado en supabase y en next.js.
  • Se comenta correctamente dentro del código.
  • El tiempo de entrega es de hasta 2 semanas posteriores a recibir esta prueba.

Nota: Puedes encontrar el enlace de entrega al final de esta página.

Nivel 1:

  • Se implementa el diseño de Orders y Login correctamente con Next.js versión 14, se usan valores estáticos y no existe una conexión a un backend.
  • En el login se usan toasts para mostrar el estatus del intento de login previo a la redirección a la vista de “Orders”

Nivel 2:

  • Se crea una instancia de Supabase con una tabla de “Orders” (ver figma) de la cual se obtiene la información que es mostrada en el cliente, ya sea por llamada a la API rest de supabase o por conexión directa a la base de datos.
  • Se implementa el diseño de Orders y Login correctamente con Next.js versión 14, se usan valores obtenidos de la llamada a la base de datos.
  • Se implementa autenticación de supabase con correo.
  • Se implementa el diseño de “Pictures”, en la cual se pueden subir 1 o múltiples imágenes y estas son almacenadas en supabase (bucket público).
  • En “Orders” se implementa el filtrado por orden en cada columna, filtrado por estatus y paginación.
  • En el login se usan toasts para mostrar el estatus del intento de login previo a la redirección a la vista de “Orders”

Nivel 3:

  • Se crea una instancia de Supabase con las siguientes tablas: “Orders” y “Pictures” (ver figma) de las cuales se obtiene la información que es mostrada en el cliente, ya sea por llamada a la API rest de supabase o por conexión directa a la base de datos.
  • Se implementa el diseño de Orders y Login correctamente con Next.js versión 14, se usan valores obtenidos de la llamada a la base de datos.
  • En el login se implementa un toast para mostrar el resultado al login previo a la redirección a la vista de “Orders”.
  • Se implementa autenticación de supabase con al menos 2 proveedores (correo, Google, Apple, Facebook).
  • Se implementa el diseño de “Pictures”, en la cual se pueden subir 1 o múltiples imágenes y estas son almácenadas mediante supabase (bucket privado) con permisos adecuados.
  • Se establecen políticas de RLS correctas para que solo el usuario ingresado pueda acceder a sus fotos y órdenes (tomar en cuenta la id del dueño de la orden, no del “customer”).
  • En “Orders” se implementa el filtrado por orden en cada columna, filtrado por estatus y paginación.
  • Todas las pantallas son responsivas.

Nivel 4:

  • Se implementan todos los criterios del nivel 3.
  • Se crean scripts para desplegar el cliente (no el backend) con docker (Dockerfile y docker-compose.yml)

Al finalizar no olvides: