Kaleido
Goal
To design but most of all code a responsive website for a webshop where you are able to add products to a basket and checkout (no payment method implemented).
Context
A co-operation of six team members where we learned how to work with Git and in Github, merging our work with different components.
My role
Front-end developer. I was responsible for the API-integration and the page of each product (see picture below).
Duration
1,5 weeks
My coding responsibilities
I took responsibility of the API-integration, fetching the information about the products and the pictures as a global state, to be used for several functions. I also took care of the product page for each product, meaning the function of clicking on a product card lead you to that specific products own page, fetching the right information using useParam. I also did the CSS for these pages.
I chose these tasks because it was what I felt as the most challanging, and I wanted to learn as much as possible.
About the process
We began the project with a kickoff meeting to establish the structure and workflow. Two team members were designated as code masters, responsible for merging code and maintaining the integrity of the main branch. To make the collaboration more effective, we divided into three coding pairs but also worked individually when needed.
GitHub played a central role in our workflow. We created issues for each task, branched off from them, and only pushed code after requesting a merge into the main branch.
This project deepened my understanding of React, particularly in managing global states for useStates shared across multiple components and implementing new hooks like useParams to dynamically generate product pages. Beyond React, I gained valuable experience in Git and GitHub, learning how to coordinate work on separate features simultaneously.
As a UX-designer, this experience also gave me greater empathy for the developer’s perspective, something that is incredibly beneficial even in the design phase. It also highlighted the challenges of reading and modifying someone else’s code, reinforcing the importance of clear structure and documentation in collaborative projects.
About the design
We also designed the page as a group. But considering the time scope and that the focus of the course was learning React, we devoted one day out of the total of 1,5 weeks for designing, keeping it simple and clean. The name Kaliedo is short for the word kaleidoscope, referring to the websites wide range of products.
