Guided: Develop a Full-stack App with SvelteKit

Welcome to the SvelteKit Smart Notes lab! In this lab, you'll build a complete full-stack application from scratch. SvelteKit is a powerful framework that simplifies building robust web apps by seamlessly integrating front-end and back-end development.

Your Goal

You will build a "Smart Notes" application where users can create, view, and delete their personal notes. This hands-on experience will teach you the core concepts of SvelteKit.

Key Features You'll Implement:

• UI Components: You'll use Svelte 5's new reactive primitives, called runes, to build your user interface.
• Database Integration: You'll connect to a SQLite database using the Drizzle ORM to define your data schema and manage notes.
• Server-Side Logic: You'll use SvelteKit's form actions to handle creating and deleting notes securely on the server.
• Data Loading: You'll use load functions to fetch data server-side and render it efficiently.
• User Sessions: You'll implement a simple cookie-based session to ensure users only see their own notes.

The project files are already set up for you to begin!

Every data-driven application needs a database schema. You'll use Drizzle, a modern TypeScript ORM (Object-Relational Mapping) library, to define the structure of the data. It provides a type-safe way to interact with the database.

The application will have two main entities: users and notes. You'll define these in src/lib/server/db/schema.ts. A note will belong to a user, creating a relationship between the two tables. With the schema defined, you need to tell Drizzle where to find it and where to place the migration files. These migration files contain the SQL commands to create or update the database tables. Now that your schema and configuration are ready, you can create and apply the database migration. Run the following command in the Terminal to generate the SQL files:

npm run db:generate

Then, run this command to apply the migration to your database:

npm run db:push

With the database set up, you can now build the user interface.

Running the Application

In the Terminal tab, start the development server by running the following command:

npm run dev

This will start the application, and you can view your progress in the Web Browser.

A great application needs a clean and functional user interface. You'll build the UI using Svelte components. Svelte makes it easy to create reusable, encapsulated pieces of UI.

You'll create two main components:

• NoteCard – displays a single note
• NoteForm – the input form

The NoteCard.svelte and NoteForm.svelte files have already been created for you. You’ll update these files in the following tasks. Great! The basic UI components are ready. Next, you'll fetch data from the database and display it using these components.

To get data into our Svelte components, you use SvelteKit's load functions. A load function in a +page.server.ts file runs on the server before the page is rendered. It can fetch data from a database or an API and pass it to the corresponding +page.svelte component as a data prop.

This is a core concept in SvelteKit that enables server-side rendering (SSR) and provides a powerful data-loading pattern. Now that the load function is providing the data, render it in your page component.

Handling form submissions is a fundamental part of any web app. SvelteKit makes this incredibly easy and secure with form actions. Actions are server-side functions that run when a form is submitted. They live alongside your load function in +page.server.ts.

This approach works even if JavaScript is disabled and prevents you from having to create separate API endpoints for form handling. With the action defined, any POST request from a form on this page will be handled by the server-side logic. Now, add user context to the app.

The app needs to distinguish between different users. In this step, you'll implement a simple session mechanism using cookies.

A server hook (src/hooks.server.ts) is a file that exports a handle function that runs for every request made to your server. You'll use this to check for a userId cookie and create one if it doesn't exist. With the user's ID available on every request, you can now scope the data operations to the current user. Finally, you'll add the ability to delete notes. You'll create a new named action for this. While a page can only have one default action, it can have multiple named actions, which are triggered by adding a query parameter to the form's action attribute (e.g., action="?/delete").

Congratulations on completing the lab! You have successfully built a full-stack Smart Notes application from the ground up using SvelteKit.

What You've Learned

• Full-stack Structure: You've seen how SvelteKit organizes an application with file-based routing.
• Data Loading: You implemented server-side data fetching with load functions.
• Form Handling: You used secure form actions to handle creating and deleting data.
• Database Integration: You defined a schema and interacted with a database using the Drizzle ORM. -Server Hooks: You implemented a simple session management system using server hooks and cookies.

SvelteKit is a powerful tool for modern web development, and you now have the foundational skills to build your own fast, scalable, and enjoyable-to-develop applications. Keep exploring and building!