FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
stevekrouse
stevekrousetodo-app
Public
Like
1
todo-app
Home
Code
4
backend
1
frontend
3
shared
1
README.md
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Code
/
Search
index.ts
https://stevekrouse--c55bf23a367a11f097069e149126039e.web.val.run
README.md

Wizarding Tasks - A Harry Potter Themed Todo App

A magical todo list application themed around the wizarding world of Harry Potter. Keep track of your spells, potions, and magical tasks!

Features

  • šŸ§™ā€ā™‚ļø Harry Potter themed interface
  • šŸ“ Create, read, update, and delete tasks
  • šŸ” User authentication with LastLogin
  • šŸ’¾ Data persistence with Val Town blob storage
  • ⚔ Performance optimized with server-side data bootstrapping

Tech Stack

  • Backend: Hono.js API
  • Frontend: React
  • Authentication: LastLogin
  • Storage: Val Town blob storage

Project Structure

ā”œā”€ā”€ backend/
│   ā”œā”€ā”€ index.ts             # Main entry point with Hono and LastLogin
│   └── routes/              # API routes for todos
ā”œā”€ā”€ frontend/
│   ā”œā”€ā”€ components/          # React components
│   ā”œā”€ā”€ index.html           # Main HTML template
│   └── index.tsx            # Frontend entry point
└── shared/
    └── types.ts             # Shared types and interfaces

API Endpoints

  • GET /api/todos - Get all todos for the logged-in user
  • POST /api/todos - Create a new todo
  • PUT /api/todos/:id - Update a todo
  • DELETE /api/todos/:id - Delete a todo

Performance Optimizations

  • Server-side data bootstrapping: User data and todos are injected into the initial HTML response
  • No loading state for initial page load when user is logged in
  • Reduced API calls by using bootstrapped data
HTTP
  • index.ts
    stevekrouse--c5…9e.web.val.run
Code
backendfrontendsharedREADME.md
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
Ā© 2025 Val Town, Inc.