I'm a web developer who turned a learning side project into his 😍-looking portfolio website. Ask me anything!

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

Have something to say or got any questions? Then go on ahead!

Comments

[Sung M. Kim]

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?

[Mohammadjavad Raadi]

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
  • I didn't have much use for it in this app, but I was curious to learn it. redux and react pretty much go hand in hand most of the times. Comming from vue world, In vuex(A state management library for vue) there is something called modules 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 in redux by separate root reducers(one called appReducer and the other APIReducer) and using reselect library. I'll soon make a repo to showcase it.
• react-router
  • This one was specially tricky because I found it quite different compared to 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
  • All of these were necessary to get Server Side Rendering to work and at the same time, run a back-end server to have 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
  • This is a great UI library for react and It already had great support for RTL languages and SSR. All I needed was to read some documentation and tweaking to get it to work. As far as I know, Material-ui uses jss for "CSS in JS" and I didn't have much trouble getting it to work because the UI kit provided by Creative Tim, already implemented this in their code.
• react-helmet/ react-helmet-async
  • These are both great libraries to work with document head tags. The difference is that react-helmet-async has been written in a way that it supports server side rendering while having all the functionality and APIs of react-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
  • I used this library to make my app multilingual. It's very fast and very easy to implement and I really enjoyed working with it.
• formik, yup
  • If you're working with forms, you have to work with formik. It takes away a lot of complexities of working with form elements in react and gives you the flexibility that you need. Combine with yup 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 using formik and yup in react.
• nodemailer
  • I used this library for back-end API to handle sending out email notifications. Since I'm running my own email server, getting it to work with my special form of authentication was tricky. When a visitor submits the contact form, an email notification with the submitted information is sent to the webmaster.
• pm2
  • Since I was going to deploy this app on my own server, I needed something to make sure that the app server is live on any circumstances. pm2 does this perfectly. If your app crashes or the server is restarted, with a little bit of configuration, it will run/re-run your node server.

[Sung M. Kim]

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.

[Lawrence Mila]

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

[Mohammadjavad Raadi]

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 ;)

[Mohammadjavad Raadi]

In the meantime this package can help you achieve similar functionality.

[Mohammad Fazel]

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...