Dashboard recreation

For my course Interaction Design we had to look for inspiration of a dashboard. After we found a good design, we had to recreate it in Figma with our own color system, a spacing system like Carbon. After I had created the design in Figma, I started to develop it in React. We also had to add micro-interactions, like small “boop” (small animation when you hover over an icon) animations for the icons. The animations I made where a cool bouncy sidebar animation and a graph switching animation. I added as extra also boop animations to every icon. We also had to use 2 new css features. I used logical properties, light-dark, :has selector and interpolate-size. I am pretty happy how it all turned out, especially my sidebar animation.

This was the first real project I made in React. I learned a lot about how to structure a codebase and also spend some more time working with CSS.