React and Angular codes of some popular platforms

I downloaded Paypal, Freelancer, Flipboard, Instamojo and other websites.

Access front-end code

One more interesting article explaining how i came across some great code while surfing the web as i was looking to enrich my knowledge in front-end technologies. Today i will share some of the best websites that you can access their front-end code. I’ll also talk on how you can download these resources for offline use.

A short story to how it all started. I am a self taught developer and I rely on learning code from other specialists in the industry. I had a rough time understanding and learning the concept of JavaScript Frameworks and Libraries and why they matter. I gave up on learning them since there was literally no one mentioning their effectiveness and why it matters to use them. Everyone was just “How to make a React and Angular web app”. Until i came across a website that uses React and Mobx for their front-end. The website was really fast. I thought it was all about their hosting — Nginx and maybe some great hosting company. But after days of inspecting, I “discovered” something really cool. I could finally see the magic. I downloaded all their front-end resources. It took me a couple of days to learn React and Mobx. I did some digging and now I am great if not the greatest in Front-end technologies.

Make sure you inspect and download the codes of the below websites once you read this article before one of their employees lands on this article.

Freelancer

Freelancer is a global crowd sourcing marketplace website, which allows potential employers to post jobs that freelancers can then bid to complete.

After inspecting, it is clear that they use Angular. All my knowledge about Angular came from their website and some several videos on YouTube. But i have an issue with Angular so i rarely use the Framework. This is why. A really nice article but forgive me for the title.

Freelancer Angular

Flipboard

Flipboard is a news aggregator and social network aggregation company. A big company but their front-end codes are quite simple.

The platform is build on React and Redux.

Flipboard React and Redux

PayPal

We all know PayPal. An international online payments system. I only got small stuff out of this. PayPal uses Angular, React, Redux and some of their old codes. I did i minor inspection and i found out they mostly use React in most parts of their settings section. I suspect it’s because of their way of showing errors in this page and changing of views faster, smoothly and in a modern way. And as we all know React is good at this. As i mentioned i didn’t get much from them. But their way of structuring components is awesome. And you’ll also have the chance to “steal” some of their cool functions Validating Cards, Date input and formatting, reusable components and much more.

PayPal React and Redux

Instamojo

Instamojo provides free payment gateway in India. I learned some great stuff here in a hard way. I couldn’t go pass the mobile number verification page and every time i would try to access a different page it would redirect me to the same page. Too bad. I could still inspect the code but unlike many i was used to. It only loads all the components of the current page — that is settings, verification, payments…. The rest of the pages will not have complete structure.

I had to think fast. I signed in. It took me to the mobile verification page. I right clicked and on Chrome’s menu i clicked “View page source”. I copied all the content of the page and served the copied html code locally on Apache. Now i was able to get all the code of each pages I viewed.

Instamojo React and Redux

EssayLib

Essaylib offers essay writing services for students. This was where it all started and i would highly recommend you checkout their front-end code. It taught me almost everything. React , Mobx (similar to Redux). I’d love to know the developer of this website.

EssayLib React and Mobx

There are other many websites that i have personally inspected and downloaded their front-end code but these are the few that i would highly recommend you take a sneak peek.

How do i get access to the codes?

It’s quite simple. Keep in mind this is only available if the developer leaves a source map of the code. The map file contains the structure of your web app. So it’s advisable to delete any source map files before you are ready for production.

  1. Install Save All Resources browser extension. I recommend using Google Chrome. I’ve not tested it on other browsers but I am pretty sure it will work.
  2. Access a website that you suspect to be using these cool technologies. Most use these technologies in their dashboard sections where search engines are unable to crawl or where they want to enhance interaction with the user.
  3. Right click and select inspect option. Or if you love use these shortcut commands Command + Option + I for Mac or Control+Shift+I for PC.
  4. Navigate to the sources panel and you’ll see a list of all loaded resources. In most cases you will come across a .webpack or webpack directory. This is where the project is located.
  5. Once this is done switch to Resources Saver tab and click on Save all resources. And that will be it.

If you are not great at React or Angular then this will be of great help to you. I think it would have taken me much time to learn these technologies if I only relied on beginner and crash course videos on YouTube.

I would love to know if this article was of any help to you or an article you would recommend i touch on. If you liked this article, make sure you leave some claps or slaps if it’s something that you are into and follow me for more articles.

Thanks, and happy coding! 😉