
Product-List-With-Cart made with TypeScript and Tailwindcss
Design comparison
Solution retrospective
I'm really pleased to have completed my first TypeScript project, maybe a little overkill for a project as small as this, but I can see how it would be super useful on larger projects.
It was also fun to dive in to Tailwindcss. On other recent projects I had been using DaisyUI as a plugin for Tailwind, because it makes life easier and I quite enjoy the prebuilt styles it gives. So I used this project to get used to "vanilla" tailwind again.
If I were to do this again I would repeat it in TypeScript again, but would be a little more flexible with my css tools - I really wanted to get this pixel perfect, and while I think I didn't do too bad a job, I know it's not "perfect"!
What challenges did you encounter, and how did you overcome them?Interfaces and ensuring all my datatypes are defined in each piece of state or function. That sure slowed me down. The other tricky bits were getting the css how I wanted it to be for the different devices.
I made the mistake of cracking on with a large screen and styled accordingly, it would have for sure been easier to start mobile and build from there - as then the generic sizes are all for mobile and the tailwind sizings won't miss!
This piece of code took me a while to figure, the key was remembering that I can pass "prevCart" within setCart, to get the latest data/info which is inside of setCart.
function handleAddToCart(dessert: Dessert) {
setCart(prevCart => {
const existingItem = prevCart.find(item => item.name === dessert.name)
if (existingItem) {
return prevCart.map(item =>
item.name === dessert.name ? { ...item, quantity: item.quantity + 1 } : item
)
} else {
return [...prevCart, { ...dessert, quantity: 1 }]
}
})
}
What specific areas of your project would you like help with?
As it's my first time TypeScript'ing then I'm open to any feedback regarding it.
It's currently in dire need of being refactored into components, so I'm well aware of this. Just want to get it submitted and online asap. Will work on refactoring in the coming days.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord