Today's challenge was to build a Crowdfunding Product Page using React, Redux, Styled Components and Framer Motion
Building this project provided me with a fun opportunity to learn about Redux and practice my React skills along with Styled Components. Besides those aspects, the project also allowed the chance to really harness the power of reusable components given the fact that there were a lot of similar components that made up the project.
The most challenging aspect of this project was using React-Redux coupled with Reduxjs Toolkit. It's difficult in the beginning, but once you get a solid grasp of how to structure your Redux code, you'll have a cleaner and more organized way to handle your app's state management.
This project is also one of the most intensive CSS-in-JS projects that I've worked on up until now and I have to admit that I've grown quite fond of Styled Components. I feel that it takes modularity and maintanbility to a whole new level. On top of that, you have the advantage of using JS straight into your CSS which makes your code so much more dynamic and flexible, especially when building an interface with many responsive elements / features.
It's worth mentioning that this is also the first time I've created a custom React hook and after seeing how handy it can be, I'll definitely look more into some custom React hooks that I ought to use in my apps.
With all the different technologies I'm using, I'm now trying to develop a style for naming and structuring my files / folders. Right now it still feels like it's a bit spread around and not completely consistent, but I'll keep experimenting and polishing this aspect of my projects.
Some parts of the code might require a bit more refactoring / polishing and I'll have to look into some more tools I could use to improve my code even more in terms of performance and simplicity.
I'm planning to turn this project into a fullstack app by creating a Node.js + MongoDB backend, so the data can persist even after the session has been closed. For the moment, I'll leave the project as it is since I've managed to complete it according to the challenge's specifications.
Last but not least, Framer Motion is awesome. It's one of my most used animation libraries and there's still a lot of untapped potential that I have to discover. I feel like I'm barely touching the surface of what it can do and it'd be a shame not to use it to its fullest to create mouth-watering animations.
In conclusion, this project was a blast to work on and I recommend you try building it out with different libraries / framworks and experiment any crazy ideas you might have in terms of animation / extra features.
You can join this and many other challenges on Frontend Mentor
You can find more challenges that I've completed here