Log inSign up
beekay
beekaysupport_case
Public
Like
support_case
Code
5
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
/
Search
Open in new tab
README.md

Budget Tracker App

A comprehensive budget tracking web application built for Val Town with mobile-first design.

Features

  • 📱 Mobile-responsive design
  • 💰 Income and expense tracking
  • 📊 Budget categories and spending limits
  • 📈 Visual analytics with charts
  • 💾 SQLite data persistence
  • 🔒 Simple user authentication
  • 📱 PWA capabilities for app-like experience

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema setup
│   │   └── queries.ts       # Database query functions
│   ├── routes/
│   │   ├── auth.ts         # Authentication routes
│   │   ├── transactions.ts # Transaction CRUD operations
│   │   ├── budgets.ts      # Budget management
│   │   └── analytics.ts    # Analytics and reporting
│   └── index.ts            # Main Hono app entry point
├── frontend/
│   ├── components/
│   │   ├── App.tsx         # Main app component
│   │   ├── Dashboard.tsx   # Dashboard overview
│   │   ├── TransactionForm.tsx
│   │   ├── TransactionList.tsx
│   │   ├── BudgetManager.tsx
│   │   └── Analytics.tsx
│   ├── index.html          # Main HTML template
│   ├── index.tsx           # Frontend entry point
│   └── style.css           # Custom styles
└── shared/
    └── types.ts            # Shared TypeScript types

Tech Stack

  • Backend: TypeScript with Hono framework
  • Frontend: React 18.2.0 with TypeScript
  • Database: SQLite
  • Styling: TailwindCSS
  • Charts: Chart.js
  • Icons: Lucide React

Getting Started

  1. Set the backend trigger to HTTP
  2. The app will automatically set up the database on first run
  3. Access the app through the HTTP endpoint
  4. Create an account and start tracking your budget!

API Endpoints

  • POST /api/auth/register - User registration
  • POST /api/auth/login - User login
  • GET /api/transactions - Get user transactions
  • POST /api/transactions - Create new transaction
  • PUT /api/transactions/:id - Update transaction
  • DELETE /api/transactions/:id - Delete transaction
  • GET /api/budgets - Get user budgets
  • POST /api/budgets - Create/update budget
  • GET /api/analytics - Get spending analytics
Code