Mercado App Test

Proyecto web realizado con:

  • React Js: 17.0.2
  • TypeScript: 4.5.5
  • redux-toolkit: 1.7.2
  • axios: 0.26.0
  • React Icons: 4.3.1
  • React Redux: 7.2.6
  • Style Components: 5.3.3

Aplicación

  • Cuenta con una correcta adaptación a dispositivos móviles.
  • Paleta de colores suave, conformada por:
    • lila/Rosado, blanco, negro, gris.
  • Con funcionalidades como:
    • Visualización de productos de un endpoint especifico.
    • Agregar productos al carrito.
    • Edición de cantidades del carrito.
    • Visualización del valor total actual.

Ejecución

  • Clonar Repositorio mediante: https://github.com/sebastiansandoval27/mercado-app.git
  • Ingresar a la carpeta del proyecto
  • Ejecutar el comando "npm install" para instalar dependencias
  • Al terminar, ejecutar el comando "npm start"
  • Visualizar en navegador web (escritorio, móvil, tablet).

Demo

Proceso Desarrollo:

  • 2 horas:
    • Inicio con lectura de requerimientos.
    • Conceptualización y elección de herramientas.
    • Creación de proyecto Inicial.
    • Instalación de Dependencias.
    • Creación componentes base (Header, Layout)
  • 3 horas:
    • Configuración de Redux con Redux-Toolkit.
    • Primera consulta a base de datos por los productos.
    • Creación componente Grid para los productos.
    • Creación componente para cada producto.
  • 4 horas:
    • Creación componente Carrito
    • Creación componente Producto para el Carrito
    • Modificación configuración redux para la edición de elementos en el carrito.
    • Deploy del proyecto.
  • 1 hora:
    • Creación de documentación respectiva.

Elección de Herramientas

  • React y TypeScript: Es el framework con el que mas tiempo he trabajado y tengo conocimiento; por otra parte, TypeScript me parece que es indispensable para mejorar el desarrollo y el resultado final.
  • Style – components: Presenta gran facilidad para manejar los estilos, propiedades y herramientas de React, logrando más velocidad a la hora del desarrollo.
  • Redux – Redux-toolkit: Considere esta alternativa, primero, por que tengo más experiencia con Redux y segundo, la aplicación, aunque no es muy grande, si consideré que iba a quedar más organizada utilizando Redux.