We had a task to develop in group that consisted of making the frontend of an ecommerce type website using React as development environment. We were given a design but we were free to use another one or design it. Design
1.- Layout, dimensions and positioning of the elements on the page (top menu, shopping cart at the right menu, shopping cart on the right, logo on the left, welcome image in the background, etc.). welcome background image, etc). ✔
2.- It is up to the developers to decide the content of the Homepage:
- The images to be used, the style of icons, the name of the company or organization, logo, text and color palette. ✔
- The web application shall be divided into functional components. ✔
- Styles must be made with mobile first approach. ✔
- The design must be responsive, being able to adjust to the size of the device from from which the page is accessed. ✔
- To facilitate styling, Bootstrap or some other CSS library can be used. (optional). ✔
- When pressing the checkout button, a modal must be opened to confirm the purchase. ✔
- When confirming the purchase, the cart number should increase by one. ✔
- The Instagram image gallery must display at least 10 images in a carousel. ✔
Disclaimer: The name, images and all web content comprising the project is the property of the Apple brand. The images used, names and/or any intellectual property, is the property of Apple. The purpose of this project is purely and exclusively for educational purposes.
For the design we were inspired by the website of Apple.
It has a modern, minimalist design and offers us the pieces we need to build our version.
The design was devised using Figma and we created a base that would serve us as a reference Link.
To comply with guideline 1 (Layout, dimensions and positioning of the elements on the page), the layout was made using CSS, without any libraries.
Complying with the technical requirements, the site is developed with React, using components for each element. It is completely responsive and adaptable to any device screen size.
As for the functional requirements were also met with the functionality of the buy button, the increase in the number of products in the cart and the carousel of 10 images.
1.- The modal showing the products in the cart and all its functions to add or remove products, including cleaning the entire cart.
2.- The shopping cart keeps the products even if the site is reloaded, it is persistent.
3 .- Animations of elements such as images, text, buttons, transitions.
4 .- Variation between Carrousel products in version for mobile devices and product grid for larger screens.
5.- Modals with details of each product showing more features of it.
We hope you enjoy watching this project as much as we did making this. Best Regards!
Teniamos una tarea a desarrollar en grupo que consistia en realizar el frontend de un sitio web del tipo ecommerce usando React como entorno de desarrollo. Del mismo nos pasaron un diseño pero teniamos libertad para usar otro o diseñarlo. Diseño
1.- Layout, dimensiones y posicionamiento de los elementos en la página (menú superior, carrito de compras a la derecha, logo a la izquierda, imagen de bienvenida de fondo, etc). ✔
2.- Queda a criterio de los desarrolladores el contenido de la Homepage: • Las imágenes a utilizar, el estilo de íconos, el nombre de la empresa u organización, el logo, el texto y la paleta de colores. ✔
- La aplicación web deberá estar dividida en componentes funcionales. ✔
- Los estilos deben estar hechos con el approach de mobile first. ✔
- El diseño debe ser responsivo, pudiendo ajustarse al tamaño del dispositivo desde el cual se accede a la página. ✔
- Para facilitar los estilos, se puede utilizar Bootstrap o alguna otra librería de CSS (opcional). ✔
- Al presionar el botón de compra, se deberá abrir un modal para confirmar la compra. ✔
- Al confirmar la compra, el número del carrito deberá aumentar en uno. ✔
- La galería de imágenes de Instagram deberá desplegar al menos 10 imágenes en un carrusel. ✔
Descargo de responsabilidad: El nombre, imagenes y todo el contenido de la web que comprende al proyecto es propiedad de la marca Apple. Las imagenes utilizadas, nombres y/o cualquier propiedad intelectual, es propiedad de Apple. Los fines de este proyecto son pura y exclusivamente con fines educativos.
Para el diseño nos inspiramos en el sitio web de la marca de Apple.
Tiene un diseño moderno, minimalista y nos ofrece las piezas que necesitamos para armar nuestra version.
El diseño se ideó usando Figma y creamos una base que nos serviria de referencia Link
Para cumplir con la pauta 1 (Layout, dimensiones y posicionamiento de los elementos en la página), se realizó el maquetado usando CSS, sin ningun libreria.
Cumpliendo con los requerimientos técnicos. El sitio está desarrollado con React, usando componentes para cada elemento. Es completamente responsivo y adaptable a cualquier dispositivo.
En cuanto a los requerimiento funcionales se cumplió tambien con la funcionalidad del botón de compra, el incremento del numero de productos del carrito y el carrousel de 10 imagenes.
1.- El modal mostrando los productos en el carrito y todas sus funciones para agregar o quitar productos, incluso limpiar el carrito completo.
2.- El carro de compras mantiene los productos aunque se recargue el sitio, es persistente.
3.- Animaciones de elementos como imagenes, textos, botones, transiciones.
4.- Variacion entre Carrousel de productos en version para dispositivos mobiles y grilla de productos para pantallas mas grandes.
5.- Modales con detalles de cada producto mostrando mas caracteristicas del mismo.
Esperamos que disfrutes de ver este proyecto tanto como nosotros haciendolo. Saludos!