Twitter Mirroring code challenge | By Mouredev

Read it in Spanish

CLONING TWITTER

Replicate Twitter feed UI in your own app.

June 2022

START THE CHALLENGE

This is a new monthly challenge created by MoureDev. He will review and give feedback to some proposed solutions from the community in one of his Twitch livestreams

Most of the time we don't realize how important the UI and UX are in the apps we use every day. Would Twitter, Spotify or Slack have become what they are today without having taken so much care of the user interface? Probably not.

For years, Twitter has been very selective with its features, and has focused on providing its users with a great user experience. The quality of this can be one of the main key points for our app success.

The goal of this challenge is to replicate the visual layer of the main Tweets feed in your own app. Do you dare to clone the Twitter UI?

Ideal for

Junior · Middle

Available stacks

Android · iOS· WebApp

Required experience

Basic knowledge

WHAT YOU'LL CREATE

You will create an application that represents as accurately as possible a fake Twitter timeline, showing different types of tweets as examples.

The more faithful to the original design, the better, although it's not necessary to display all current Twitter functionalities. The aim of the challenge is mainly focused on having the ability to know how to create UI based on an existing design.

For this challenge, you can clone the web, iOS or Android version of Twitter.

Get started

The feed should display tweets of the following types:

Text tweet.
Tweet with an image.
Tweet with up to 4 images.
Tweet with GIF.

The data to be displayed doesn't have to be real. You can define your own test set with tweets containing images, texts, likes and so on.

Each tweet can contain the following functionalities:

Display the number of likes, retweets or comments.
Represent hashtag or mentions (without interaction).
Represent links (with interaction and opening in a browser).
User photo, name, date, tweet body and action buttons.
Up to you to choose other extra functionalities. For example:
- Tweet with video or poll.
- Tweet detail to show comments.
- Image detail and zoom.

EXTRA POINT!

Every Twitter user knows that there are some key points of the application that could be improved, even Elon Musk!

So, if you want to challenge yourself a bit more, try to improve Twitter’s application on these features that you guess could be room for it. You can focus these improvements just on the UI, or even the UX and user flows.

Get started

HOW IT WORKS

Solve the challenge and show your potential
Get feedback on your code from experts.
Compare your app with those of other participants through MoureDev's Twitch livestream
Build your technical portfolio with all your completed challenge

WHAT WILL YOU GET

Create an app / webapp and test your coding skills
Feedback from our expert Tech Mentors
A complete report of your skills - with the possibility of sharing it
Your own technical portfolio to use in job interviews
A chance to win €100 in training materials
If your app is one of the best, Mouredev will record a video reviewing your code in depth and giving his opinion on your performance

ABOUT THE CREATOR

MoureDev

Brais Moure (a.k.a. MoureDev) is a full-stack developer, specialized in iOS, Android and web application development. Besides creating more than 100 apps as a freelancer, MoureDev spends much of his time sharing his knowledge with the dev community.

He is currently one of the main creators of programming content in Spain, with more than 210k subscribers on Youtube and more than 25k followers on Twitch.

Take a look at his networks and say hello for us!