Skip to content
Submitted almost 4 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.

Please log in to post a comment

Log in with GitHub

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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
  • Evelyn Hernandez•40
    @Epic91

    BEAUTIFUL!!!!

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