All right, all right, all right!🙂 It's a bit long overdue but I finally had enough time to do it. I've been a web developer for almost 3 years now and during this time, I've had the opportunity of learning and building different web applications for variety of clients. I've been mostly using Vue.js for front-end development and Laravel framework for the back-end API.
The Inspiration
Last year I decided to learn react.js and see for myself what all the fuss is about and I have to tell you it's been an amazing journey.
The inspiration for learning react and building my multilingual website came from Blockchain website.
How Could They?!!!
The first thing I noticed was that it was developed with react.js but how in the world were they able to make it SEO-friendly, I asked myself. I tried to view the source of the web page and I saw a lot of HTML markup, CSS and JavaScript code. I asked myself if this is an SPA, then what's with all this code? 🤔
Digging Deep
At the time, I didn't have any knowledge of Server Side Rendering and all of its glory so I began searching through the Internet and got myself familiar with the idea. Then I found a few boilerplates on GitHub and started building a side-project which in the end resulted in my portfolio website.
Thank You Open Source
I would like to give a big shout-out to the developer team at Creative Tim for providing an open source version of their UI kit based on Material UI library.
TL;DR
Please have a look at what I've built and let me know what you think:
https://www.bitsnbytes.ir
Here's a list of everything I've learned or used in this project:
- react.js
- redux
- react router
- node.js
- webpack
- react-intl
- material-ui
- express
- formik
- yup
- react-helment
- jss
- nodemailer
- deployment
- pm2
- SEO best practices
Top comments (7)
Hi Mohammadja, thank you for sharing your experience and the AMA.
When I saw the list of "learned" tech stack, it seems a bit daunting.
How did you learn each one and also how did you find out about them?
Thank you Sung,
You're right. Learning some of these technologies/libraries was in fact a pain(I'm talking about you webpack 😜), but in the end it was worth it. Each one of these was necessary for a special functionality I had in mind. So I'll go through explaining why I needed them here.
redux
redux
andreact
pretty much go hand in hand most of the times. Comming fromvue
world, Invuex
(A state management library forvue
) there is something calledmodules
which lets you divide your store into different modules and prevent your store tree from becoming really messy and bloated. I did implement this functionality inredux
by separate root reducers(one called appReducer and the other APIReducer) and usingreselect
library. I'll soon make a repo to showcase it.react-router
vue-router
. It took me a lot of trial and reading to get the routing and URL-changing the way I wanted. I wanted didn't want a language indicator in the browser URL for the English version, but at the same time I wanted an indicator for other languages. For example if the URL is /contact-us, without any language parameter, I wanted the app to render the English page, but if it was /fa/contact-us, it should render the Farsi page and the layout should change according to the language. This was the URL strategy I found on Blockchain website. It was all part of SEO best practices.webpack
,Node.js
&Express
Express
handle my API requests. I learned how to use Different Webpack plugins for different use cases like handling assets, code splitting, resizing/optimizing images and creating service workers. I also learned how to secure my Node.js server for production which was quite interesting.material-ui
+jss
react-helmet
/react-helmet-async
react-helmet-async
has been written in a way that it supports server side rendering while having all the functionality and APIs ofreact-helment
. I used it to set the meta tags, title and description and many more based on the current path which is necessary for SEO.react-intl
formik
,yup
formik
. It takes away a lot of complexities of working with form elements in react and gives you the flexibility that you need. Combine withyup
and you can take full advantage of front-end form validation. Here's a link to a repo I've made to showcase building a multilingual form and validation usingformik
andyup
in react.nodemailer
pm2
Thank you for the detailed explanation on how each library fit 🙂
The impression I got was that each library was added as a new requirement needed one by one, instead of learning them all in one go.
Hey Mohammadjavad, thanks for sharing.
I'm curious about what you used for the images, because I get a nice blur when they are still loading.
Thanks
The inspiration for this functionality came from medium website. This is a technique called "lazy loading". I had to build my custom component and use webpack and a few other libraries to get this to work. I'll write about how I did this in my next post along with a github repo. Stay tuned ;)
In the meantime this package can help you achieve similar functionality.
That's great man keep going and just enjoy.I see some responsiveness problem on your website which can be solved I mean the header part is not displaying appropriately...