kipclip-appview
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.
index.ts
https://nbbaier--019a1c40a7c977ffb4341be900573830.web.val.run
Find it, Kip it. Save and organize bookmarks using the AT Protocol community bookmark lexicon.
- 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
- 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)
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
- Deno installed
- Val Town account
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.
# Type check deno task check # Run quality checks (format, lint, type check, test) deno task quality # Deploy to Val.town deno task deploy
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.
- User enters their AT Protocol handle
- App redirects to
/login?handle=user.bsky.social - OAuth package handles authentication with user's PDS
- Session stored in Val.town SQLite (30 days)
- User can now view/add bookmarks
GET /api/bookmarks- List user's bookmarks from PDSPOST /api/bookmarks- Add new bookmark with URL enrichmentDELETE /api/bookmarks/:rkey- Delete a bookmark/api/auth/session- Check current session/api/auth/logout- Logout/login- OAuth login flow/oauth/callback- OAuth callback
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.
- 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
MIT