How I created a Twitter Clone to troll Fc Barcelona

The Punjabi Geek

Follow

Dec 28, 2017 · 5 min read

First things first, I am a Real Madrid and Cristiano Ronaldo fan. It was the first El Clásico of this season and it was also the time for submitting the first task of my internship at Hasura. A situation that demanded a complete mix of the two passions that I have. I was asked to make a twitter clone to demonstrate my front-end skills in React.js . Wait, but these were the last few days of my submission and all of this didn’t start that well. There were a few ups and downs as there are always when you are trying to learn a new language or a framework. So let me take you to how it all started. Just like a typical Bollywood movie, the beginning of this story is a bit clumsy but it all get sorted out in the end.

The beginning- How it all started

The first task given to us was to make a twitter clone. We were only asked to design the twitter homepage and the search page. We were asked to do that by using React.js and material-ui. Something that I had no prior experience in. So I had to learn it from scratch.

For the non techies, React.js is a Javascript library to build user interfaces and material-ui is a set of react components to implement Google’s material design. I tried a few tutorials and also the official docs but I really liked Codecademy’s React.js course. It is great if you are just starting out with React. Here is a link to it

At first I got so excited learning React. Everything seemed so interesting and fun (especially React DOM) and then I had to take a break because I had exams. I hated losing the flow. After finishing my exams, I came back to learning React. Till now almost everyone had already submitted their first task and I was given a respective deadline because of my exams. Thanks to the people out there at Hasura who take into account all of this. So I started learning React again and this time I couldn’t find any fun in it. I had a deadline to meet and I started feeling the pressure. While learning I also found a few topics hard to get into my head. Whenever there occurred a topic that I couldn’t understand I felt like I won’t be able to complete this task. I started doubting! Trust me this sucks real hard. Realizing you are not good enough is the worst thing that could happen to you. But I kept on pushing, read about React from a few other sources and slowly and steadily everything started making sense. A big lesson learnt in the way- whenever you are not able to understand a particular topic, just read, read again from a different source, and then again, till the time it starts making sense. Ask questions, even the ones you feel will make you look stupid. I remember asking a question on Slack saying there is no index.html file in my repository. Now when I look back on it I feel that is the stupidest question one could ever ask. But that also helped me in learning React in a big way. After learning React, it was now time to setup React on my system and get the work done.

Setting up the React environment

There are two common ways to set up a React development environment: create-react-app and webpack.

For a beginner getting started with create-react-app is the best because it is fairly easy to setup and requires no prior knowledge. Here is the process:

1. Install npm.
2. Now to install create-react-app with npm, run:

npm install -g create-react-app

That’s it! We are done setting up the environment. Since create-react-app was created to ease the development process we can get a react app running in seconds without writing any code. Here is how :

To initialize a new app, run:

create-react-app my-app
cd my-app/
npm start

and then navigate to http://localhost:3000/ in your browser.

This is what you will see ….

We didn’t write a single line of code yet we have a React app running. Doing this seemed like victory to me. Something close to what I would feel if Real Madrid beats Barcelona in the next El Clásico.

How I got the game changing idea to troll Fc Barcelona

Up until now, I just wanted to create a simple twitter clone. I had also created the navigation bar and some other parts of the user interface. On the other hand, the El Clásico was also getting closer day by day. On the night of 22nd, I was writing code as usual and was wondering about what will happen in the match. I left my desk and started watching some videos of Real Madrid and Cristiano Ronaldo on Youtube just for a change. It is always nice to take little breaks in between.

When I came back to coding, I thought why not create something to show my support for Real Madrid. So I started thinking of ways to do that. After some brain crunching on a few ideas, I figured out what I will make. But time was against me as the match was scheduled on the 23rd and I only had less than a day to complete the work. I wanted to do it till the morning because showing it after the match would make no sense. So I pulled my socks up, coded for the whole night and in the morning had everything completed. This is what I came up in the end.

During this process I posted a question on Stack Overflow and earned some reputation as well. I hope the people at Hasura are noting it down as Tanmai Gopal said in a webinar that Stack overflow interaction will also be taken into account. The project can be found on Github and here is a link to my repo :

If you liked the article then you can clap for it so that more people will get to see it. Feel free to follow me here on medium and connect with me on LinkedIn and Twitter. I am active on Instagram as well.

PS: Barcelona beat Real Madrid 3–0 and instead I got trolled by my own self for making this 😆