FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
Onujules
Onujulesmy-first-val
Public
Like
my-first-val
Home
Code
8
backend
6
frontend
6
shared
1
S
01_script.tsx
C
03_cron.tsx
E
04_email.tsx
README.md
H
index.tsx
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
README.md

Habit Tracker with Animal Companion 🐾

A delightful habit tracking app featuring a cute animal companion that cheers you on every time you complete a task!

Features

  • 📝 Add and manage daily habits
  • 🐱 Cute animal companion that reacts to your progress
  • ✅ Mark habits as complete with celebratory animations
  • 📊 Track your streak and completion stats
  • 💾 Persistent storage using SQLite

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema setup
│   │   └── queries.ts       # Database query functions
│   └── index.ts             # Main Hono API server
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main app component
│   │   ├── AnimalCompanion.tsx  # Cute animal companion
│   │   ├── HabitList.tsx    # Habit management
│   │   └── AddHabitForm.tsx # Form to add new habits
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   └── style.css            # Custom styles
└── shared/
    └── types.ts             # Shared TypeScript types

API Endpoints

  • GET /api/habits - Get all habits
  • POST /api/habits - Create a new habit
  • PUT /api/habits/:id/complete - Mark habit as complete
  • DELETE /api/habits/:id - Delete a habit

Getting Started

The app will automatically set up the database on first run. Simply access the HTTP endpoint to start tracking your habits with your adorable animal companion!

Code
backendfrontendshared
S
01_script.tsx
C
03_cron.tsx
E
04_email.tsx
README.md
H
index.tsx
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.