Habits
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://pfsthaps--905ec5943f9e11f0bc2b76b3cceeab13.web.val.run
A daily habits tracking application built with Val Town, featuring habit management, daily check-ins, and progress visualization.
- β Add, edit, and delete habits
- π Daily habit tracking with simple checkboxes
- π₯ Streak tracking and progress visualization
- π Weekly and monthly progress views
- πΎ Persistent data storage with SQLite
- π± Responsive design for mobile and desktop
βββ backend/
β βββ database/
β β βββ migrations.ts # Database schema setup
β β βββ queries.ts # Database query functions
β βββ routes/
β β βββ habits.ts # Habit CRUD operations
β β βββ tracking.ts # Daily tracking operations
β βββ index.ts # Main Hono server
βββ frontend/
β βββ components/
β β βββ App.tsx # Main application component
β β βββ HabitList.tsx # Habits display and management
β β βββ HabitForm.tsx # Add/edit habit form
β β βββ DailyTracker.tsx # Daily check-in interface
β βββ index.html # Main HTML template
β βββ index.tsx # Frontend entry point
βββ shared/
βββ types.ts # Shared TypeScript types
GET /api/habits
- Get all habitsPOST /api/habits
- Create new habitPUT /api/habits/:id
- Update habitDELETE /api/habits/:id
- Delete habitGET /api/tracking/:date
- Get tracking data for datePOST /api/tracking
- Record habit completionDELETE /api/tracking
- Remove habit completion
- Visit the app homepage
- Add new habits using the "Add Habit" button
- Check off completed habits daily
- View your progress and streaks over time
- Backend: Hono.js with SQLite database
- Frontend: React with TypeScript
- Styling: TailwindCSS
- Platform: Val Town