Gardenon
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.
Viewing readonly version of main branch: v153View latest version
A Val Town application for mapping your garden and tracking information about each plant.
- 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
The application provides the following RESTful API endpoints:
Returns a list of all plants in the garden.
Returns details for a specific plant by ID.
Creates a new plant. Required fields:
x_coordinate
: X position on the mapy_coordinate
: Y position on the mapdiameter
: Size of the plant in pixels
Optional fields:
name
: Name of the plantnotes
: Additional information about the plant
Updates an existing plant. All fields are optional.
Removes a plant from the garden.
The application uses SQLite with the following schema:
CREATE TABLE garden_plants ( id INTEGER PRIMARY KEY AUTOINCREMENT, 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 )
- Tap anywhere on the map to immediately see a placeholder plant at that location and open the edit form
- Fill in the plant details form and tap "Save Plant" to convert the placeholder into a real plant
- Tap "Clear Form" to remove the placeholder plant and reset the form
- Tap on existing plants to edit their details
- Use the plant list on the right to quickly find and select plants
- Access the admin panel by clicking "Admin Panel" in the header to view database contents
- 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
- Hono.js for the API backend
- SQLite for data storage
- Vanilla JavaScript for the frontend
- Twind for styling