Code Monkey home page Code Monkey logo

amtest's Introduction

HarryPotter UI ⚡

¿Cómo desplegar esta aplicación? 🚀

Primeros pasos (Asumiendo que ya cuentas con git instalado en tu computadora, un IDE y una terminal): Hacer fork del proyecto, posteriormente git clone, y npm i para instalar las dependencias empleadas. Desplegar el server: como uno de los requerimientos, este proyecto se realiza con json server por lo que se debe desplegar nuestro servidor: abrir la terminar y ejecutar el comando npm run mock-api Desplegar el local: ¡Asegurarte de que la ruta mostrada en la terminal es correcta! y ejecuta el comando * npm start *

Mi proceso de desarrollo 💻

¿Qué fue lo que más me gustó de mi desarrollo? ✅

  • Sin dudas fue un proyecto retador tanto por los requisitos como por el tiempo del que disponíamos. Ese fue el primer punto que me gusto: enfrentarme a un proyecto nuevo que conlleva muchos aprendizajes.
  • El uso de SASS para los estilos. 
  • Antes de este proyecto, no había tenido la oportunidad de realizar algún proyecto con SASS y creo que esta fue la oportunidad perfecta. Me gustó mucho la forma en que se pueden crear las variable pues abre todo un mundo de posibilidades para desarrollar los estilos de una manera más agradable. 

Si hubiera tenido más tiempo ¿Qué me hubiera mejorado o qué mas hubiera hecho? ⌛

  • Desarrollar el modo responsive
  • Me hubiera gustado que mi función de AGREGAR guarde la data, porque en este momento la ventana modal solo la crea. Y para finalizar, construir las pruebas unitarias. 
  • Creo que la curva de aprendizaje de Redux es larga pero me resultó interesante la forma en que se maneja, por lo que me hubiera gustado tener más tiempo para documentarme acerca de redux de una forma más sólida y terminar la ejecución de estos requerimientos. 

¿Cuáles fueron mis pain points y bugs y cómo lo solucioné? 🙌

  • El renderizado de los estilos de las tarjetas de los personajes según su casa de Hogwarts

  • Me gustaría mencionar que fue mi primera vez usando * SASS, JSON Server y Redux. * En ocasiones anteriores había usado otras herramientas para crear mocks de API's y por lo regular siempre uso css puro en los estilos. Entonces al leer el reto me enfrenté a muchas curvas de aprendizaje a la vez y aunque no completé todas las funcionalidades, si me llevo bastante aprendizaje:

  • Un pain point al que me enfrenté fue el renderizado de los estilos de las tarjetas de los personajes según su casa de Hogwarts, sin embargo logré afrontarlo una vez que comprendí la lógica de las variables en SASS y cómo ayudan a optimizar este tipo de procesos.

  • Tambien tuve un bug para llamar la data, lo solucioné empleando axios y haciendo la petición a la url correspondiente.

amtest's People

Contributors

maariliz avatar heatxel avatar

Forkers

ravalidesign

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.