Creating a Twitter Clone: Part 1, “The Timeline”

There are a few main components to making your own post-based timeline app. I started taking an interest in Vue.js when I found out that it was the easiest JavaScript framework to use.

Then I checked out a few tutorials on YouTube to see how it all fit together. Here’s what I found.

You basically have two main pages to deal with:

First is the main page for your timeline, aka “Dashboard.” This is where you view and create posts from. See the code below:

The second page is your “PostComponent.” This component is where all of your posts are actually grouped together in a list and placed in chronological order, and it’s also where you get your other options like the ability to delete posts. In essence, this is where most of the magic happens.

Here’s the high-level explanation of what’s happening on the Dashboard:

  1. When you send a message, it triggers a reaction with the “createPost” function that I’ve attached to the form that holds the message.
  2. When you click the button to send a post, it also triggers the “forceRerender” function that I’ve attached to the button.
    This function increases the “componentKey” value attached to the “PostComponent” component, which refreshes the timeline so that it will show the new post on the timeline.
    That’s because there has to be a change detected on the timeline in order for Vue to update what’s shown on the page.
  3. The “PostComponent” page is imported as a component on to the “Dashboard” page.
  4. The “timestamp” that marks the time when the post was created is sent to the PostComponent page as a “props” value, since we don’t want it to get changed later.
  5. The “props” item is also sent to the PostComponent page to hold all of our tweet values.
  6. The Firestore “db” database add command creates a new Post in your posts collection with fields like text, time, and timestamp when the Send button is clicked. The timestamp field is a number used to place your posts in chronological order based on numerical values. The time field is a string of text that’s used to show the timestamp data in a readable format to you on each post.

And here’s a quick description of what’s happening on the PostComponent page:

  1. You’re attaching a unique ID to each “Post” you add to the list of “posts”
  2. The unique Post ID is attached to the delete button, which triggers the “deletePost” function for that specific Post.
  3. The values of each Post are shown on the page using variables that look like {{this}}. For example, the text, time, id, and timestamp are shown.
  4. Next, we import “db” to get the database information from our Google Firestore account.
  5. The data function we define includes “empty” values that will be overwritten later on when our code gets updated in response to some user interaction, like sending a post.
    “Empty” means null for a string (text), 0 for a number, and [] for an array (list).
  6. We’ve imported the timestamp in “props” from the dashboard.vue parent object because we don’t want it to change.
  7. Now comes the hardest part: The deletePost function.

    This isn’t obvious from researching online, but you have to remove the item from the page AND delete it from your database, which are two separate steps:

    If you don’t update the database, the post will show up again when you refresh the page.

    If you don’t remove the item from the page but you remove it from the database, it’ll still show on the page until you refresh the page.

    Using the Vue.js “splice” command removes the Post from the page view.
    To remove a Post from your database, you have to use the Firestore commands, which looks like:
  8. Lastly, the “created” lifecycle function is using a “get” command to show the info for each Post that appears in the PostComponent when the send button is clicked from the dashboard.
    This includes the unique Post ID generated by Firestore, the text, the time, and the timestamp.

Got questions? Leave me a reply. Also, check out the app here:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s