Public
LikereactHonoExample
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://keheliya--019c013d9f5876e6b0d5206793fd17f2.web.val.run
This is a minimalist RSS reader designed specifically for Kindle browsers and E-ink devices. It is built as a full-stack application on Val Town using Hono, React, and SQLite.
- Kindle-Optimized UI: High-contrast, monochrome design with large touch targets and readable typography suitable for E-ink screens.
- Fixed Navigation: "Page Up" and "Page Down" buttons fixed at the bottom of the screen to facilitate easy navigation on devices without smooth scrolling.
- RSS/Atom Support: Fetches and parses standard RSS and Atom feeds.
- Multiple Feeds & Unread Counts: Manage a list of your favorite feeds and see unread article counts for each.
- Read Status Tracking: Articles are marked as read automatically when you scroll to the bottom, or manually via a toggle button.
- Persistence:
- Subscriptions: Stored in Val Town's hosted SQLite database.
- Read Status & Cache: Stored in the browser's
localStorageto persist across sessions on the Kindle.
- Add Feeds: Easily add new feeds by URL directly from the interface.
The application is structured as a full-stack project:
- Backend (
backend/): A Hono server running on Val Town (Deno).- API: Exposes REST endpoints to fetch feeds (
/api/feed), list feeds (/api/feeds), and add new feeds. - Database: Uses Val Town's SQLite to persist the list of subscribed feeds.
- Proxying: Acts as a proxy to fetch and parse external RSS feeds, solving CORS issues and simplifying the data for the frontend.
- API: Exposes REST endpoints to fetch feeds (
- Frontend (
frontend/): A React application running in the browser.- No Build Step: Uses
esm.shto import React and other dependencies directly in the browser, targeting ES2019 for compatibility with older Kindle browsers (Chrome 80). - Styling: Uses a lightweight, semantic CSS file (
style.css) instead of heavy frameworks, ensuring fast loading and rendering on low-power devices. - Local Storage: Manages article read/unread status and feed item caching locally to provide unread counts and a seamless reading experience.
- No Build Step: Uses
- Shared (
shared/): Types and interfaces shared between the frontend and backend to ensure type safety.
├── backend/
│ ├── database/
│ │ ├── migrations.ts # Database schema creation
│ │ ├── queries.ts # Database access functions
│ │ └── README.md
│ └── README.md
├── frontend/
│ ├── components/
│ │ └── App.tsx # Main React application logic
│ ├── favicon.svg
│ ├── index.html # Main HTML entry point
│ ├── index.tsx # React hydration and entry
│ ├── README.md
│ └── style.css # Custom CSS for Kindle optimization
├── shared/
│ ├── README.md
│ └── utils.ts # Shared Types (Feed, FeedInfo, FeedItem)
├── index.ts # Main Hono server entry point
├── README.md # This file
└── deno.json # Deno configuration
- Open the Val's URL in your Kindle's "Experimental Browser".
- Select a feed from the list to view articles. Unread counts appear after the first visit to a feed.
- Read articles by clicking on them. They will be marked as read when you scroll to the bottom.
- Use the "Page Up" and "Page Down" buttons at the bottom of the screen for navigation.
- Click "Add New Feed" to subscribe to a new RSS or Atom URL.