Who doesn't have a Twitter account? One of the biggest and controversial social networks of this decade, which has been revamped multiple times due to its UX problems.
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.
Well, the goal of this Challenge is to replicate the Twitter interface!
This is a challenge created by MoureDev. He will review and give feedback to some proposed solutions from the community in one of his Twitch livestreams 😻
Surprise us! 😉
You will have to create an application that represents as much as possible a fake Twitter timeline, showing different types of tweets.
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 focused on the ability to know how to create UI based on an existing design.
The feed should display Tweets of the following types:
- Text tweet.
- Tweet with an image.
- Tweet with up to 4 images.
- Tweet with a GIF.
The data to be displayed doesn't have to be real. You can define your own mocked set of tweets, containing images, texts, likes and so on.
Each Tweet should contain the following functionalities:
- Display the number of likes, retweets or comments.
- Represent hashtag or mentions (without filtering interaction).
- Represent links (with interaction and opening in a browser).
- User photo, name, date, tweet body and action buttons (without the profile edit feature)
- Up to you to choose other extra functionalities. For example:
- Tweets with video or poll.
- Tweets detail page, showing comments.
- Image detail and zoom.
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 you a bit more, try to improve the Twitter's application on these features that you guess that could be room for it. You can focus these improvements just on the UI, or even the UX and user flows.
- Create a clean, maintainable and well-designed code. We expect to see a good and clear architecture that allows to add or modify the solution without so much troubles.
- Test your code until you are comfortable with it. We don't expect a 100% of Code Coverage but some tests that helps to have a more stable and confident base code.
To understand how you take decisions during the implementation, please write a COMMENTS.md file explaining some of the most important parts of the application. You would also be able to defend your code through Rviewer, once you submit your solution.
- Push your code to the
develbranch - we encourage you to commit regularly to show your thinking process was. - Create a new Pull Request to
mainbranch & merge it.
Once merged you won't be able to change or add anything to your solution, so double-check that everything is as you expected!
Remember that there is no countdown, so take your time and implement a solution that you are proud!
If you have any feedback or problem, let us know! 🤘
Made with ❤️ by Rviewer