FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
ryi
ryipathfinder__5712n7-bore
Public
Like
pathfinder__5712n7-bore
Home
Code
8
.github
1
backend
2
frontend
6
shared
1
.vtignore
README.md
deno.json
H
main.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 milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
7/20/2025
Viewing readonly version of main branch: v94
View latest version
README.md

Life Status - At a Glance PWA

A personal dashboard for tracking tasks, habits, and media consumption with offline support and syncing capabilities.

Features

āœ… Tasks & Habits Tracking

  • Weekly grid view showing completion status
  • Support for multiple completions per week
  • Visual indicators with color coding
  • Notes for each completion

šŸ“š Media Progress Tracking

  • Organize by status: inbox, upcoming, in progress, on hold, completed
  • Group by social context: solo, with wife, with friends, etc.
  • Support for books, movies, TV shows, podcasts, games, articles, courses
  • Progress tracking and ratings

šŸ”„ Offline & Sync

  • PWA with offline functionality
  • CRDT-based conflict resolution
  • Audit logging for data integrity
  • Background sync when online

šŸ“± Mobile Optimized

  • Responsive design for iPhone use
  • Touch-friendly interface
  • PWA installable on home screen
  • Smooth animations and interactions

Project Structure

ā”œā”€ā”€ backend/
│   ā”œā”€ā”€ database/
│   │   ā”œā”€ā”€ migrations.ts    # Database schema
│   │   └── queries.ts       # Database operations
│   └── index.ts             # Hono API server
ā”œā”€ā”€ frontend/
│   ā”œā”€ā”€ components/          # React components
│   │   ā”œā”€ā”€ App.tsx         # Main app component
│   │   ā”œā”€ā”€ TaskGrid.tsx    # Task tracking grid
│   │   ā”œā”€ā”€ MediaGrid.tsx   # Media tracking grid
│   │   └── *.tsx           # Modal components
│   ā”œā”€ā”€ index.html          # PWA manifest
│   ā”œā”€ā”€ index.tsx           # React entry point
│   ā”œā”€ā”€ manifest.json       # PWA manifest
│   └── sw.js               # Service worker
ā”œā”€ā”€ shared/
│   └── types.ts            # Shared TypeScript types
└── main.tsx                # Val Town entry point

API Endpoints

  • GET /api/tasks - Get all tasks
  • POST /api/tasks - Create new task
  • GET /api/completions - Get task completions
  • POST /api/completions - Mark task as complete
  • GET /api/media - Get all media items
  • POST /api/media - Create new media item
  • PUT /api/media/:id - Update media item
  • POST /api/sync - CRDT sync endpoint
  • POST /api/devices/register - Register device

Technology Stack

  • Backend: Hono + SQLite (Val Town)
  • Frontend: React 18 + TypeScript
  • Styling: Tailwind CSS
  • PWA: Service Worker + Manifest
  • Sync: CRDT with vector clocks
  • Storage: SQLite with audit logging

Usage

  1. Add Tasks/Habits: Click "+ Task" to add new recurring tasks
  2. Track Completion: Tap circles in current week to mark complete
  3. Add Media: Click "+ Media" to track books, shows, etc.
  4. Organize Media: Drag items between status columns
  5. Offline Use: App works offline and syncs when back online

Data Model

Tasks

  • Support for weekly frequency (1x, 2x, 3x per week)
  • Color coding and categorization
  • Completion tracking with notes

Media

  • Type: book, movie, TV show, podcast, game, article, course
  • Status: inbox → upcoming → in progress → on hold → completed/abandoned
  • Social groups: solo, with wife, with friends, with family
  • Metadata: author, director, genre, progress, ratings

Sync

  • CRDT operations for conflict-free replication
  • Vector clocks for ordering
  • Audit logs for debugging
  • Device registration and management

The app is designed to be information-dense yet beautiful, perfect for quick daily check-ins on your life status.

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.