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

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.

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.