For week 9 in Technigos Web Development Bootcamp, we partnered up with the concurrently running UX-design bootcamp on a collaboration project. The UX designers did a design hand-off to us through a demo and a Figma file, where they had designed a landing page for a fitness club/app that we had to make come alive through code.
This weeks project was a lot of fun! I started out by making a sketch on how to divide what components. What should be reusable React components, what should be rendered differently based on screen size, what responsive features should be styled using CSS media queries? I did a list with different features I would attempt in a certain order, leaving the trickiest and more cosmetic stuff for later.
Something that really clicked for me this week was how to manipulate what HTML (jsx) is rendered based on conditionals such as screen size. It made my work a lot easier and opened up so many ideas and possibilities!
I incorporated a npm package, react multi carousel, in my mobile version. This was challenging, but very rewarding when I made it work and managed to style it like the Figma prototype.
As the design had several components placed on top of others, I also got to practice object positioning with CSS.
As we were a bit short on time due to Easter, I had to make some limitations in the project. I did not include any styled components for instance. I also skipped the search bar animation for now. If I find some time later on, I will go back and try again.
Link to site:
https://gracious-movement-matilda.netlify.app/
Link to Figma design I followed:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent