amr3k / storekit

StoreKit

Dev notes

• Use deferred transitions for add to cart.

A next generation E-Commerce theme built with SvelteKit.

What did I learn through this project?

SvelteKit

This is how to build a modern website

• Debugging backend code is not yet supported. More info
• Stores can't be updated in server as the $app/env/browser is not available
• It's better to use Svelte Context API to share data between nested components than using props.
• For separated components, it's better to use stores.
• Use custom __error.svelte to show error message.
• It's better to separate reusable components into $lib directory.
• Always keep an eye on monthly changelog, as sveltekit is still in beta.

  One example for this is in commit (63737b89b3881f891c68513189361a485e5c9ab2) When I found that $page.path was replaced with $page.url.pathname

• Always check <slot /> in layouts and children components.
• The function get from svete/store will return false if the store is an empty array, So you should validate it with if (!get(store)) ....
• If you found a bug, it's better to use incognito mode to ignore cache & localStorage.

i18n

• SVG follows HTML direction.

• Fancy border radius follow HTML direction as well.

• Useful libraries:

  • Typesafe i18n (⭐+720)

    An opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.

  • svelte-i18n (⭐+660)

    Internationalization library for Svelte

  • svelte-intl-precompiled (⭐+180)

    I18n library for Svelte.js that analyzes your keys at build time for max performance and minimal footprint.

  • 🔥 sveltekit-i18n (⭐+30)

    Internationalization library built for SvelteKit

Typescript (&Javascript)

What a discovery!

• localStorage is always text based, so it's better to use JSON.stringify and JSON.parse to store objects and arrays (which are objects btw).

GraphQL

Using gQuery

WooCommerce REST API (Dropped for now in favor of Saleor)

I already had experience with building with Wordperss+Woocommerce

But this was a good refresher on the API

Unfortunately it was not the right choice here. as Our website uses a 3rd party plugin for products, And they changed the way it works with images so now it fetches images from their Google Cloud not from our server! This resulted in lots of CORS errors that I don't really care to fix anymore. I'll explore other options.

Medusa

A headless-first shopify alternative built with Javascript More info

• Tried to use it but it had lots of issues!

TailwindCSS v3.0

I used v2 in previous projects

• Tailwind has some nice plugins available in documentation
• Most of DaisyUI components can be easily rebuilt with Tailwind (for better control)

Vercel

The default bot action is to comment on each push with the deployment status.

To disable this, you can modify vercel.json as follows:

Other

• This website is a great tool for managing favicons
• Use inline SVG instead of external for fewer HTTP requests and to disable right click save image as, also to avoid dealing with accessiblity for the image tag.

{
	"github": {
		"silent": true
	}
}

UI Components

DaisyUI

Source ⭐+7.3K

• ✅ Built with TailwindCSS.
• ✅ Easy to use and customize.
• ✅ Regular updates

SvelteMaterialUI

Source ⭐+2.2K

• ✅ Material design.
• ✅ Regular updates

SPaper

Source ⭐+70

• ✅ Great for prototyping (paper like).

Attractions

Source ⭐+500

• ✅ Gorgeous design.
• ✅ Regular updates.

Carbon

Source ⭐+1.3K

• ✅ Most feature complete, has most components I may need.
• ✅ Regular updates.
• ❎ Ugly design for my taste.

SvelteMUI

Source ⭐+260

• ✅ Material design.
• ✅ Regular updates.
• ⚠ Still work in progress.

Smelte

Source ⭐+1.2K

• ⚠ Built with Tailwind 2.
• ⚠ A bit outdated.

Kahi-UI

Source ⭐+130

• ✅ Typescript + plain CSS.

Other

• Svelte materialfy (deprecated)
• Svelteit (deprecated)

Attractions

Resources

• Order button animation
• Credit card form

UI Inspired by muroexe

Credits

• Undraw For awesome illustrations
• jovianmoon for the lazy loading image function