Svelte and Firebase - The Complete Guide (2023)

Set up a svelte kit project by installing Node.js, initializing a skeleton project with npm, installing dependencies, and launching a dev server on localhost:5173.

Install Visual Studio Code and essential extensions (Svelte for VS Code, Prettier, Tailwind CSS IntelliSense, PostCSS) and open the project folder to ensure page.svelte is recognized.

Explore the folder structure from bottom to top, including data.config.js, vite dev server, and adapter auto, and learn how svelte compiles src files into highly optimized JavaScript for deployment.

Explore the src folder, the main development hub where you write html, javascript, and styles in .svelte files, create routes with plus page.svelte, and compile to optimized javascript.

Learn how to implement layouts in SvelteKit by creating a plus layout.svelte file, using a slot to render page content, and wrapping pages with reusable navigation, header, and footer.

Set up tailwind with SvelteKit by installing tailwind CSS and PostCSS, generating config files, and configuring content; create app.css with tailwind directives and import it in layout to generate CSS.

the correction clarifies that tailwind generates css only for classes used in the src folder, per the tailwind config content, and recompiles to update styles in real time.

Copy app.css and tailwind.config.js into your project, using the added classes for sizing, flex, and transitions. Restart the dev server to apply a dark blue background.

Build a Trello-like task manager in Svelte by creating a new route /task-manager, structuring boards with multiple task lists and movable tasks, and applying Tailwind styling.

Create a task manager layout with a plus layout.svelte and a slot to render the page inside root and route layouts, and observe nested wrapping with padding and colors.

Create a new sub page under the task manager route with a sub layout to demonstrate nested layouts and slot propagation from the root layout to the task manager layout.

Clean up the project by removing unused sub folders and simplifying layouts, adjust the root and task manager layouts, and apply padding and slot usage for the next feature.

Demonstrate Svelte reactivity by creating a count variable in a script, binding it in the template with curly braces, and incrementing it via an on:click handler.

Explore Svelte reactive statements, where code runs automatically as count changes, updating the UI and console logs via the $: syntax and dependency tracking.

Master reactive declarations in Svelte by defining a derived doubled value from count using the $: syntax, updating automatically when count changes.

Copy a prebuilt Svelte layout to build a task manager, apply reactive statements, inspect Tailwind classes, and plan reusable features like creating, moving, editing, and removing tasks.

Split the code into a modular architecture by creating a reusable task item component in a new task item.svelte file under src/components/task manager, and import it for reuse.

Build a task list component in the Svelte task manager app that renders multiple task items by composing the task item component and enabling multiple lists.

Master how to pass data from a parent to a child in Svelte using props, export let, and interpolation, with defaults to prevent missing values across components.

Switch from tabs to spaces in Visual Studio Code, set tab size to two, and convert indentation across Svelte files. Enable auto import and verify imports for consistency.

Learn how to iterate with Svelte's each loop, interpolate data with curly brackets, and render a dynamic task list using list.text and a unique key for smooth animations and reordering.

Learn to render dynamic task lists in Svelte by iterating over item arrays, passing tasks as props, and rendering each task's text from the data.

Create an editable component to toggle between display and edit modes for a task item, using a slot to render content and a textarea for editing.

Show how to implement a Svelte if block to conditionally render a slot or a text area inside an editable task item, illustrating edit and view modes and true/false logic.

Wrap the slot in a button element using a flex container to display an editable area based on an if condition, and format the document with the keyboard shortcut.

Toggle editing mode by binding a dynamic isEditing variable; switch between a text area and a button with slot content using click handlers to set true or false.

Explore two-way data binding in svelte by binding text area values with bind:value, capturing edits in a live variable, and syncing default and edited task descriptions in editing mode.

Learn to implement default values for an editable component in Svelte by passing a default value via props and binding it to the task text.

Export the value prop from the editable component and pass it from the parent to bind:value syntax, syncing the textarea with the task text.

