About the project
For this project, let's build a Twitter replica which will be visually identical to the original but that will display local data (mock JSON) instead of real live data. We should have a small local database for two different users and be able to build a twitter "timeline" showing all the tweets.
Problem
We need to find a way to access the local data, then render the data by creating HTML elements dynamically from mock JSON, using Javascript. Everything should be rendered in a design similar to the original twitter interface.
Solution
First of all we will create non-dynamic elements using HTML and CSS, and focus on structuring the page correctly.
Then we should use the data from one of the two users and start rendering. After successfully being able to render
the data from the users, we should be able to display data from one or the other user depending on the link we are visiting.
This will make our app dynamic and act as if we are interacting with a real database.
After that, we will create a new page and display all the tweets from both users together as a timeline.
Let's take a look at the results
We created a similar structure to the original twitter app and render our local data using JSON as we would do if interacting with a real database. We only used a few tweets from each users to make sure everything is displayed correctly. The first profile we rendered was Elon Musk's.
We then used Javascript to be able dynamically display a different user's data when requested from URL (link in the browser). Here is what Bill Gates profile looks like after rendering.
Creating a twitter-like timeline, rendering all the tweets was also part of the challenge and we did it successfully. We are able to navigate from one user to another by clicking on the profile picture or the user name, then returning to the timeline by using the back arrow button on the top-left corner of the profile we are visiting. This makes a seemless user-experience.
I also made the app responsive and mobile friendly. It's looks great especially on smartphones.
