Code Monkey home page Code Monkey logo

react-pokedex-devoff-desafio-5's Introduction

Juanma-Pokedex Desafío 5 - 08/11/2020

Vamos a crear el frontend de un explorador de pokémones. Como inspiración, vamos a tomar el diseño realizado en 2019 por Saepul Nahwan:

En particular, nos vamos a enfocar en estas tres pantallas:

Hay vistas detalle del diseño en su perfil de Instagram aquí y un ejemplo de animaciones que se pueden implementar aquí.

Incluimos en este repositorio una spritesheet (una imagen que contiene múltiples imágenes en una grilla) que podremos utilizar para agregar pokemones al proyecto.

Condiciones del desafío

⛔ No hay implementación de backend en este proyecto, ni hace falta que estén todas las pantallas de la aplicación según el diseño.

⛔ No es necesario crear una vista desktop de la aplicación, ya como buena pokedex, nos gusta que sea portable. Todo el diseño será mobile-first.

✅ Podrás usar cualquier framework para resolver el desafío, ya sea de CSS o JavaScript.

✅ ¡Animate a experimentar! Hay muchísimas cosas que podrás aplicar a este desafío con la cantidad de elementos que hay en pantallas.

✅ 🆕 ¡Podrás trabajar individualmente o podrán presentar el desafío en pareja!

Algunas preguntas para explorar

  • ¿Es posible crear un sistema de diseño con componentes?
  • ¿Se pueden estandarizar los colores de alguna manera?
  • ¿Cómo estructuramos la información de un pokemon para que podamos renderizarla en componentes?
  • ¿Qué oportunidades de animación hay?

📚 Herramientas de consulta

Podrás utilizar cualquier herramienta de búsqueda que necesites (amamos buscar en Google y leer Stack Overflow <3).

Dejamos también un enlace sobre cómo utilizar spritesheets con CSS.

⏳ Tiempo

Para participar del torneo en vivo, tendrás hasta el 13/11/2020 inclusive para resolver el desafío.

Si estás participando como desafío personal, fuera del torneo, el tiempo recomendado del desafío es de hasta 5 días.

🤔 ¿Cómo presento mi código?

Si tenés una cuenta en GitHub

Hacé un fork de este repo:

Presionar el botón Fork, situado al comienzo de la página

Cloná tu fork, reemplazando [TU_ALIAS] con el nombre de tu cuenta de GitHub. Podés clonarlo utilizando la consola:

git clone https://github.com/[TU_ALIAS]/DevOff-Desafio-[NUMERO]

También podés utilizar GitHub Desktop, tu IDE favorito, lo que gustes.

Cuando tu desafío esté listo, agrega la etiqueta devoff-desafio-completado a tu repositorio, siguiendo estos pasos o agrega en tu archivo README.md un texto que diga ¡Este desafío está terminado!.

No olvides indicarnos si estás presentando el proyecto de manera individual o con otra persona. Podrás hacer esto agregando los nombres de las personas participantes en un archivo HUMANS.txt siguiendo este formato.

Si no tenés una cuenta en GitHub

Podés hacer clic aquí y mágicamente se descargará un archivo comprimido con todo lo que contiene este repositorio.

Cuando finalices la resolución del desafío, envianos un archivo ZIP con todo tu trabajo a través de WeTransfer o una carpeta compartida en Google Drive. Luego, envíanos el link a [email protected] o por Twitter a @DevOffArg.

⚖ Código de conducta

Participar de DevOff implica la aceptación de nuestro Código de Conducta.

Ante cualquier consulta, podrás recurrir a nuestro equipo de moderación.

💜 Agradecimientos

Jurados

Organizaciones aliadas

¡Gracias a Migue Moyano, Joel A. Villarreal Bertoldi y Agustín Carrasco del equipo de CoDeAr por dar una mano para que este proyecto sea posible!

Créditos

DevOff Argentina es un proyecto ideado por Aldana Denise, con el apoyo de CoDeAr.

¡Muchos éxitos y a codear!

react-pokedex-devoff-desafio-5's People

Contributors

ibarzabal-jm avatar joelalejandro avatar

Watchers

James Cloos avatar

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.