Dispatch a child event using createEventDispatcher from the editable component, so the task item parent can update the task when editing closes via on:whatever.

Dispatch custom events in svelte and pass data via the event detail property; access event.detail to read single values or objects like task text and number for updating tasks.

Learn how to use Svelte stores to centralize task list data, subscribe across components, and reactively update or mutate items such as add or delete.

subscribe to a task list store, retrieve and display data reactively, and update the store with set to reflect changes across components.

Explain how to update a Svelte store over time by subscribing, using setInterval to push new values, and implementing an immutable update that returns a new array each tick.

Learn to unsubscribe from a Svelte store using on destroy, store the unsubscribe function, and prevent memory leaks as components are destroyed and navigate between pages.

Learn to simplify Svelte subscriptions by using automatic store reactivity with the dollar prefix, removing manual subscribe/unsubscribe, and keeping task data updated on the task manager page.

Explore how a start function in a Svelte store runs on the first subscription and moves the interval setup into that function, with subscribe, set, and update.

Learn how the start and stop functions manage store subscriptions in Svelte, using setInterval, clearInterval, and proper unsubscribe to prevent multiple intervals and preserve updated values.

Explore how readable stores differ from writable stores in Svelte, exposing only subscribe and updating via the start function to update the task list every two seconds, preventing updates.

Replace the readable store with a writable one, initialize it with default task list data, and subscribe via $taskListStore to render and reactively manage lists.

Learn how to forward events in Svelte by dispatching edit cancel from editable components to the task item and task list, and optimize with automatic forwarding.

Revert update task shows removing forwarding and adding an update task function to a to-do item, handling task ID and update value from events to update items.

Discover how to locate a task within a list using list index or ID, and update its text in a Svelte app built with Firebase.

Learn how to update a task in a Svelte app by locating a task with its id, finding the item index via a store, and updating the task list efficiently.

Update a task by locating it with the list ID and item ID, then override its text via the task list store's update function. Note this runs in memory.

Refactor the Svelte store to expose only the subscribe api, preventing external updates or sets while demonstrating optional destructuring and limited re-exports.

Move the update task functionality from the component into the task list store to improve reusability and readability, and avoid dollar sign syntax in the JavaScript file.

Prep lecture shows wiring the add list button to the task list store in a Svelte app, using a placeholder alert for adding. Next, we prepare full add-list functionality.

Add a new list by updating the task list store with a list object (id, text, items) and an empty array, using date to iso string for a unique id.

Modify the layout to hide vertical overflow with overflow-y: hidden, letting the x axis scroll left to right as you add multiple lists.

Add a new task to a list by calling the addTask function, updating the list's items with a task id and text, and generating the id from the current date.

Apply flex styling to the list container in the Svelte app to make the task list fill the full height. Use flex: 1 to enable scrolling when tasks are added.

Learn to implement drag and drop by enabling a draggable task item, handling the drag start event, and logging the dragging item as you move between lists.

Implement a drop handler to allow dragging a task item to the task list. Use a dragover with preventDefault to enable dropping and log the drop action for visibility.

Enable drag and drop between lists by transferring source list ID and task ID via data transfer, serializing with JSON, and parsing on drop to update the target list.

Move the drag-and-drop logic into the store by adding a move task function in task.js, wiring move data (source list id and task id) to the move-to-list id.

Learn to move a task from one list to another by removing it from the source list and pushing it into the destination, using update and splice operations.

Refactor props by passing the entire list object to the task list, using list.text and list.items to render and move items. Prepare animations and CSS refinements to boost UX.

Track the drop target by updating list hover id on drag enter and apply CSS border changes to the target list, while refactoring to a single list prop.

Learn to implement a conditional hover effect in a Svelte drag‑and‑drop task list by applying a hovering class only to the targeted list using hover IDs and drag enter events.

Learn to implement a shared list hover ID with a module script context and a writable store in Svelte, enabling correct drag-and-drop hover across multiple task lists.