Hey guys, welcome back to part 8 of creating our own Twitter clone, last week we enable the ability to follow and unfollow users. Now that we have a list of users we follow we can use this list to generate a custom user homepage that will display the tweets from all the users we are following.
When you login into Twitter it pretty much displays all the tweets from the users you follow ordered from latest to oldest. Now Twitter probably has some algorithm behind the scenes for displaying the order of tweets etc depending on who you interact with. We are going to just be simple and display the tweets from latest to oldest (like in first versions of twitter)
What we need to do
– Create a new route for users custom homepage
– Create new view for the homepage (homepage.jade)
– Change the login redirect so it now displays the new homepage
So let’s get started:
Create a new route for users custom homepage
Our custom homepage will be /homepage so here is our route code:
What’s going on here? When the route is requested we querying the database for every user we follow give us their tweets. We then get the user object and then we are creating a dictionary to store their user details(so we can display their username profile pic etc).
– First generate a dynamic query for each user we are following.
– Run that custom query on the Status DB which is basically saying: select * from status where username = ‘x’ or username = ‘y’ or username = ‘z’ etc etc…
– Once we have all our statuses ( which has been ordered by the created date) we loop through all the statuses returned and query the User database to get the user object related to who created that status.
– When we find the user object for the status they created we add the status object and user object to the statusUserDict (which is a dictionary)
– The last part of the code is checking once we have processed all our statuses we call a callback function which we use to render the homepage with the statuses.
I basically took what we have in profile.jade and customised it via CSS to make it look the way I wanted(which is very basic)
Testing display tweets in Order
Woo, its working displaying in the correct order.
Last part it to now is to change the redirect so when a user logs in they are redirected to their new custom homepage:
Well that’s it for today guys we now basically have a fully functional Mini Twitter where we can follow and see the people tweets we follow on our homepage, we also can unfollow and we can change our profile page with images, desc etc, I think it’s a very good clone… Although I am biased. Now we have our own mini Twitter only things we are missing is some small missing features such as ability to have images and videos in your tweets which is far more complicated than I wanted to do in this tutorial series.
Honestly I think we can consider this project finished in terms of functionality we can always made it look better and add more features but I will be on tutorial part 100 by the time I implement everything. My idea was to Create and document a fun project using a technology I have never used before and I think I have achieved that. I am going to check in the last version I have here so you can go and improve it or change it to whatever way you like. Let me know what you did as it is always interesting seeing other peoples visions. I hope you enjoyed this series!
P.S, see you next week for something new 🙂