Hello and welcome to another tutorial. This is about adding feature flags to an app made with [SvelteKit](https://kit.svelte.dev/), [Unleash](https://www.getunleash.io/) and the official [Unleash Svelte SDK](https://docs.getunleash.io/reference/sdks/svelte).
We'll make a paired-down habits app to keep track of your new year's resolutions. The feature flag will be used to change the number of habits a user can add.
While this is not meant to be a complete product, we can leverage feature flags using a full stack framework like Next.js or SvelteKit. The completed code for this implementation is available in [a Github repository](https://github.com/alvinometric/unleash-sveltekit).
We'll use Svelte stores to keep track of a global array of habits. For the sake of simplicity, we won't store these habits anywhere yet (feel free to add localStorage or a database). Our basic habit app will only consist of 3 files.
First, a global store that will contain our habits and their completion dates. Just JavaScript, no Svelte yet.
```js
// src/lib/stores.js
import { writable } from "svelte/store";
export const habitStore = writable([
{
id: 1,
name: "Walk 10k steps",
completedDays: [],
},
]);
```
Then, we'll create an `App.svelte` file for our main logic.
```svelte
<script>
// src/lib/App.svelte
import { format, addDays } from 'date-fns';
import Habit from '$lib/Habit.svelte';
import { habitStore } from '$lib/stores.js';
import AddHabit from '../lib/AddHabit.svelte';
let maxHabits = 2;
// go back 5 days
const dates = new Array(5).fill(0).map((_, i) => {
let today = new Date();
return addDays(today, -i);
});
</script>
<AddHabit{maxHabits}/>
<table>
<thead>
<tr>
<th>Habit</th>
{#each dates as date}
<th>{format(date, 'MMM do')}</th>
{/each}
</tr>
</thead>
<tbody>
{#each $habitStore as habit}
<Habit{habit}{dates}/>
{/each}
</tbody>
</table>
```
Next, update the `+page.svelte` file (our index route) to include our app.
```svelte
<script>
// src/routes/+page.svelte
import App from '../lib/App.svelte';
</script>
<App/>
```
To complete the basic setup of the app, add a component for each habit that be checked on and off using this code snippet:
```svelte
<script>
// src/lib/Habit.svelte
import { habitStore } from '$lib/stores.js';
import { format } from 'date-fns';
export let habit;
export let dates;
function toggleDay(day) {
let updatedDays = [...habit.completedDays];
const index = updatedDays.indexOf(day);
if (index !== -1) {
updatedDays.splice(index, 1);
} else {
updatedDays.push(day);
}
habitStore.update((items) => {
return items.map((item) => {
if (item.id === habit.id) {
return { ...item, completedDays: updatedDays };
}
return item;
});
});
}
</script>
<tr>
<td>{habit.name}</td>
{#each dates as date}
<td>
<input
type="checkbox"
on:click={() => toggleDay(date)}
checked={habit.completedDays.includes(date)}
/>
{format(date, 'MMM do')}
</td>
{/each}
</tr>
```
Now we have a fully functioning Svelte app in all its glory! Essentially, it's a table with checkboxes.
Based on whether this flag is enabled or not, we'll set the `maxHabits` value to either 6 or 2. You could set this directly in a flag value if you wanted as well.
### Basic toggle
We'll use the Svelte SDK to wrap a context provider around `App.svelte` like so:
```svelte
<script>
// src/routes/+page.svelte
import App from '../lib/App.svelte';
import { FlagProvider } from '@unleash/proxy-client-svelte';
const config = {
url: 'https://eu.app.unleash-hosted.com/jdfkdjfkd/api/frontend', // Your Front-end API
clientKey: '', // Front-end API token (or proxy client key)
appName: 'habits'
};
</script>
<FlagProvider{config}>
<App/>
</FlagProvider>
```
Note that I’m using the URL and API key directly in the code right now, but you’d want to put these in an env file.
Now that our SDK is setup, we can modify our `App.svelte` to set the value of the variable based on the feature flag.
```diff
+ import { useFlag } from '@unleash/proxy-client-svelte';
