< BACK

JENYF

A laptop and smartphone showcases the landingpage of Jeny-site. The heading says 'Fall favourites are here' and there is an image of three persons lauging in clothes that fit well during fall-season

MY ROLE INCLUDED:

  • UX DESIGN
    • |
  • LEAD DEVELOPER
    • |
  • REVIEW
    • |
  • ACCESSIBILITY

How might we create a seamless and user-friendly e-commerce experience while ensuring a scalable and maintable codebase using modern web technologies?

Project description

This project is a web shop built with React (Vite), where we focused on responsive design, API calls, semantic code and a scalable code structure. We fetched products from a dummy API using async/await and managed the shopping cart state using React Context. The purpose of the project was to learn agile methodology, teambased version control and to creat a userf-friendly e-commerce application. We worked on the project for three weeks, including design in Figma, development and testing.

Overview of design decisions for the project: the typeface 'Poppins' for all texts and 'Poppins Black' (a thicker version) used for the logo with the text 'JENYF STUDIOS'. The colorpalette includes five labeled circles: Primary (light green), primary background (off-white), neutral light (white), neutral dark (dark gray) and error (red).

Color, fonts and tonality were decided through democratic voting

Technologies used

  • React (Vite) for a fast and modern frontend development
  • React router for navigation
  • React Context API for global state management
  • Tailwind CSS for styling and responsive design
  • Git & GitHub for version control and collaboration
  • Netlify for deployment

Git & GitHub

We used a protected main branch and a development branch. Each developer created feature branches named according to their assigned ticket and pushed them to the dev branch before merging them via a pull request. This workflow minimized merge conflicts and kept the codebase clean. To organize tasks and milestones we used GitHub projects, where we were able to clearly trace issues and commits to specific tickets. Pull requests and code reviews were conducted regurarly within the team. This workflow provided a realistic team experience, making us better prepared for professional development work.

And overview of the Team items list in GitHub Projects with the items marked as 'Done'. To the left there is also a list of the assignees which are the teammembers: Evelyn Liao, Fredrika Törnkvist, Emelie Svensson, Johanna Branting and Nabila Maksud.An overview of the GitHub Projectsboard with columns for 'Backlog', 'Ready', 'In progress', 'In review' and 'Done'.

Workflows and team roles

We worked agile with regular daily stand-ups and used the Kanban board in Github Projects to plan and track our tasks. My role in this was Lead developer and included responsibilities such as:

  • Ensure code quality and adherence to best practices
  • Code review and support resolving merge conflicts
  • Support team members with technical challanges
  • Ensure semantically correct code and that the website was accessible
Jenyf landingpage with the heading 'Hello fall' and a button that says 'Shop all products'. The background is three young people smiling, dressed in warmer clothes fit to fall season.Overview of the Jenyf productpage - showing one backpack, one t-shirt and two jackets.OVerview of Jenyf checkout where the shoppingcart consists of a bracelet and a blue backpack. To the right there is a form for contact details for the customer and a 'Confirm'-button.

Challenges and takeaways

We encountered several technical challenges but learned a lot through collaboration and problem-solving. One of the most challenging aspects was implementing the breadcrumbs navigation, as we initially struggled with properly updating the state and routes. We also gained a deeper understanding of React Context combined with React Query, which proivded insights into efficiently managing global data.

Successes

  • We maintained a strong teamwork and communication through pair and mob programming
  • Our approach to feature branches and pull requests ensured a well-structured codebase with few conflicts
  • Our problem-solving process was effective, as we actively engaged in discussions and shared knowledge within the team

Areas for improvement

  • More even distribution of tasks in the early stages of the project
  • Implementing testing earlier on in the process to detect and fix bugs more efficiently

Final thoughts

The project provided us with a realistic experience of working in a development team. We gained experience in agile methodology, code review and collaboration using GitHub, which makes us better prepared for professional work. We learned the importance of communication, understanding and explaining code and working iteratively to solve problems together. All and all, this project was a great success for me personally as we grew as a team and I got to grow even more as a developer!