CV-Application as part of The Odin Project curriculum

Click here to view project live

• React
• Hooks
• useReducer
• styled-components
• dark mode
• JSX

This is my first official React project and I must say, it was kinda tough going in the beginning. I had already worked out a system to render and update using plain javascript, and I now realize how utterly unscalable that was. I finally understand the difference between declarative programming in React and imperative programming in plain javascript.

Using create-react-app feels like magic. I sincerely hope none of the >1200 dependent modules ever break...

I did have time with the traditional way of using class components. However, I decided to learn the modern way of using React, and went all-in on hooks. In preparation for learning Redux, I practised using useReducer for overall appState management in this project. Although I did use useState for local state management.

I like the idea of having a centralized state management. Passing dispatch functions down and having local states trigger update was easier to reason about than a multitude of useStates peppered throughout.

Next stop: all the rest of the hooks, then custom hooks

In my on-going quest towards reducing the amount of CSS I have to write, I have finally hit upon a solution that I like. styled-components promises modularity by using tagged templates.

I still had to write global CSS as I am still experimenting with styled-components, but I see the light(mode)! It allowed me to do dark mode in a fairly straightforward way, something I had been looking forward to implement ever since I started this journey.

Next stop: using HOCs to further improve component reusability

This is the killer feature of React imo. At first, I was horrified having to write HTML-like syntax in my javascript, but I am now a convert. With the zeal of the newly converted, I am ready to preach to the unconverted! It was bit of an uphill struggle figuring out conditional rendering though.