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

arfan

summer-notes-v1

Unlisted
Like
summer-notes-v1
Home
Code
9
.cursor
1
.vscode
1
_md_Files
4
backend
4
frontend
3
shared
2
.gitignore
.repoignore
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: v83
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

Usage

  1. Creating Notes: Click "Add Note" to create a new note with title, content, category, group, and color theme
  2. Editing Notes: Click "Edit" on any note card to modify its content
  3. Archiving: Click "Archive" to archive a note (it won't be deleted, just hidden from the main view)
  4. Filtering: Use the filter bar to filter by category, group, or view archived notes
  5. Grouping: Use the "Group By" dropdown to organize notes by category or group

Terminal-Style Design

Each note card features a macOS terminal-inspired design with:

  • Terminal window controls (red, yellow, green dots)
  • Monospace font for code content
  • Dark background for content area
  • Category and group information in the header

Live Demo

The application is deployed and ready to use. All notes are stored persistently in SQLite and the interface is fully responsive for both desktop and mobile use.

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.