Badge #1 – Client Side salsa
Performance
- We use Svelte 5 (+SvelteKit) as our full-stack framework, which produces near-native JavaScript bundle sizes.
- SvelteKit renders content on the server by default, minimizing client overhead and keeps environment variables safe and secure.
- We use Tailwind CSS to style our application which produces an incredibly small CSS file by carefully compiling only the CSS actually used into single file.
State Management
To handle user state we utilize SvelteKit hooks and the msal node library to authenticate and authorize requests. Hooks run on every request to the server and provides information about the request and user state.
As a first layer of protection we check if requested path is within a user-only part of our application. If no user is signed the application will redirect the user to a login flow which redirects the user back to the original URL if successful.
For the second layer of protection we check if the request URL is towards our Dataverse instance, and if so we try to silently acquire an Access token, which is then used as the Authorization Header.
If the token acquisision fails, the user is redirected to an interactive login flow.
Badge #2 – Thieving Bastards
MSAL Node
We use MSAL node to authenticate users and authorize requests made our Dataverse instance.
Tailwind CSS
To style our application we use Tailwind CSS which is a modern utility-based approach to use CSS.
MELT UI
Melt is a low-level UI library that provides powerful API’s that abstracts a lot of the difficult parts about accessability, while being compltely unstyled so we as developers can create unique components to our app.
AI-sdk + Zod
Documented in Crawler badge below.
Badge #3 – Crawler
We have created an AI-chat instance using ai-sdk package from Vercel that the user can interact with in natural language. This package also uses Zod, the most popular JS validation library, to validate that parameters are in the correct format.
The assistant is instructed to recognize certain requests from the user and can call respective API’s based on the request.
In this instance, Dobby recognized that the student was looking for a spell with an exploding effect.
It then used the effect as a filter on Harry Potter DB.
The results from the API are returned to the chat, were the user can choose to study it further.