Day 1: Review JavaScript/Intro to Svelte

Activity 1: Todo App (Code along)

Make a text feed that a user can post to and delete from with pure javascript


Lesson 1: Svelte Hello World

Go through part 1 on

You learn better by typing everything out!

While the solve button will autosolve the tutorial, I strongly recommend actually typing out the tutorial and trying to complete each step yourself!

Day 2: Svelte

Lesson 1: Setup

On replit open the Svelte template!

Activity 1: Recreate day 1’s activity using Svelte

Make sure to refer to the Svelte documentation for help, just like how you looked at the P5.js documentation for the Experiment level.

Day 3: NodeJS

Activity 1: Fastify + Replit DB Post Server

Replit Post Server

Fastify Getting Started guide

Activity 2: Svelte + Fetch


The fetch javascript function lets us get data from our other website and insert it into our own website. Here’s how to use it to fetch from my example server:

posts = await (await fetch(postsURL)).json()

The await keyboard tells the browser to wait for the server to get back to us before continuing with setting the posts value to what the server said the list of posts is currently.

Here’s an example replit. Don’t look at my code until you’ve looked at the Svelte documentation and asked a friend!


Day 4: Brainstorm App (collaborative)

Activity 1: Brainstorm App (10 mins)

Make a new Svelte project and list out ideas in

Make sure to limit the scope of the project to something that can be done in one hour!

Here’s some example ideas!

Activity 2: Design Frontend (25 mins)

Use the fileName.draw feature on Replit to design the website within the project created for Activity 1. Replit Link

A sketch of the design for the Posts app

Activity 3: Design backend (25 mins)

Make a new node.js project

Make a file and use it to design the API for the server. Replit Link

Day 5: Program App

Activity 1: Program App (60 mins)

Use the designs you made yesterday and actually code them up.