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

Llad

Gardenon

Garden mapping or planning
Public
Like
1
Gardenon
Home
Code
3
frontend
2
README.md
H
index.ts
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
/
Code
/
Search
index.ts
https://Llad--c7ac188034ef11f0863c9e149126039e.web.val.run
README.md

Garden Mapper

A Val Town application for mapping multiple gardens and tracking information about each plant.

Features

  • Multiple Garden Support - Create and manage multiple gardens with different names and sizes
  • Garden Selector - Easily switch between different gardens using the dropdown selector
  • Garden Settings - Rename gardens and customize their size individually
  • Interactive garden map interface
  • Add plants with specific coordinates and diameters
  • Store notes and information about each plant
  • Edit and delete existing plants
  • Visual representation of plants on the map
  • Mobile-friendly with touch support
  • Admin panel for database management and inspection of both plants and gardens tables

API Endpoints

The application provides the following RESTful API endpoints:

Gardens

GET /api/gardens

Returns a list of all gardens.

GET /api/gardens/:id

Returns details for a specific garden by ID.

POST /api/gardens

Creates a new garden. Required fields:

  • name: Name of the garden

Optional fields:

  • garden_width: Width of the garden map in pixels (300-2000, default: 800)
  • garden_height: Height of the garden map in pixels (300-2000, default: 500)

PUT /api/gardens/:id

Updates garden settings. All fields are optional:

  • name: Name of the garden
  • garden_width: Width of the garden map in pixels (300-2000)
  • garden_height: Height of the garden map in pixels (300-2000)

DELETE /api/gardens/:id

Removes a garden and all its plants. Cannot delete the last remaining garden.

Plants

GET /api/gardens/:gardenId/plants

Returns a list of all plants in a specific garden.

GET /api/plants

Returns a list of all plants across all gardens (for admin purposes).

GET /api/plants/:id

Returns details for a specific plant by ID.

POST /api/plants

Creates a new plant. Required fields:

  • garden_id: ID of the garden this plant belongs to
  • x_coordinate: X position on the map
  • y_coordinate: Y position on the map
  • diameter: Size of the plant in pixels

Optional fields:

  • name: Name of the plant
  • notes: Additional information about the plant

PUT /api/plants/:id

Updates an existing plant. All fields are optional.

DELETE /api/plants/:id

Removes a plant from the garden.

Database Schema

The application uses SQLite with the following schemas:

Gardens Table

CREATE TABLE gardens_v2 ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, garden_width INTEGER NOT NULL DEFAULT 800, garden_height INTEGER NOT NULL DEFAULT 500, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP )

Plants Table

CREATE TABLE garden_plants_v3 ( id INTEGER PRIMARY KEY AUTOINCREMENT, garden_id INTEGER NOT NULL, x_coordinate REAL NOT NULL, y_coordinate REAL NOT NULL, diameter REAL NOT NULL, name TEXT, notes TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP )

Usage

Garden Management

  1. Select a Garden: Use the dropdown selector next to "Garden Map" to switch between your gardens
  2. Create New Garden: Click the "+ New" button to create a new garden with a custom name and size
  3. Garden Settings: Click "Garden Settings" to rename your current garden or change its dimensions
  4. Delete Garden: Use the "Delete Garden" button in the settings modal (you cannot delete your last garden)

Plant Management

  1. Add Plants: Tap anywhere on the current garden map to immediately see a placeholder plant and open the edit form
  2. Edit Plants: Fill in the plant details form and tap "Save Plant" to convert the placeholder into a real plant
  3. Clear Form: Tap "Clear Form" to remove the placeholder plant and reset the form
  4. Select Plants: Tap on existing plants to edit their details
  5. Move Plants: Select a plant and click "Move", then click where you want to move it
  6. Plant List: Use the plant list on the right to quickly find and select plants in the current garden

Garden Settings

  • Custom Sizes: Set any garden size between 300×300 and 2000×2000 pixels
  • Preset Options: Choose from Small (600×400), Medium (800×500), or Large (1000×600) sizes
  • Garden Names: Give each garden a descriptive name like "Front Yard", "Vegetable Garden", etc.
  • Persistent Settings: Your garden settings are saved in the database and restored when you return to the app

Admin Panel

Access the admin panel by clicking "Admin Panel" in the header to view both database tables (plants and gardens) with their schemas and records.

Placeholder Plant Features

  • Immediate Visual Feedback: When you click the map, a gray dashed placeholder plant appears instantly
  • Real-time Size Updates: Adjust the diameter in the form to see the placeholder plant resize in real-time
  • Smart Cleanup: Placeholder plants are automatically removed when you save, clear the form, or select an existing plant

Technologies Used

  • Hono.js for the API backend
  • SQLite for data storage
  • Vanilla JavaScript for the frontend
  • Twind for styling
HTTP
  • index.ts
    Llad--c7ac188034ef11f0863c9e149126039e.web.val.run
Code
frontendREADME.md
H
index.ts
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.