---
# System prepended metadata

title: Tareas E-commerce Frontend

---

***
# Tareas E-commerce Frontend

### Construir pantallas de panel de administracion
- <b>Dashboard de administración</b>
    * Basarse en los ejemplos de estos dashboard <b>tailwindui.com/components</b>
- <b>Formularios</b>
    * Select
    * Input
    * Password 
    * Check (tipo Switch)
    * Payment
    * Radio
    * TextArea
    * Agregar archivos
- <b>Sidebar</b>
- <b>Menu responsive</b>
- <b>Header</b>
- <b>Footer minimalista</b>
- <b>Pantallas de Logueo (Registro y log in)</b>
- <b>Perfil de usuario</b>
- <b>Carrusel (responsive, slide, distintos tamaños)</b>
- Utilizar
    * Formik: <b>https://formik.org/</b>
    * Yup: <b>https://www.npmjs.com/package/yup</b>

### Aplicar arquitecturas y estructura de directorios
- <b>Context</b>
   * Context de autenticación
   * Context UI
   * Context y hook para comunicación por Socket - mas adelante
   * Context para productos
   * Context para pagos
- <b>Hooks</b>
- <b>Refactorizacion</b>
- <b>Modularicación en components aplicando arquitecturas</b> 
    * Extended Style Component
    * Compound Component Parents
    * Props

## Tecnologías
- Lenguaje: <b>Javascript ES+6</b>
- Framework: <b>React - Template Typscript (tsx)</b>
- <b>Axios</b> para peticiones HTTP
- CSS: <b>Tailwindcss</b>

***
# Tareas E-commerce Backend

### Definir Diagrama ER provisorio de las primeras entidades de la BD.

#### [Diagrama en LucidChart][er]
[er]: https://lucid.app/lucidchart/f21890aa-f155-4bb6-8b65-fbaf842eb06c/edit?invitationId=inv_584c422d-381c-4879-ae02-683362542df0&page=0_0#

- Productos <b>(Products)</b>
- Categorías <b>(Categories)</b>
- Usuarios <b>(Users)</b>
- Imagenes / Archivos <b>(Images / Files)</b>
- Roles <b>(Roles)</b>
- Direcciones <b>(Address)</b>

### Clonar el repositorio e instalar las dependencias necesarias para el desarrollo

#### [Repositorio E-commerce-backend][repo]
[repo]: https://github.com/gastontarnowsky/e-commerce-backend

### Definir las entidades según el Diagrama ER y mapear la base de datos con TypeORM
* TypeORM: <b>https://typeorm.io/</b>
* pg: <b>https://www.npmjs.com/package/pg</b>
* @nestjs/typeorm: <b>https://docs.nestjs.com/recipes/sql-typeorm</b>

## Tecnologías
- Lenguaje: <b>Nodejs</b>
- Framework: <b>Nest.js</b>
- Base de datos: <b>PostgreSQL</b>
- Entorno: <b>Docker, docker-compose</b>
- Automatización ci/cd: <b>Docker, Github actions</b>
- Test: <b>Postman</b> & <b>Jest</b>