• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
arfan

arfan

summer-notes-v1

Unlisted
Like
summer-notes-v1
Home
Code
4
backend
3
frontend
3
shared
2
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 milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
5/23/2025
Viewing readonly version of main branch: v13
View latest version
README.md

Summer Notes v25.5.23

A simple notes collection app built with Val Town, featuring categorized note management with archive functionality.

Features

  • Create, Edit, and Archive Notes: Full CRUD operations except deletion (notes are archived instead)
  • Categories and Groups: Organize notes with predefined categories and groups
  • Color Themes: Choose from 8 different color themes for visual organization
  • Filtering: Filter notes by category, group, and archived status
  • Grouping: Group notes by category or group for better organization
  • Terminal-style Design: macOS terminal-inspired note cards
  • Responsive Design: Works on desktop and mobile devices

Tech Stack

  • Backend: Hono.js with SQLite database
  • Frontend: React 18 with TypeScript
  • Styling: DaisyUI + Tailwind CSS (Nord theme)
  • Platform: Val Town

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema setup
│   │   └── queries.ts       # Database operations
│   ├── routes/
│   │   └── notes.ts         # Notes API endpoints
│   └── index.ts             # Main server entry point
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main application component
│   │   ├── NoteCard.tsx     # Individual note display
│   │   ├── NoteForm.tsx     # Note creation/editing form
│   │   └── FilterBar.tsx    # Filtering and grouping controls
│   ├── index.html           # HTML template with meta tags
│   └── index.tsx            # React entry point
├── shared/
│   ├── config.ts            # Centralized configuration
│   └── types.ts             # TypeScript type definitions
└── README.md

Configuration

All app configuration is centralized in /shared/config.ts:

  • Categories: css, val-town, prompts, notes, chat-gpt, cursor-chats, bash-commands
  • Groups: first, second, third, fourth, fifth
  • Colors: primary, secondary, accent, neutral, info, success, warning, error
  • Theme: Nord (DaisyUI theme)

API Endpoints

  • GET /api/notes - Get all notes (with optional filters)
  • POST /api/notes - Create a new note
  • PUT /api/notes/:id - Update an existing note
  • PATCH /api/notes/:id/archive - Archive a note
  • PATCH /api/notes/:id/unarchive - Unarchive a note

Database Schema

Notes are stored in SQLite with the following structure:

CREATE TABLE summer_notes_v1 ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, content TEXT NOT NULL, category TEXT NOT NULL, group_name TEXT NOT NULL, color TEXT NOT NULL, archived BOOLEAN DEFAULT FALSE, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP )

Design Principles

  • KISS: Simple, focused functionality
  • YAGNI: Only implemented required features
  • SoC: Clear separation between frontend, backend, and shared code
  • SRP: Each component has a single responsibility
  • DRY: Centralized configuration and shared utilities

Meta Tags

The app includes comprehensive meta tags for:

  • Apple mobile web app support
  • Open Graph (Facebook/WhatsApp sharing)
  • Twitter card support
  • Proper favicon and touch icons
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.