Street Apps - Getting Started

What is this?

Street Apps lets anyone in the company create and share simple web tools. Create a folder, add some HTML, and your app is live — protected by Google sign-in so only our team can access it.

Your app will be available at: your-app-name.spectre.cool

Prerequisites

GitHub account with access to the street-apps repository
HTML basics — or an AI assistant to help write it

GitHub resources

How to Create an App

Choose a name

Pick a short, descriptive name using lowercase letters, numbers, and hyphens.

Good expense-tracker meeting-rooms sales-dashboard

Bad My App test 2024-tracker

Create your folder and files

In GitHub, navigate to the apps folder and create a new file:

apps/your-app-name/index.html

This creates both the folder and your main file at once.

Add your HTML

Paste in your content. Start with this template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
</head>
<body>
    <h1>Hello!</h1>
    <p>Your content here.</p>
</body>
</html>

Commit and wait

Click "Commit changes" and wait about 2 minutes. Your app will be live at:

https://your-app-name.spectre.cool

What Can I Build?

Anything that runs in a browser:

Calculators Pricing tools, unit converters, ROI calculators

Dashboards Display data from APIs, status pages

Forms Data collection, surveys, submissions

Utilities Text formatters, generators, converters

Documentation Process guides, onboarding, reference

Prototypes Quick mockups and proof of concepts

Useful Libraries (via CDN)

No build step needed — just add a <script> tag:

For interactivity

Alpine.js — lightweight reactivity
Vue.js — progressive framework, CDN-friendly
htmx — AJAX without writing JavaScript

For styling

Tailwind CSS — utility-first CSS via CDN
Pico CSS — minimal CSS, semantic HTML
Water.css — classless CSS, just works

For data

Papa Parse — CSV parsing
Chart.js — simple charts and graphs
Day.js — date manipulation

For storage

localStorage — built into browsers, persists data locally
Firebase — database + auth (requires setup)
Supabase — Postgres database with JS client

Using an AI Assistant

Give your AI this context so it understands the setup:

I'm building a tool for street-apps, an internal platform hosted on Cloudflare Pages. The constraints are:

Static files only (HTML, CSS, JS) — no server-side code
No build step — files deploy as-is, so use CDN links for libraries
No secrets in code — anyone on the team can view source
For persistence, use localStorage or external services (Firebase, Supabase)
External APIs must support CORS from spectre.cool
Keep everything in a single HTML file when possible

Then describe what you want to build. The AI will know to use CDN-hosted libraries, avoid build tools, and keep things static.

Limitations

Static files only. No server-side code (Node.js, Python, PHP, etc.) — everything runs in the browser.

No secrets in code — don't put API keys in your HTML/JS; anyone can view source
No build step — files are deployed as-is (no npm, webpack, etc.)
No databases — use localStorage or external services (Firebase, Supabase)
CORS restrictions — external APIs must allow requests from spectre.cool

Naming Rules

Your app folder name must:

Be 3-30 characters long
Start with a lowercase letter
Contain only lowercase letters, numbers, and hyphens
Not use consecutive hyphens (--)
Not be a reserved name: www, api, admin, mail, test, staging, dev

See an Example

Check out hello-world.spectre.cool for a simple working example with interactive JavaScript.

Need Help?

Check the README in the repository
Ask in Slack