Curio

Curio was my very first school project that involved using React, and it was also my first time experimenting with styled-components. The assignment was to create a simplified e-commerce site using an API provided by the school. I had to plan and design the project according to the delivery date, the project requirements and the API limitations. And although this was primarily a React project, I used Next.js as recommended by the React documentation. While I utilized Next.js, I didn't fully leverage its server-side components due to my limited knowledge at the time.

I decided to try out a Sass-based design token system, which seemed like a great idea initially. However, combining this with styled-components proved more challenging than I expected, leading to a lot of confusion. Despite the hurdles, I still appreciate the concept behind design tokens and believe that with better planning and understanding, they could be effectively integrated into future projects.

Another new tool I got to use was React-aria, a headless component library. Working with these components was quite the challenge, especially given the complexity of the components and still being quite new to component libraries. Nonetheless, it provided a valuable opportunity to see how other libraries handle highly reusable and accessible components, experience I can carry forward into my work.

This project gave me invaluable experience in combining different systems like design tokens, Sass, and styled-components. It taught me the importance of thoroughly planning a project and considering how different tools will interact with each other. Overall, Curio was a great learning experience that expanded my knowledge and gave me some insights into benefits and challenges of combining systems and tools.