todo-app
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
index.ts
https://arfan--019ad682da67747d9916b66cb2427fed.web.val.run
A magical todo list application themed around the wizarding world of Harry Potter. Keep track of your spells, potions, and magical tasks!
- 🧙♂️ 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
- Backend: Hono.js API
- Frontend: React
- Authentication: LastLogin
- Storage: Val Town blob storage
├── 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
GET /api/todos- Get all todos for the logged-in userPOST /api/todos- Create a new todoPUT /api/todos/:id- Update a todoDELETE /api/todos/:id- Delete a todo
- 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