FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
glance
glanceGlancer
Public
Like
Glancer
Home
Code
9
.vscode
1
backend
4
frontend
6
shared
1
.cursorrules
.vtignore
INSTRUCTIONS.md
README.md
deno.json
Branches
3
Pull requests
Remixes
2
History
Environment variables
5
Settings
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
/
INSTRUCTIONS.md
Code
/
INSTRUCTIONS.md
Search
5/29/2025
INSTRUCTIONS.md

This document provides instructions for the development of a README.md at the root of this project.

Instructions

Look over the entire code base of this project. Once you've taken a look at everything, follow these instructions to develop the README.

First, explain that this val.town "val" (or, project) gives people a way to experience Glance's cobrowing technology

The project has features that demonstrate Glance's distinctive cobrowsing technology to implementation teams:

  • a Glance demo experience at a distinct URL that is personalized to each visitor
  • Glance's cobrowsing javascript, which allows a visitor and an agent to cobrowse together through the browser
  • the Glance PDF viewer, which allows agents and visitors to cobrowse a PDF that is dynamically generated
  • contextual documentation to aid implementation teams who work with the visitor
  • a PDF "receipt" of the demo and a durable demo URL, so the visitor has useful take-aways for future reference
  • simple event tracking, so Glance can see which features of the demo get engagement

When describing the features above, include brief but specific code examples, so the viewer has context. For example, show some code that includes the feature, like the Hono route for the /demo/:id, the Glance session javascript in the React /frontend, the examplePDF viewer and headers.

Second, orient the reader to the codebase

Include:

  1. a tree diagram, with a brief explanation of each area of the code base, starting at the highest level with /backend and what it does, /frontend and what it does, and /shared and what it does. Note that this project extends val.town's recommended approach for using Hono and React together, explained at https://www.val.town/x/std/reactHonoStarter
  2. a list of all the framework elements in this project and a short description of each, including but not limited to:
  • val.town and Deno
  • the Notion "client" (or npm library)
  • Hono for routing
  • caching with blob storage
  • crons to update the cache
  • React/JSX for interface templates and tailwind

Third, explain the following technical implementation details

  • React /frontend
  • Hono /backend/routes, including
    • index.ts and what it does, and the routing strategy it establishes, including
      • /api routes for serving JSON and other content to views
      • /view routes for serving the demo at /demo/:id/
      • /task routes for handling Notion webhooks
  • /shared, for /utils used by both the /backend and the /frontend
  • blob storage for the cache, which enables snappy demos
  • cron(s) that keep the cache up-to-date
  • environment variables, which we use to store connection details for Notion, database ids for essential Notion databases (including the demos and interactions databases)
  • logging features

When describing the features above, include brief but specific and relevant code examples, so the viewer has context. For example, show some code related to /route and /controller separation; and show code related to accessing environment variables. While you're reviewing the code base, keep in mind that each directory has a README.md file that should give you more context and may help the reader, in case the code isn't self-explanatory.

Fourth, explain some of the important conventions in this project

For example, these conventions should be made clear:

  • separation of routes and controllers
  • separate of controllers and utils
  • /route areas do different and specific jobs

Some of this may be explained in the tree diagram above, so don't recreate that. But do explain these important conventions so that someone who is new to this project can understand what's expected in order to understand the project, and contribute.

Lastly, explain what is not handled by the code in this project

As an afterthought at the bottom of the README, note that there are features of this app that are not handled by val.town, and are managed by Notion instead. Those features are:

  • email and other alerting (e.g., Slack)
  • databases, including:
    • the "Glancer demos" database
    • the "Glancer interactions" database, which is where certain demo events (e.g., clicks) are warehoused and visualized
    • the "Glancer agents" database, which handles agent assignments and management

Note that this app integrates with Notion to extend Notion in important ways; namely, automation and logging. Please be clear about that.

Closing instructions

Again, only update the README.md file at the root of this project. Don't update any other code. And please do not use emojis in the README.md file.

Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.