Veridē es un restaurante cuyo diferenciador es ofrecer platillos vegano-vegetarianos saludables recomendado por especialistas en nutrición; asemejándose a los platillos cotidianos en comidas rápidas como: Pizzas, hamburguesas, sushi, postres, etc.
El proyecto consiste en la realización de un ecommerce para el restaurante Veridē, enfocada para los siguientes roles: 🤵 Visitante y 👩 Usuario; con la finalidad de brindarles una herramienta que facilite sus actividades.
Constará con una vista inicial que ofrece información general de la empresa; y desde la cual se puede acceder a la sección de 'Inicio Sesión' y/o 'Registro'.
| VIDEODEMOSTRACIÓN |
|---|
 Link de Youtube |
| DEMO |
|---|
 Link del Despliegue |
| ROLES | DESCRIPCIÓN |
|---|---|
| 🤵 Visitante | Tendrá la opción de conocer sobre Veridē sin embargo deberá registrarse para tener los beneficios de un usuario. |
| 👩 Usuario | Tendrá los beneficios de un usuario registrado, entre los mas importantes, el poder realizar el flujo de compra con seguridad. |
| N° | SUB VISTAS | DESCRIPCIÓN |
|---|---|---|
| 1 | Sobre Veridē | Contiene información sobre Veridē, Sucursales, servicios, Reconocimientos y el Catálogo de Productos disponibles y agotados sin la opción de compra. |
| 2 | Inicio Sesión | Vista que contiene el formulario para el Inicio de Sesión, registro o recuperación de contraseña. |
| N° | SUB VISTAS | DESCRIPCIÓN |
|---|---|---|
| 1 | Sobre Veridē | Contiene información sobre Veridē, Sucursales, servicios, Reconocimientos y el Catálogo de Productos disponibles y agotados sin la opción de compra. |
| 2 | Inicio Sesión | Vista que contiene el formulario para el Inicio de Sesión, registro o recuperación de contraseña. |
| 3 | Configuración de Cuenta | Vista que contiene los datos del usuario(Personal, Dirección y Método de Pago) y con la opción de editarlos. |
| 4 | Catálogo de Productos | Muestra todos los productos con opción de filtrado por categorías, añadir a lista de deseos o carrito de compras. |
| 5 | Lista de Deseos | Muestra los productos que fueron seleccionados como favoritos. |
| 6 | Carrito de Compras | Muestra los prodctos seleccionados para realizar una compra y los detos del usuario registrado. |
| 7 | Historial de Compras | Contiene datos básicos por cada compra que realizó el usuario. |
| PÁGINA WEB | DESCARGABLE (PWA) |
|---|---|
| Se puede acceder a la página mediante el siguiente link. Recordar registrarse para poder interactuar con las funcionalidades del usuario. | Además, tiene la opción de descargase como PWA en cualquier dispositivo. |
| https://veride.netlify.app |  |
Se plantearon como usuarios a todas las personas interesadas en una alimentación saludable sin alejarse de los platillos comersiales.
Para acceder a las historias de usuario y los criterios de aceptación para cada rol, por favor, puede acceder a Este Link
Para el flujo en la base de datos para el backend se realizó el MER (método de Entidad Relación).
Para el diseño, usamos la definición de Atomic Design donde divide las páginas por átomos, moléculas y *organismos. Para ello, utilizamos la plataforma Figma para realizar el Wireframe y prototipado de Alta Fidelidad.
En esta fase se busca realizar un esquema virtual de los componentes y las vistas.
Teniendo como base el Wireframe, se realiza el diseño de la web considerando estilos, paleta de colores, otros recursos.
A continuación, le mostraremos el proceso y algunas imágenes de referencia para las siguientes secciones:
A continuación, se adjuntará una breve videodemostración del resultado final tanto en diseño como en funcionalidad.
La aplicación desplegada tiene más del 80% en puntuaciones de Performance, Progressive Web App, Accessibility y Best Practices de Lighthouse.
A continuación se muestran las estadísticas del performance:
-
Ruby:El lenguaje Ruby se utiliza principalmente en el desarrollo de aplicaciones web, pero también se puede utilizar para desarrollar otro tipo de aplicaciones de software, como veremos más adelante. Este lenguaje está disponible en plataformas como Windows, Linux y muchas otras, considerándose multiplataforma.
-
Ruby on Rails: Ruby on Rails es un marco de trabajo (framework) para el desarrollo de aplicaciones web, escrito en el leguaje de programación Ruby. Ruby es un lenguaje dinámico orientado a objetos, con sintaxis inspirada en Python, Perl y Smalltalk.
-
Rails Cors: El Intercambio de Recursos de Origen Cruzado (CORS (en-US)) es un mecanismo que utiliza cabeceras HTTP adicionales para permitir que un user agent (en-US) obtenga permiso para acceder a recursos seleccionados desde un servidor, en un origen distinto (dominio) al que pertenece.
-
PostgreSQL: Consiste en un gestor de bases de datos relacionales, soporta diferentes tipos de datos y está orientado a objetos. Es de código abierto, es decir, cuentan con una comunidad de desarrolladores que implementan mejoras o resuelven errores de forma altruista.
-
Figma: Figma es una aplicación basada en navegador para diseñar UI y UX que cuenta con excelentes herramientas de diseño, creación de prototipos y generación de código.
-
PostImage: Esta es simplemente una de las mejores soluciones que le permite alojar todo tipo de imágenes para sitios web, blogs y otras interfaces en el sitio web.
-
Sass: Usada para definir el estilo visual del proyecto.
-
React.js: Librería implementada para crear una interfaz de usuario interactiva de manera sencilla.
-
Javascript: Para dar la funcionalidad a la plataforma.
-
Heroku: Heroku integra servicios de datos y un ecosistema que permite implementar y ejecutar aplicaciones modernas. Proporciona a los desarrolladores un enfoque centrado en la aplicación que se integra con las herramientas y flujos de trabajo de desarrolladores más populares.
-
Netlify: Es un servicio de hosting para sitios web estáticos. Para usarlo primero necesitas crear una cuenta en Netlify y después puedes conectar tu repositorio.
-
PWA: Progressive web apps (PWA) o aplicación web progresiva es una solución basada en la web tradicional que todos conocemos.
- Yadira Condezo: Backend y Frontend
- Bautista Iglesias: Frontend
- Italo Ion Perez: Frontend
- Katerin Tello: Frontend
- Rosamaria Rodriguez: Diseñadora UX/UI y Frontend