{"id":19521030,"url":"https://github.com/rodneylab/svelte-ecommerce-site-start","last_synced_at":"2025-04-26T08:31:10.364Z","repository":{"id":60789737,"uuid":"543044099","full_name":"rodneylab/svelte-ecommerce-site-start","owner":"rodneylab","description":"SvelteKit eCommerce site: how to build a fast, SEO friendly, static eCommerce site using Svelte, Snipcart and Directus.","archived":false,"fork":false,"pushed_at":"2023-02-18T21:41:50.000Z","size":2552,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-08T23:06:53.333Z","etag":null,"topics":["directus","ecommerce","snipcart","svelte","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodneylab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-29T09:52:50.000Z","updated_at":"2023-10-05T16:01:59.000Z","dependencies_parsed_at":"2022-10-04T21:32:06.636Z","dependency_job_id":null,"html_url":"https://github.com/rodneylab/svelte-ecommerce-site-start","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodneylab%2Fsvelte-ecommerce-site-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodneylab%2Fsvelte-ecommerce-site-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodneylab%2Fsvelte-ecommerce-site-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodneylab%2Fsvelte-ecommerce-site-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodneylab","download_url":"https://codeload.github.com/rodneylab/svelte-ecommerce-site-start/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224031555,"owners_count":17244302,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directus","ecommerce","snipcart","svelte","sveltekit"],"created_at":"2024-11-11T00:28:54.222Z","updated_at":"2024-11-11T00:28:55.326Z","avatar_url":"https://github.com/rodneylab.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"./images/rodneylab-github-svelte-ecommerce-site.png\" alt=\"Rodney Lab svelte-ecommerce-site Github banner\"\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"Open Rodney Lab site\" href=\"https://rodneylab.com\" rel=\"nofollow noopener noreferrer\"\u003e\n    \u003cimg alt=\"Rodney Lab logo\" src=\"https://rodneylab.com/assets/icon.png\" width=\"60\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  Svelte eCommerce Site Start\n\u003c/h1\u003e\n\n## svelte-ecommerce-site-start\n\nStarter code for the \u003ca aria-label=\"Open the Svelte e Commerce Site tutorial\" href=\"https://plus.rodneylab.com/tutorials/svelte-ecommerce-site\"\u003eSvelte eCommerce Site tutorial\u003c/a\u003e. Head over there to get started! Also see the \u003ca aria-label=\"Open the Demo Svelte eCommerce Site\" href=\"https://sveltekit-ecommerce-site.rodneylab.com/\"\u003eDemo site for finished storefront\u003c/a\u003e.\n\n## 🧱 Svelte eCommerce Site: What We\u0026rsquo;re Building\n\nWe will build out an small online lego store using SvelteKit for the frontend, Snipcart to manage the checkout and Directus for storing our lego product details and images. The store will have the basic pages you expect from a an eCommerce store, linking them hierarchically in an SEO friendly way recommended by Google. That\u0026rsquo;s not the end of the SEO side of things though! We see how you can let Google and other search engines know about product prices, reviews and where the images are. With the right information Google will be able to create featured snippets in search results. These let your eCommerce store stand out from others returned in results. We will also use edge functions paired with Directus search capability to add a quick search facility without the need to add an external service or host you own Open Source search instance.\n\nPop open the \u003ca aria-label=\"Open teh Demo Svelte eCommerce site demo\" href=\"https://sveltekit-ecommerce-site.rodneylab.com/\"\u003eSvelte eCommerce site demo\u003c/a\u003e to take a look yourself.\n\n## 👍🏽 Svelte eCommerce Site: What we will Cover\n\n\u003e **What we cover**:\n\u003e\n\u003e - New **SvelteKit routing API**,\n\u003e - integrating **Snipcart checkout** state with Svelte stores,\n\u003e - **Svelte flip animations** for dynamic product pages,\n\u003e - uploading product data to **Directus** using your **existing JSON** files,\n\u003e - using **Netlify Edge functions** to add Middleware,\n\u003e - querying Directus SQL database the **TypeScript friendly** way,\n\u003e - generating **responsive, NextGen images** for products using the Directus API,\n\u003e - adding **eCommerce Schema.org** markup to improve site SEO,\n\u003e - **product search feature** using Directus API and edge functions,\n\u003e - **generating Base64 encoded low res placeholder images** in SvelteKit and Deno edge functions,\n\u003e - **deploying to Netlify and testing** SEO.\n\n## ⛔️ What we won\u0026rsquo;t Cover\n\n- SvelteKit basics: check out the \u003ca aria-label=\"Open beginner Svelte tutorial\" href=\"/tutorials/starting-out-svelte-sveltekit\"\u003eStarting out Svelte and SvelteKit tutorial if this tutorial\u003c/a\u003e starts too quickly for you,\n- order fulfilment, though if you can integrate a service like \u003ca aria-label=\"Learn more about print ful\" href=\"https://www.printful.com/uk\"\u003ePrintful to help with fulfilment, packing and shipping\u003c/a\u003e,\n- finding clients to build eCommerce sites for \u0026mdash; that\u0026rsquo;s down to you!\n\n## 😕 Still not sure if it\u0026rsquo;s for you?\nJump into the [Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org) to get your questions answered.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodneylab%2Fsvelte-ecommerce-site-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodneylab%2Fsvelte-ecommerce-site-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodneylab%2Fsvelte-ecommerce-site-start/lists"}