Svelte and Firebase with Vite

Todo List App

Setup Project

npm create vite@latest todo-app-firebase
√ Select a framework: » Svelte
√ Select a variant: » JavaScript
cd todo-app-firebase
npm install
npm run dev

• http://localhost:5173

Firebase

• Add firebase to project

npm install firebase

• Create Firebase App, Firebase SDK and Firestore

• Add Firebase SDK to src/firebase.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "your_config",
  authDomain: "your_config",
  projectId: "your_config",
  storageBucket: "your_config",
  messagingSenderId: "your_config",
  appId: "your_config",
  measurementId: "your_config"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export default db;

• Edit src/App.svelte

<script>
  import db from './firebase.js';
  let input;
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(db);
    console.log(input);
  };
</script>

<main>
<form on:submit={handleSubmit}>
<input type="text" bind:value={input} />
<button type="submit">Submit</button>
</form>
</main>

<style>
</style>

• Insert input and submit for test connect Firebase and Firestore

• Update handleSubmit in /src/App.svelte for insert input to Firestore

<script>
  import db from './firebase.js';
  import { addDoc, collection } from 'firebase/firestore';
  let input;
  const handleSubmit = async (e) => {
    e.preventDefault();
    await addDoc(collection(db, "todos"), {
      todoText: input,
      Id: crypto.randomUUID(),
    });
  };
</script>

<main>
<form on:submit={handleSubmit}>
<input type="text" bind:value={input} />
<button type="submit">Submit</button>
</form>
</main>

<style>
</style>

• Insert input and submit

Simple final version UI

• src/App.svelte

<script>
  import db from "./firebase.js";
  import {
    setDoc,
    collection,
    onSnapshot,
    deleteDoc,
    doc,
  } from "firebase/firestore";
  import { onMount } from "svelte";

  let input;
  let snap;

  onMount(() => {
    onSnapshot(collection(db, "todos"), (snapshot) => {
      snap = snapshot.docs;
    });
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Id = crypto.randomUUID();
    await setDoc(doc(db, "todos", Id), {
      todoText: input,
      Id,
    });
    input = "";
  };

  const handleClick = async (id) => {
    await deleteDoc(doc(db, "todos", id));
  };
</script>

<main>
  <h1>Todo App</h1>
  <form on:submit={handleSubmit}>
    <input type="text" bind:value={input} />
    <button type="submit">Submit</button>
  </form>
  <ul>
    {#if snap}
      {#each snap as snapshot (snapshot.data().Id)}
        <li>
          {snapshot.data().todoText} <span on:click={() => handleClick(snapshot.data().Id)}>X</span>
        </li>
      {/each}
    {/if}
  </ul>
</main>

<style>
</style>

• src/app.css

@import url("https://fonts.google.com/share?selection.family=Quicksand");
* {
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif !important;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}

input {
  padding: 10px 15px;
  font-size: 15px;
}

button {
  padding: 10px 15px;
  border: none;
  outline: none;
  cursor: pointer;
}

button:hover {
  background-color: black;
  color: #fff;
}

ul {
  padding-inline-start: 0;
}

li {
  display: flex;
  width: 300px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 1px;
  margin: 5px 0;
  border: 1px solid #000;
  padding-left: 15px;
}

span {
  background-color: red;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  font-weight: bolder;
}

Optional: Tailwind

• Add tailwind to project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• Update tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

• Add tailwind to src/app.css

@tailwind utilities;
/* 
@tailwind base;
@tailwind components;
*/

• Add tailwind to h1 and button in src/App.svelte

<h1 class="text-3xl font-bold underline">Todo App</h1>
...
<button class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% shadow-lg shadow-indigo-500/40" type="submit">Submit</button>

• Ref.

Vite

Svelte

SvelteKit * Web development, streamlined

Firebase

Google Fonts

Next Story

• Use SvelteKit, Skeleton UI, Tailwind and State management.