Soy desarrollador fullstack. Uno de mis objetivos día a día es ser mejor que antes. Soy una persona a la que le gusta mucho los desafíos. Conocí el mundo del desarrollo web a mediados del 2020, cuando unos compañeros me invitaron a un proyecto cuyo cual objetivo era desarrollar una pagina web. En ese proyecto conocí tecnologías como ReactJS y NodeJS, y desde ese momento supe que me quería dedicar a esto. Si quieren ver mis proyectos los podrán encontrar en mi [GitHub](https://github.com/gonza-lab?tab=repositories).


thumbnail_cara.png

cara.png

LinkedIn

GitHub

large_stars-1.jpg

medium_stars-1.jpg

small_stars-1.jpg

thumbnail_stars-1.jpg

stars-1.jpg

Este proyecto lo realicé de forma individual. Hice yo mismo tanto el Front End como el Back End. El objetivo de esta aplicación es que el cliente pueda manejar su negocio de forma sencilla y cómoda.

## Front End

Los pilares del Front End de esta aplicación son: 

- **React**
- **Redux**
- **MaterialUI**

Elegí hacer un manejo del estado de la aplicación con **Redux**, ya que considero que una aplicación como CRM requiere un manejo de estado consistente y rápido. **Redux** nos provee estas características. Además la librería nos provee una buena experiencia desarrollo por lo que los tiempos de desarrollo de los componentes son mucho menores. **Redux** también provee una conjunto de herramientas para las tareas repetitivas llamada `redux toolkit`, las cuales se utilizan mucho en este proyecto.

Elegí una librería de componentes para la interfaz porque considero que esto reduce mucho los tiempos de desarrollo y los esfuerzos. Luego, elegí **MaterialUI**, ya que tiene componentes altamente customizables lo que permite que se puedan adaptar a múltiples escenarios y además se pueden configurar de forma sencilla.

## Back End

El Back End lo desarrollé con **NestJS**, un framework que se ejecuta en Node y cuya arquitectura se inspira en Angular. Elegí este framework por su buena documentación y por la buena estructura de componentes que tiene. Además nunca había desarrollado backend en otra cosa que no sea Node y Express, por lo que decidí experimentar con **NestJS**. Me dio muy buenas resultados, la experiencia de desarrollo fue muy buena y me terminó gustando mucho el framework.


## Diseño

Para realizar el diseño, me basé en un [template](https://mui.com/store/previews/devias-kit/) creado por MaterialUI. Elegí este template ya que lo considero atractivo y con una buena experiencia de usuario. Lo que es la construcción del Front End la realicé yo mismo. Esta aplicación está preparada para ajustar el tema de la web a gusto, a través del archivo [theme](https://github.com/gonza-lab/crm-react/blob/master/src/theme/theme.ts) 

## Next Steps

En un futuro, me gustaría agregar un _routeador automático_ de pedidos. ¿Qué significa esto? Que yo selecciono los pedidos que quiero entregar en un día, y la aplicación me traza la ruta más óptima en un mapa. Esto puede servirle al cliente para ahorra tiempo, costos de combustible y personal.

Screenshot at 2022-07-29 23-12-18.png

Esta aplicación web esta destinada a gestionar la generación de pedidos, productos y clientes.

Telecom Institucional fue el primer proyecto profesional del que fui parte con el equipo de [EstoEs](https://www.estoes.me/). Mi rol en este proyecto era de desarrollador **front end** y **reviewer de pull requests**.

En este proyecto utilizamos React como librería base para el front end. Para estructurar los componentes, utilizamos [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/). Me gustaría destacar otras librerías que usamos para el proyecto y con las que cuento experiencia:
- **Next**: [Next](https://nextjs.org/) lo utilizamos para mejorar la performance del anterior sitio y tener una mejor SEO. Considero que fue una buena decisión. En este sitio utilizamos ```getServerSideProps``` por lo que lo convirtió en un sitio hibrido. Fue la primera vez que utilicé Next, y la experiencia que me llevo es buena. Es una librería que me gustó mucho y planeo utilizarla en próximos proyectos.

- **MaterialUI**: [MaterialUI](https://mui.com/) es una librería de componentes de React, que se basa en la normativa de diseño [Material Design](https://es.wikipedia.org/wiki/Material_Design). De esta librería utilicé componentes para armar el layout, tales como ```Container```, ```Grid```, componentes para formularios, hasta componentes mas complejos. De esta librería me llevo experiencias muy positivas, permitió tener una mejor experiencia de desarrollo y nos ahorró mucho tiempo. La documentación es muy buena, y los componentes son muy faciles de personalizar. Además es una librería muy potente que permite crear temas y tu propio design system. 

- **Redux**: [Redux](https://redux.js.org/) es un contenedor predecible de estado. Lo utilizamos para manejar el estado de las [notas](https://institucional.telecom.com.ar/prensa) del sitio. Lo utilizamos junto a [Redux Thunk](https://github.com/reduxjs/redux-thunk) para las peticiones asíncronas. Lo que es el estado, acciones y selectores lo hicimos a mano, sin Redux Dev Toolkit, si hubiéramos utilizado este los tiempos de desarrollo hubiesen sido más rápidos.

## Qué me pudo haber salido mejor 
Creo que el tipado es un punto a mejorar en este proyecto. Hubiera sido buena idea utilizar TypeScript, la experiencia de desarrollo habría mejorado. También me hubiera gustado mejorar más lo que es el manejo de estados en las notas, y como se pedía la información a la api.

Otra cosa que me hubiera gustado mejorar es como personalizábamos el SEO. El problema que teníamos, era asignar una etiqueta a un componente, según en que sección este. Por ejemplo, supongamos que tenemos un componente ```<Title>```, y este componente va a estar en la sección Inicio, y en Contacto. En inicio tiene que ser un ```h1```, y en Contacto un ```h2```. Me dirán que le pase la etiqueta que quiero que sea una prop llamada ```tag``` (por ejemplo). Pero en este sitio teníamos componentes mas complejos, y no era tan sencillo como pasarle una prop, ya que un mismo componentes podía estar en mas de dos secciones, y también un mismo componente tenia diferentes 'variantes'.

## Qué me salió bien
Lo que si me gustó como se hizo, es la reutilización de componentes. Con el equipo hicimos componentes con un buen grado de reutilización, lo que permitió sacar secciones y sub-secciones mas rápido, ya que se utilizaban componentes hechos en anteriores secciones.

## Qué aprendí 
Como dije Telecom Institucional fue el primer proyecto profesional del que fui parte. Aprendí a trabajar y comunicarme con el equipo. Aprendí a utilizar plataformas como BitBucket, Slack y Teams de Microsoft. Por el lado técnico, aprendí Next, MaterialUI, entre otras.

## Conclusión
De este proyecto me llevo cosas muy positivas. Cuando ves en producción algo que te costó trabajo, es una sensación espectacular, y mas cuando ves con la calidad que salió. De este proyecto me llevo cosas a mejorar, como la comunicación y también librerías para utilizar en futuros trabajos, como Material y Next.

telecom-logo.png

El sitio institucional de Telecom. Desarrollado con NextJS, en este proyecto tuve la oportunidad de aprender a trabajar en equipo cómo también mejorar mis habilidades técnicas.

Telecom Institucional

Landings de la que fuí parte:

- [Home Personal](https://www.personal.com.ar/)
- [Ofertas](https://www.personal.com.ar/ofertas)
- [Planes y packs](https://www.personal.com.ar/planes-packs)

Mi trabajo en estos proyectos era aplicar el nuevo key visual con el objetivo de llegar a la unificación marcaria de Telecom. Los componentes venian con el HTML previamente armado (por el equipo de Telecom y Globant) listos para estilar. Había veces que se debía cambiar la estructura de estos para poder cumplir con el diseño propuesto, por lo que había que comunicarse con el equipo de desarrollo para llegar a estos cambios. 

Para el estilado utilizamos [SASS](https://sass-lang.com/). En estos proyectos aprendí mucho del estilado, ya que me dedicaba unicamente a esa parte. Como estabamos en constante contacto con el equipo de desarrollo para destrabar bloqueantes, mejoré mi comunicación. 

Al estar en múltiples proyectos a la vez, perdía mucho tiempo switcheando entre landings bajando proyectos y levantando otros. Por lo que decidí usar un  multiplexor de terminal llamado [TMUX](https://es.wikipedia.org/wiki/Tmux). Esta herramienta me permitió tenes multiples proyectos prendidos al mismo tiempo, por lo que para switchear entre proyecto solo tenía que hacer una combinación de teclas y listo. Mejoró mucho mi productividad.

telecom-personal.flow.png

Estuve encargado de realizar el estilado de las principales landings de Personal. Aprendí a trabajar en múltiples proyectos al mismo tiempo.

Gonzalo Flores

Proyectos

CRM

Telecom Institucional

Landings Telecom

Sobre mi

Habilidades