Inspiration
The idea for this project came to me during my summer break of 2016. It was the year of the Euro Cup when social media is overflowing with news, rumours and predictions after every match. The performances by players gave way to a number of speculations about their value and demand in the transfer market after the competition. As a fan, I would surely want to know the different rumours surrounding my favourite team. Hence, I wanted to build something that would consolidate the data from a number of different sources online and give me a report about the rumours about players who wanted to join or leave my favourite club.
What it does
Football Transfer Tracker tackles this exact problem. It accesses the multitude of gossip abound on Twitter and streams it to give you the rumours surrounding your favourite soccer team. It allows the user to first input the team they want to track. It then matches all the tweets surrounding that team and displays them in chronological order on a very simple and user-friendly UI.
How I built it
Before working on this project, I was not very aware about backend development and only had experience developing on the front-end. Since I already had some experience working with Javascript, I decided to dig my hands into Node.js. I set up a server using Express and established all the routing end-points. I used the Twitter Streaming API to stream the data in JSON and then parsed the relevant data to store into a Mongo database. I used the Mongoose wrapper to write a Schema for the Tweets received by the server. Since the purpose of this app was to provide updates, I needed to make the server constantly update new data as it came in. So, I used Socket.io for this purpose.
Challenges overcome
Even though Socket.io could stream and store data as and when it came in, it needed to be displayed at the same rate. One solution was to pass the new data from the server every time it was updated. However, from a user point-of-view it was terrible design because the page would keep re-rendering on new data which would be slow and inconvenient. So, I decided to use React.js to solve this problem. With its powerful Virtual DOM rendering, the UI could now update automatically when new data would be received by the server without refreshing or re-rendering the page. I further expanded this to make the app isomorphic, so that the initial page is rendered from the server. This made it faster and also if the page is refreshed, instead of recalculating the data, it would just retrieve the last data sent from the server.
Log in or sign up for Devpost to join the conversation.