Mundo SKY ~ Food Truck
Confieso que este proyecto es uno de mis favoritos. En él incorporé Framer motion para crear animaciones y transiciones. Este proyecto es la prueba de cómo la innovación y el diseño se encuentran para crear experiencias únicas.
Screenshot: Página de Inicio.
Objetivos
La respuesta por parte del cliente ha sido muy positiva. El sitio web ha sido muy bien recibido por los usuarios. El objetivo principal era crear un sitio web que permitiera a los usuarios conocer la carta de los productos que ofrece el Food Truck, así como también, conocer la esencia de la marca.
Tecnologías
A continuación, te presento las tecnologías que forman la base del proyecto, entre otras que no se mencionan.
- React.js: Es una librería de JavaScript para crear interfaces de usuario. Es una de las librerías Frontend más populares y utilizadas en la actualidad.
- Next.js: Es un framework de React.js para producción para crear aplicaciones web. Es una de las herramientas más populares y utilizadas en la actualidad.
- Framer Motion: Es una librería de React.js para crear animaciones y transiciones.
- Google Sheets API: Es una API de Google para crear, leer, actualizar y eliminar datos de una hoja de cálculo de Google Sheets.
- React Hook Form: Es una librería de React.js para crear formularios.
- Toast Sonner: Es una librería de React.js para crear notificaciones.
Desarrollo
El desarrollo del proyecto se realizó en dos etapas. La primera etapa fue el diseño de la interfaz de usuario. La segunda etapa fue el desarrollo de la interfaz de usuario y conexión con la API de Google Sheets.
Screenshot: Menú a pantalla completa de los dos menús disponibles.
Se incluye un formulario de contacto para que los usuarios puedan contactar con el Food Truck. El formulario de contacto se conecta con la API de Google Sheets para recibir los datos de los usuarios y poder contactar con ellos.
La implementación de React Hook Form y Toast Sonner agrega un toque de eficiencia a la interacción del usuario, convirtiendo la experiencia del usuario en algo único.
Screenshot: Formulario de contacto.
Agradecimientos
Gracias por tomarte el tiempo de ver este proyecto. Espero que te haya gustado y te haya servido de inspiración para tus proyectos.