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