FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
pfsthaps
pfsthapsHabits
Public
Like
Habits
Home
Code
4
backend
3
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://pfsthaps--905ec5943f9e11f0bc2b76b3cceeab13.web.val.run
README.md

Habits Tracking App

A daily habits tracking application built with Val Town, featuring habit management, daily check-ins, and progress visualization.

Features

  • ✅ 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

Project Structure

├── 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

API Endpoints

  • GET /api/habits - Get all habits
  • POST /api/habits - Create new habit
  • PUT /api/habits/:id - Update habit
  • DELETE /api/habits/:id - Delete habit
  • GET /api/tracking/:date - Get tracking data for date
  • POST /api/tracking - Record habit completion
  • DELETE /api/tracking - Remove habit completion

Usage

  1. Visit the app homepage
  2. Add new habits using the "Add Habit" button
  3. Check off completed habits daily
  4. View your progress and streaks over time

Tech Stack

  • Backend: Hono.js with SQLite database
  • Frontend: React with TypeScript
  • Styling: TailwindCSS
  • Platform: Val Town
HTTP
  • index.ts
    pfsthaps--90…13.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.