Documentación del proyecto

Descripción

• La temática de este software es "tienda de artículos de limpieza". Continene algunos productos básicos para dar pleno uso y demostrar todas las funcionalidades de la app.

• Para este e-commerce, realizado como entrega final para el curso de ReactJS de CoderHouse utilicé:

  • CreateReactApp para su compilación,
  • react-sass para el pre-proceso de estilos,
  • react-toastify para los pop ups/notificaciones,
  • Firebase Firestore para alojar la data de los productos.
  • Firebase Auth para la autenticación con google.

---

Demostración

Estructura de los componentes

react-coder
├─ public
│ ├─ assets
│ │ └─ ...
│ ├─ favicon.ico
│ ├─ index.html
│ ├─ manifest.json
│ └─ robots.txt
├─ src
│ ├─ components
│ │ ├─ footer
│ │ │ └─ Footer.js
│ │ ├─ header
│ │ │ ├─ CartWidget.js
│ │ │ ├─ Header.js
│ │ │ ├─ Nav.js
│ │ │ └─ SignIn.js
│ │ └─ main
│ │ ├─ itemDetail
│ │ │ ├─ ItemCount.js
│ │ │ ├─ ItemDetail.js
│ │ │ └─ ItemDetailContainer.js
│ │ ├─ itemList
│ │ │ ├─ Item.js
│ │ │ ├─ ItemList.js
│ │ │ └─ ItemListContainer.js
│ │ ├─ About.js
│ │ ├─ Cart.js
│ │ └─ Contact.js
│ ├─ context
│ │ └─ CartProvider.js
│ ├─ styles
│ │ ├─ App.scss
│ │ ├─ _base.scss
│ │ ├─ _footer.scss
│ │ ├─ _header.scss
│ │ ├─ _main.scss
│ │ └─ _modal.scss
│ ├─ App.js
│ ├─ firebase.js
│ ├─ index.js
│ └─ PageNotFound.js
├─ package-lock.json
├─ package.json
└─ README.md

¿Como utilizar este software?

1. Clonar el repositorio

$ git clone https://github.com/GerardoDR/react-coder.git

2. Ingresar al directorio del proyecto

$ cd [ruta del proyecto]

3. Dentro del directorio del proyecto, instalar las dependencias de nodeJs correspondientes:

$ npm i

4. Dentro del mismo directorio y finalizada la instalación de dependencias, iniciar CreateReactApp con el siguiente comando:

$ npm start

Este comando inicia la app en el modo desarrollo.
Abrir http://localhost:3000 para verlo en el navegador.

La página se va a recargar automáticamente si se edita el código.

Implementaciones pendientes

• Sumar más métodos de autenticación.
• Mejorar estilos y animaciónes (spinner, transitions)
• Sweet alert o algún otro mecanismo para permitir que el usuario guarde su código de seguimiento (este queda guardado en session storage)
• Introducir cambios de precio y porcentajes de descuento de acuerdo a categorías y a cada producto en particular.
• Proveer la opción de mantener la sesión del usuario iniciada de manera persistente.
• Control de stock.
• Consumo de API de pagos.
• Build
  • $ npm run build : generar el código final y subirlo a un web server.

---