Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Audiophile Project - Built with SvelteKit, Tailwind & LocalStorage

Rafalβ€’ 1,395

@grizhlieCodes

Desktop design screenshot for the Audiophile e-commerce website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison


SolutionDesign

Solution retrospective


Howdy!

(I completely ignored accessibility in this project. I was focused on dynamic routing and ssr, along with learning tailwind (which in itself 'made' me write worse HTML)).

I had fun in this one. I haven't used SvelteKit and routing before nor have I tried Tailwind.

Good news: Both are awesome. SvelteKit provided a great way to build the website and to create the product and products pages via dynamic-routing. That is building the pages with a data-file on click, with a soft touch of SSR.

Tailwind was fun to learn, it didn't take very long which was nice. I particularly enjoyed how intuitive the classes felt. Whilst I find it weird to see such convoluted HTML I THINK that Tailwind provides more benefits than shortcomings.

Let me know if you find any bugs :)

G.

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hi, Rafal! πŸ‘‹

I'm a little late to notice your solution but I wanted to check it out since I noticed you used SvelteKit to build it (I'm actually using SvelteKit for a challenge, now, too)! πŸ˜† You've done an amazing job on this challenge! πŸ‘ Everything looks great and works really well and I like some of the extra details you added (such as page transitions)! πŸ‘

I noticed that a horizontal scroll bar momentarily appears along the bottom of the screen during some of the page transitions (probably because of elements moving around during the transition). You might want to add overflow-x: hidden to the body (or something similar) to prevent that from happening. πŸ™‚

Alsoβ€”tiny thing, but I think the default number of items of a product should be reset to "1" when navigating to a new product page (currently, it stays the same between product pages). πŸ˜‰

But overallβ€”awesome work! πŸ™Œ This is a HUGE project but you've done well! πŸ˜€

And +1 for using Svelte and SvelteKitβ€”we really must do (and show) more with these amazing tools! πŸ˜‚

Keep coding (and happy coding, too)! 😁

Marked as helpful

2

Rafalβ€’ 1,395

@grizhlieCodes

Posted

@ApplePieGiraffe Hey Giraffe, thanks so much. I agree, spread the Svelte dream.

I'll probably end up adding those fixes, it won't feel finished otherwise - why do you do this to me 😁 (fixing stuff is generally pleasurable hehe) !!

I honestly thought I spotted every data focused bug in the project and then you point out the number-of-items!! Thanks so much, don't know how I missed it.

You partially inspired me to do Svelte with your Todo project btw so I'm forever grateful. Fricking love everything Svelte. It seems to sort of outline how focusing on simplicity really brings out the FUN in developing, for me at least.

I need to catch up with your projects of late, running behind πŸ˜“

Hope you're well πŸ‘

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@grizhlieCodes

Oh, that's so cool! πŸ˜€ Glad to be of help (and that you're onboard the Svelte train, too)! πŸ‘

I'm doing well, thanks! Hope you're doing the same! πŸ™‚

(Keep Svelting! πŸ˜‰)

Now, I'm off to go find more people to evangelize Svelte to... πŸ˜„

1

@Epic91

Posted

BEAUTIFUL!!!!

1

Rafalβ€’ 1,395

@grizhlieCodes

Posted

@Epic91 Thank you for the kind word 😊

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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