clonando-rvieverxmouredev

CLONANDO TWITTER

Replica la UI del feed de Twitter en tu propia app.
Junio 2022

 😻 Este es el reto mensual creado por MoureDev. Él mismo lo revisará y dará feedback sobre las soluciones de la comunidad en uno de sus streams de Twitch 

A veces no nos damos cuenta de la importancia que tienen la UI y UX en las apps que usamos diariamente. ¿Habrían llegado Twitter, Spotify o Slack a ser lo que son hoy sin haber cuidado tanto la interfaz de los usuarios? Probablemente, no. 

Desde hace años, Twitter ha sido muy selectivo con sus funcionalidades, y se ha centrado en proporcionar a sus usuarios una gran experiencia de uso. La calidad de esta puede ser un gran punto diferenciador a la hora de que nuestra app sea un éxito. 

El objetivo desde este reto es que seas capaz de replicar la capa visual del feed principal de Tweets en tu propia app. ¿Te animas a clonar la UI de Twitter?


Ideal para

Junior · Middle

Stacks disponibles:

Android · iOS · WebApp

Experiencia requerida:

Conocimiento Básico

¿QUÉ ES LO QUE CREARÁS?

Crearás una aplicación que represente de la forma más fiel posible un timeline ficticio de Twitter, mostrando distintos tipos de tweets a modo de ejemplo. 

Cuanto más similar al diseño original, mejor, aunque no es necesario representar todas funcionalidades actuales de Twitter. El objetivo del reto se centra principalmente en tener la capacidad de saber crear UI en base a un diseño ya existente.

Para este reto, puedes clonar la versión web, iOS o Android de Twitter. 

Twitter_mockup
twitter-feed
El feed debe mostrar tweets de los siguientes tipos:
  • Tweet de texto.
  • Tweet con una imagen.
  • Tweet con hasta 4 imágenes.
  • Tweet con gif
Los datos a mostrar no tienen que ser reales. Puedes definir tu propio set de prueba con tweets que contienen imágenes, textos, likes..

El cada tweet puede contener las siguientes funcionalidades:

  • Mostrar el número de likes, retweets o comentarios.
  • Representar hashtag o menciones (sin interacción).
  • Representar links (con interacción y apertura en un navegador).
  • Foto de usuario, nombre, fecha, cuerpo del tweet y botones de acciones.
  • Queda a tu elección otras funcionalidades extra. Por ejemplo:
    • Tweet con vídeo o encuesta.
    • Detalle del tweet para mostrar comentarios.
    • Detalle y ampliación de imagen.

¡PUNTO EXTRA!

Todo usuario de Twitter sabe que hay algunos puntos clave de la aplicación que podrían mejorarse, ¡incluso Elon Musk! 😜

Así que, si quieres desafiarte un poco más, intenta mejorar la aplicación de Twitter con nuevas funcionalidades que crees que se pueden mejorar. Puedes centrar estas mejoras solo en la UI, o incluso en la UX y los flujos de usuario.

Elon
¿CÓMO FUNCIONA?
  • Resuelve el challenge y demuestra de lo que eres capaz
  • Recibe feedback sobre tu código por parte de nuestros expertos
  • Compara tu app con la de otros participantes a través del directo en Twitch de MoureDev
  • Construye tu portfolio con todos tus challenges completados 
¿QUÉ CONSEGUIRÁS?
  • Crear una app / webapp y poner a prueba tus habilidades de código
  • Feedback por parte de nuestros expertos Tech Mentors
  • Un completo report de tus skills - con la posibilidad de compartirlo
  • Tu propio portfolio técnico para utilizar en entrevistas laborales
  • Entrar en el sorteo de 100€ mensuales en material formativo
  • Posibilidad de que Rviewer publique tu proyecto como referencia para quienes se animen a crear su propia app

SOBRE EL CREADOR

MoureDev

Brais Moure (a.k.a. MoureDev) es un desarrollador full-stack, especializado en el desarrollo de aplicaciones iOS, Android y web. Además de crear más de 100 apps como freelance, MoureDev dedica gran parte de su tiempo a compartir sus conocimientos con la comunidad dev.

Actualmente es uno de los principales creadores de contenido de programación en España, con más de 210k suscriptores en Youtube y más de 25k seguidores en Twitch.

Echa un vistazo a sus redes y salúdalo de nuestra parte. 👋🏽 

Empieza ahora el Twitter Mirroring challenge

¿Listo para ponerte a prueba y construir algo de lo que estar orgulloso/a?

Más challenges

Icon
Challenge by
Rviewer
Memory game
Crea un "memograma" o "juego de memoria" basado en parejas de cartas.
Medium
  • Full-Stack Developer
  • Junior · Middle
  • 4 h
Icon
Challenge by
Rviewer
Dreadful Tomatoes
Crea un web app que permita a los usuarios ver y puntuar las últimas películas más taquilleras.
Medium
  • Frontend Developer
  • Junior · Middle · Senior
  • JavaScript · Python · TypeScript · + 5
  • 3 h
Icon
Challenge by
Rviewer
Spotlist API
Desarrollar una alternativa a la API de Spotify que permita a los artistas independientes gestionar fácilmente sus listas de reproducción.
Medium
  • Backend Developer
  • Middle · Senior
  • Java · JavaScript · Python · + 5
  • 4 h