Top 23 Svelte sveltekit Projects
-
sveltekit-starter
Sveltekit starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and storybook. The project has the structure set up for the scaleable web application.
Project mention: Svelte/Vite integration with Storybook/Tailwind? | reddit.com/r/sveltejs | 2021-10-03I had this on my starred repos, I hope you find it useful!
-
Starting from the issue, I opened a new workspace in Gitpod by prefixing the GitHub url like so: https://gitpod.io/#https://github.com/gitpod-io/website/issues/1139.
-
Scout APM
Scout APM: A developer's best friend. Try free for 14-days. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
Hi, I'm the author of SveltePress and got into a similar situation while working on the GUIs.
-
In this post we see how you can modify a Svelte blog site to respond to some Vim keyboard shortcuts. We'll clone the SvelteKit Blog MDsveX Starter to get things going quicker. Then we will create a new component for responding to keyboard shortcuts and add that to the existing blog post template. If you are not yet familiar with SvelteKit, you can still follow along. If you don't like Svelte then the code can also be adapted for use on React or plain HTML/JavaScript sites. Why don't we press on?
-
Project mention: Load data from an API on localhost - then deliver from SvelteKit server to client | reddit.com/r/sveltejs | 2021-09-20
For Endpoints, I'd recommend checking out this example for a good idea on how they're used. If you're gonna be transforming the external API data, you can do it in the Endpoint. Speed really hasn't been a concern for me, even deployed on Cloudflare Workers. Here's one of my endpoints, for an example of how I use and abuse endpoints lmfaoo.
-
Project mention: Can I deploy a SvelteKit app that uses endpoints on something like Netlify or Vercel? | reddit.com/r/sveltejs | 2021-08-07
-
sveltekit-netlify-stripe-fauna-example
SaaS boilerplate example with SvelteKit + Tailwind + Netlify Identity (GoTrue) + Stripe + Fauna.
Project mention: What's the quickest way to set up a website that sell subscription-based products? | reddit.com/r/webdev | 2021-09-09Found this a while ago: https://github.com/ClaytonFarr/sveltekit-netlify-stripe-fauna-example
-
-
Project mention: Got sick of the trashcan web client so I built my own! | reddit.com/r/tmobileisp | 2021-08-29
Link for anyone interested: https://github.com/kclejeune/TMobile-ISP-Client
-
With a few modifications to a default SvelteKit demo app, we managed to configure Prisma to persist todo items. There is of course a lot more you can do with Prisma, and with SvelteKit for that matter. The source code at https://github.com/mikenikles/sveltekit-prisma should get you a long way towards your own web app.
-
guess-the-year-game
A simple browser mini-game where you guess the year that the following event happened.
Project mention: Show HN: A small browser game where you have to guess the year things happened | news.ycombinator.com | 2021-05-28- What year did Calvin Coolidge become president of the United States?
Hope you have fun with it. My personal high score is 10, but one of my friends managed to get 24.
Here's the github repo: https://github.com/davjhan/guess-the-year-game
I used
- Sveltekit (beta)
-
There is a little data which feeds into the SchemaOrg component. The mechanism is similar to the one we used for the Twitter and OpenGraph components though. As there is a bit to get through here, we won't go into details on how to plumb the data in. That should stop the post getting too long! You can see the full code on the Rodney Lab GitHub repo which is a complete and tested version. The demo site is up at sveltekit-seo.rodneylab.com/. We will focus on the SchemaOrg component which is in the file src/lib/components/SEO/SchemaOrg.svelte.
-
svelte-tutorial
This repo is the final product of the above tutorial. It is a two-page website using Svelte and Sveltekit with content managed in Prismic. (by samlfair)
Project mention: Correctly prerender SvelteKit dynamic pages with Prismic as the CMS | dev.to | 2021-04-07When testing SvelteKit out (I had read about it on Sapper docs somewhere 🤷♂️) but then there was the beta release so I tried it out and also read the Prismic blog post on setting it up and it worked a lot better, the experience was similar to Next and the result was a really really fast build. (Like stupid quick compared to other things)
-
If you prefer to just have the starter files you can get the repo here and if you only want to have a template to get started with then check out the Deploy button on the GitHub repo.
-
Github repo: https://github.com/pawelblaszczyk5/blog
-
Learnbuildteach.com
-
If you are interested in digging deeper into other functionalities you can browse the source code of my blog here
-
-
sveltekit-graphql-github
Use Apollo Client with SvelteKit to Query a GraphQL API: we use the GitHub API to query our repos and learn a bit of SvelteKit along the way.
If you don't yet have a site ready to push, but want to try our Render, just use the demo site repo from the Apollo Client Sveltekit Tutorial. You will just need to generate your own GitHub API token. There are instructions in the GraphQL Github post.
-
I would be really grateful if you could tell me if there is any guide with more information about the "normal" implementation you are referring to, I found this https://github.com/WayneMorganUK/sveltekit-auth0 But I don't know if you mean the "Regular Web Applications" flow on Auth0, I apologize that I am really a bit lost and since there is no SDK, I think I had a short circuit.
-
sveltekit-image-plugin
SvelteKit demo code for using vite-imagetools to add cached, responsive, Next-Gen images to a SvelteKit site with no cumulative layout shift.
You can see the full code for this tutorial on the Rodney Lab GitHub page. There is also a demo site.
-
sveltekit-instagram-infinite-scroll
SvelteKit infinite scroll: see how you can use Svelte stores and a reactive function to implement an infinite scrolling Instagram feed.
As always get in touch with feedback if I have missed a trick somewhere! You can see the full code for this SvelteKit Instagram Infinite Scroll tutorial on the Rodney Lab Git Hub repo.
-
The code: https://github.com/evanwinter/sveltekit-page-transitions
-
sveltekit-hcaptcha-form
SvelteKit hCaptcha contact form: see how you can scare bots away from your Svelte site using a privacy focussed captcha service.
Still, you can borrow the code and wrap the 'window' dependent portions inside of onMount() or 'if browser' blocks. Or, just hit Google again with hcaptcha sveltekit.
Svelte sveltekit related posts
Index
What are some of the best open-source sveltekit projects in Svelte? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | sveltekit-starter | 241 |
| 2 | website | 172 |
| 3 | SveltePress | 158 |
| 4 | sveltekit-blog-mdx | 69 |
| 5 | Beatbump | 50 |
| 6 | programmingtil-svelte | 41 |
| 7 | sveltekit-netlify-stripe-fauna-example | 34 |
| 8 | TMobile-ISP-Client | 23 |
| 9 | sveltekit-prisma | 20 |
| 10 | guess-the-year-game | 19 |
| 11 | sveltekit-seo | 17 |
| 12 | svelte-tutorial | 9 |
| 13 | sveltekit-graphcms-starter-blog | 7 |
| 14 | blog | 6 |
| 15 | learnbuildteach.com | 5 |
| 16 | reego.dev | 5 |
| 17 | blog | 5 |
| 18 | sveltekit-graphql-github | 3 |
| 19 | sveltekit-auth0 | 2 |
| 20 | sveltekit-image-plugin | 2 |
| 21 | sveltekit-instagram-infinite-scroll | 1 |
| 22 | sveltekit-page-transitions | 1 |
| 23 | sveltekit-hcaptcha-form | 1 |
Are you hiring? Post a new remote job listing for free.
