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