I didn't finish the README but please reference the video! Video
- Sveltekit
- Supabase
- DaisyUI (TailwindCSS)
$ npm init svelte@next(for prompt: Skeleton, no, no, no)$ npx svelte-add@latest tailwindcss$ npm install$ npm install daisyui- Add
require('daisyui')topluginsintailwind.config.cjs(like:plugins: [require('daisyui')],)
- Create new Project
- Add src/lib/supabase.js file and add the supabase url and public key
import { createClient } from '@supabase/supabase-js'
const SUPABSE_URL = ''
const SUPABASE_PUBLIC_KEY = ''
const supabase = createClient(SUPABSE_URL, SUPABASE_PUBLIC_KEY)
export default supabase
- (Optional) Disable need to Confirm Email under Authentication > Settings
- (Optional) Choose a theme and add it to src/app.html like
<html lang="en" data-theme="cupcake"> - Add the following to your supabase.js file
import {goto} from '$app/navigation'
supabase.auth.onAuthStateChange((event) => {
if (event === 'SIGNED_IN') {
goto('/')
} else if (event === 'SIGNED_OUT') {
goto('/login')
}
})
- Add a src/lib/Error.svelte component
<script>
export let error
</script>
{#if error}
<strong class="text-red-600">{error.message}</strong>
{/if}
- Add a main.container to src/routes/__layout.svelte
<main class="container mx-auto p-8 max-w-2xl">
<slot />
</main>
- Add a src/lib/services.js file
import supabase from './supabase'
export function getUser() {
return supabase.auth.user()
}
export async function signIn({email}) {
const {error} = await supabase.auth
.signIn({email})
return {data: !error, error}
}
export async function signOut() {
const {error} = await supabase.auth
.signOut()
return {data: !error, error}
}
- Add a src/routes/login.svelte page
<script>
import {browser} from '$app/env'
import {goto} from '$app/navigation'
import {getUser, signIn} from '$lib/services'
import Error from '$lib/Error.svelte'
const user = getUser()
if (browser && user) goto('/')
</script>
- Use an Input with Button (scroll down) for the Magic Link
- Add in form/promise logic to handle the signin (See video or login.svelte file)
- Create posts schema in Supabase (user, content)
- Add to services.js
export async function createPost({content, user}) { // user is user's email
const {data, error} = await supabase
.from('posts')
.insert({content, user})
return {data, error}
}
- Add src/lib/CreatePost.svelte (See video or CreatePost.svelte)
- Add to services.js
export async function createLike({post, user}) { // post is post's id
const {data, error} = await supabase
.from('likes')
.insert({post, user})
return {data, error}
}
export async function createComment({post, user, content}) {
const {data, error} = await supabase
.from('comments')
.insert({post, user, content})
return {data, error}
}
- Add src/lib/Post.svelte (See video or Post.svelte)
- Use a Card without Image (scroll down)