Jollykid - e-commerce - Final Project (Emelie Nyberg Kedert & Jonas Hellström) #86
Conversation
…Created the folder structure for the project in VS Code. Set up all routes for the pages. Installed required packages, including zustand and react-router-dom.
…roductsPage. Implement filter buttons with category filtering functionality. Create a Product Details page to show detailed information about individual products, including expandable sections for additional details. Enhance the layout for better usability and responsiveness.
- Implemented Zustand for state management, enabling seamless product addition, removal, and quantity updates in the shopping cart. - Enhanced shopping cart functionality and styling, including product images, quantity controls, and dynamic price calculations. - Integrated a responsive and user-friendly navbar with a hamburger menu for mobile devices, aligning shopping cart and profile icons properly. - Designed and implemented a delivery and payment modal, allowing users to select delivery options and simulate payments via Stripe. - Improved overall responsiveness and UI consistency across the shopping cart and navbar components.
did some updates to the readme file
There was a problem hiding this comment.
Great job with your final project!
JollyKids looks really nice and professional. Love the design. It's fully responsive and the UX is really good.
When it comes to the coding:
Really good structure of the code base. It is easy to navigate and follow your code. You have used comments to explain the code in a good way, maybe in some places it feels a little bit too much. So if it feels the same for you, clean it up a bit.
You have used styled components in a good way, if you were to work even more on this, one thing could be to extract out some of the similar styling to make the code more DRY and create pure styling focused components.
Really nice job implementing the Stripe API and integrating the checkout in your own design.
Good job with commits, and commit messages - it is easy to follow your process there as well.
Once again, great job and be PROUD! ⭐
| <a href="#contact">LinkedIn</a> | ||
| <a href="#portfolio">Portfolio</a> | ||
| <a href="#github">GitHub</a> |
There was a problem hiding this comment.
fixa riktiga länkar! Detta är ert viktigaste projekt, se till att de små sakerna funkar också ;)
| <a href="#contact">LinkedIn</a> | ||
| <a href="#portfolio">Portfolio</a> | ||
| <a href="#github">GitHub</a> |
There was a problem hiding this comment.
fixa riktiga länkar! Detta är ert viktigaste projekt, se till att de små sakerna funkar också ;)
| width: 20px; /* Bestämmer bredden på badge */ | ||
| height: 20px; /* Bestämmer höjden på badge */ | ||
| border-radius: 50%; /* Gör badge rund */ | ||
| display: flex; | ||
| justify-content: center; /* Centrerar texten horisontellt */ | ||
| align-items: center; /* Centrerar texten vertikalt */ |
There was a problem hiding this comment.
do you need these kind of explanations as comments? if not, clean up
Final project
Emelie Nyberg Kedert
Jonas Hellström