All solutions

My solution to this challenge. It was my first experience with Tailwind and I can't imagine going back to vanilla css already...

The main problem of this challenge is usage of the <picture> tag in nextjs. It does not leverage the benefits of next/image which results in CLS. Recently, there have been some developments in bringing <picture> to nextjs but I must say that I still do not understand how to use them to create a <picture> component (and if they even can be used to enable "art-direction-based" images). If someone could point me in the right direction I would be much obliged.

My solution to the "audible" challenge. It is a full stack application - it remembers the content of your cart and will write your order to a database (if you place one!)

I learned a lot by working on this project. My favorite parts:

• Learning form validation (react-hook-form + zod)
• Using TanStack Query
• Gaining better understanding of TypeScript in many (little) ways

I invite you to play around with the website :)

Hello, thank you for checking out my project.

The main obstacles in this project were svgs. Unfortunately for some reason the recommended plugin (@svgr/webpack) refused to work for me and I decided to use inline svgs. It resulted in some css improvisation to fix alignment problems.

I will be grateful for some good resources related to using svgs in Next.js.

I would also like to make the carousel accessible but at the moment I don't know enough about a11y to do it.

The site also has a very strange horizontal overflow problem on Safari for IOS (checked with a 13-inch ipad). I have hidden overflow on both body and html elements, set max-width to 100vw, but the pill shape in the top right corner appears to be overflowing nonetheless... (strangely enough, the lower one on the left side, doesn't ).

Hello, I would be thankful for any suggestions how to deal with that image "pop in" the first time it is loaded. It takes away from the smooth experience of the website and I find it deeply annoying.