Skip to content
Submitted over 3 years ago

Audiophile Project - Built with SvelteKit, Tailwind & LocalStorage

Rafal•1,395
@grizhlieCodes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Audiophile e-commerce website
  • HTML
  • CSS
  • JS
5guru

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

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    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
    @grizhlieCodesPosted over 3 years ago

    @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
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @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
  • Evelyn Hernandez•40
    @Epic91Posted over 3 years ago

    BEAUTIFUL!!!!

    1
    Rafal•1,395
    @grizhlieCodesPosted over 3 years ago

    @Epic91 Thank you for the kind word 😊

    0

Please log in to post a comment

Log in with GitHub

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