All solutions

Hello everyone!

I tried to take my time with this challenge and make it as aesthetically pleasing and as feature-full as I could.

In addition to the usual goals such as responsiveness, semantic HTML, here is a list of features and that I implemented in this solution:

• Modals with click-away listeners for the cart, the lightbox gallery, and the mobile menu.
• A carousel with swipe support.
• Stacking dismissble toast messages.

The most important thing I learned from doing this challenge: spacer divs!

The technologies and libraries I used:

• Typescript
• React
• Framer Motion
• SCSS

I hope it turned out well. I welcome any constructive or destructive criticism.

I went a bit overboard with this one. :D

I took me almost a month, but here it is, a full stack, fully featured CRUD app resembling Reddit's comment section.

You can read more about it in the sample post in the app itself and also in the description on the repo.

Please tell me what you think, and also, If you're interested in what I did and what the journey was, I am more than willing to talk about it ;)

I admit, I have created an tangled mess of CSS in this one, I tried to do it with utility classes and it made my job exponentially harder.

Lesson 1: Style elements separately and THEN promote stuff to utility classes once you're sure.

Lesson 2: Mobile-first is not always a good idea.

This was quite an interesting one, it had the same information, the products the user can back, repeated twice one click away from one another, once on the main page and once in the modal, and the design wasn't clear on what the relationship between these two instances are. Hopefully my solution makes sense! I had immense fun building this with Svelte and I'm quite proud of it.

Also, there's a bit of a jump when opening the modal on Chrome but not Firefox, if you can figure out what causes that would be great.