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

nbbaier

kipclip-appview

Remix of tijs/kipclip-appview
Public
Like
kipclip-appview
Home
Code
12
.claude
1
backend
4
frontend
5
lexicons
1
resources
1
shared
1
.env.example
.gitignore
.vtignore
CLAUDE.md
README.md
deno.json
Branches
1
Pull requests
Remixes
History
Environment variables
2
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://nbbaier--019a1c40a7c977ffb4341be900573830.web.val.run
README.md

kipclip

Ko-fi

Find it, Kip it. Save and organize bookmarks using the AT Protocol community bookmark lexicon.

Features

  • AT Protocol OAuth authentication
  • Save bookmarks to your personal data server (PDS)
  • Automatic URL enrichment (title extraction)
  • View and manage your bookmarks
  • Uses community.lexicon.bookmarks.bookmark schema

Architecture

  • Frontend: React + TypeScript + Tailwind CSS
  • Backend: Hono + AT Protocol OAuth
  • Database: Val.town SQLite for OAuth session storage
  • Bookmark Storage: User's PDS (not in appview database)

Project Structure

kipclip-appview/
├── backend/
│   ├── database/          # Drizzle schema & migrations
│   ├── routes/            # API & static routes
│   ├── services/          # URL enrichment
│   └── index.ts           # Main Hono app
├── frontend/
│   ├── components/        # React components
│   ├── index.html         # Bootstrap
│   ├── index.tsx          # React entry
│   └── style.css          # Custom styles
└── shared/
    └── types.ts           # Shared TypeScript types

Setup

Prerequisites

  • Deno installed
  • Val Town account

Environment Variables

Create these in your Val.town environment:

BASE_URL=https://your-val.val.town COOKIE_SECRET=your-random-secret-string-at-least-32-chars

Val.town provides SQLite automatically. The COOKIE_SECRET is required for encrypting OAuth session cookies.

Local Development

# Type check deno task check # Run quality checks (format, lint, type check, test) deno task quality # Deploy to Val.town deno task deploy

Mascot

The kipclip mascot is a friendly chicken carrying a bookmark bag. Replace the placeholder image URL in frontend/components/Login.tsx with your Cloudinary-hosted mascot image.

OAuth Flow

  1. User enters their AT Protocol handle
  2. App redirects to /login?handle=user.bsky.social
  3. OAuth package handles authentication with user's PDS
  4. Session stored in Val.town SQLite (30 days)
  5. User can now view/add bookmarks

API Endpoints

  • GET /api/bookmarks - List user's bookmarks from PDS
  • POST /api/bookmarks - Add new bookmark with URL enrichment
  • DELETE /api/bookmarks/:rkey - Delete a bookmark
  • /api/auth/session - Check current session
  • /api/auth/logout - Logout
  • /login - OAuth login flow
  • /oauth/callback - OAuth callback

Bookmark Schema

Bookmarks are stored using the community lexicon:

{ subject: string; // URL being bookmarked createdAt: string; // ISO 8601 datetime tags?: string[]; // Optional tags }

The app enriches bookmarks with page titles by fetching and parsing HTML metadata.

Development Guidelines

  • Keep code files under 500 lines
  • Write testable code with dependency injection
  • Test files go next to code: service.ts → service.test.ts
  • Follow SOLID principles
  • Use TypeScript for all code

License

MIT

HTTP
  • index.ts
    nbbaier--019a1c40a7c977ffb4341be900573830.web.val.run
Code
.claudebackendfrontendlexiconsresourcesshared.env.example.gitignore.vtignoreCLAUDE.mdREADME.mddeno.json
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.