Learning ReactJS and using Material-ui for HPDF Task 1

#react #materialui #frontend #hasura

My project on the hasura cluster

So, here I'm at my first internship and this is a summary of week 1...
Before that I have to mention that all interns were divided into four groups!
ReactJS, React-Native, NodeJs-express & Python-Flask.
And according to my preferences I got frontend NodeJS.

HPDF Task 1

The task of week 1 was simple (even though I struggled with it here and there).
I had to clone (make copies or imitate) two twitter pages using ReactJS and material-ui. Before I get into any detail I will like to show you the outcome.

You can check-out the code here GitHub Link : Twitter Pages it's clean and understandable. And, here are the screenshots.

The Learning Phase

I started learning new skills from the internet exactly an year ago because the semesters were delayed and I was already done with my studying. And since then I have been learning new and wonderful things whenever I feel like. But, learning through all these things the one this that stuck was front-end web development. Because I like to design things and will waste extra time adjusting the colour codes the sizes making the pages responsive and checking for all possible screen orientation.
In front-end I started from HTML5, CSS3, JS6 then Bootstrap, jQuery I even did a course on web design in Photoshop. I was planning on learning React and then it happened I ended up learning it.

At first I tried out edx then udemy because these are the places I had learned from previously. But, finally finished up with Egghead learning react was fun the virtual DOM, single page applications and all that. Then I moved on to Material-ui now here there are no tutorials I just had to read the documentation and experiment with it. Took 2-3 days with each of it..
I tried out almost all the components of material-ui.

Cloning Twitter

I actually had to open an account on twitter as I previously didn't had one. I used twitter for a while to familiarise with it or may be because it felt nice to join a new social media / micro-blogging platform.

And now comes coding

As the code is already there on GitHub here I will tell you how I approached this task. I decided to make break down the pages into common part and then assembly them together. I used a simple Lifting State Up to navigate between the pages.
So if you type 'Aadhaar' in the search box you are taken to the Aadhar page and then when you click the Home button on the tab you land on my twitter page again
(Pressing the browser back button will not help as it is not on a different url instead it is a single page react application)

Here, how I broke it down..

The App.js rendered one of the two pages depending on its state (this.state.page) and it simply passed on the state as a props to the next stage down the line twitter_base.js here is where all the assembling takes place based on the props.

theme.js it had separate muiTheme that I customized for the whole app as well as it contained the specific style attributes that were common across the react elements of this project (kind of global variables) like muiTheme.palette.primaryTextColor: grey50. And I imported in into all other ReactJS components.

I made a separate components folder that contained the parts of pages like..
AppBar.js, Follow.js, Related.js, Trends.js, User.js so on..
Each of these files exported one react element by default which I then imported into the twitter_base.js.
I didn't use any explicit stylesheets I used only inline styles in almost all cases I used the colours from material-ui itself and I refrained from using colour codes like I usually do.

And, this project it's designed to be responsive because material-ui doesn't have a responsive feature and I didn't wanted to use bootstrap or write media-queries. In fact the actual desktop version of twitter isn't much responsive either.

Actually using material-ui for the first time was not a smooth experience because a lot of things were not working as expect in other cases mostly stackoverflow would answer my queries but this time I got most of the help from the GitHub issues of the ReactJS. And, when none of it helped I would go to the Hasura Slack Community to get help.

I completed the task comfortably within the deadline (I didn't had to stay awake all night like I had to for some of my previous projects.

Bad Things happen

Already, due to semester I was running late but then I had the festive season on my cards as well. But, the worst was about to come..
I have used windows OS all my life and hence I though that I should get working with Linux this time. Because, it's quite embarrassing for me as a computer science student not to be familiar with Linux. Hence, I installed the latest version of Ubuntu on my old laptop and because of my sheer carelessness I ended up deleting the partition-tables and all my data ..

Actually I had no idea that the data on my D , E dives would also be affected. I'm still looking for a way to recover my stuff because it had some pretty important things on it. I couldn't find any way to recover it yet