Hackató Jump2Digital

by Lua

Dependències

Al ser una aplicació de React necessitareu node.js per executar-la. Podeu descarregar-lo a la pàgina oficial. També necessitareu un navegador i una interfície de comandes.

Execució de l'aplicació

Primer descarrega't o clona aquest repositori.

Descarrega: En aquesta mateixa pàgina a la part superior dreta trobaràs un botó anomenat "code". En clicar-lo apareixerà un desplegable amb una opció de descarregar un zip.
Un cop descarregat simplement descomprimeix el zip.
GitHub Desktop: En cas de tenir GitHub Desktop al desplegable d'abans selecciona l'opció "obre amb GitHub Desktop" i segueix les passes a pantalla.
Clonar repositori (Linux o Mac): obre un terminal i executa la següent comanda: git clone https://github.com/dhsudev/jump2digital_hackato.git

Un cop descarregada o clonada obre una interfície de comandes i navega fins la ruta a ón tens ubicada la carpeta:

cd /ruta_fins_la_carpeta

Al estar en la carpeta, instal·la les dependències del projecte amb:

npm install

Executa l'aplicació en mode de desenvolupament.

npm start

Obriu http://localhost:3000 per veure'l al vostre navegador si no s'ha obert per defecte.

Funcionalitats

Informació de personatges

Cada personatge compta amb una targeta a on podem veure:

Una imatge seva (en cas de tenir)
Planeta d'origen
Última localització
Espécie
Dues etiquetes amb:
- Estat (Viu, Mort, Desconegut)
- Gènere (Home, Dona, Desconegut)

Cerca de personatges

He implementat una cerca de personatges en temps real. Està composta d'un input i un botó

Paginació

He afegit dos botons al peu de la pàgina per veure més personatges

Tecnologies utilitzades

React - Biblioteca de JavaScript. La seva metodologia se centra en la creació de components reutilitzables que gestionen el seu contingut i estat. En aquest projecte comptem amb el buscador, les targetes de personatges i els botons de paginació.

Bootstrap - Framework que facilita el disseny d'UI. (No he acabat d'implementar-ho correctament per a que la pàgina sigui responsiva del tot.) Sass (Syntactically Awesome Stylesheets) - Preprocessador de CSS que facilita el manteniment de fulles d'estil, ja que introdueix característiques adicionals com per exemple les variables.

React-paginate - La idea inicial era utilitzar aquesta biblioteca per fer una paginació més professional, però per falta de temps no he pogut implementar-la.

React-scripts - Conjunt de scripts que eviten haver de configurar manualment tota l'estructura del projecte.

dhsudev/jump2digital_hackato