You are browsing as a guest. Sign up (or log in) to start making projects!

Arona Chat

By @yearcakes

  • 2 Devlogs
  • 1 Total hours

Arona Chat is a refined AI chat interface inspired by the Blue Archive "Shittim Chest" UI. Built as a high-performance monorepo, it leverages the Cloudflare serverless ecosystem to deliver a cost-efficient architecture utilizing Workers, D1, R2, and Durable Objects.
Ship #1 Pending review

@yearcakes on Arona Chat

What did you make?

I built Arona Chat, a full-stack AI chat application powered by Cloudflare Workers, D1, R2, Durable Objects, and OpenRouter. It supports chat sessions, file attachments, usage tracking, budget management, authentication, and model selection, all wrapped in a Blue Archive-inspired interface.

What was challenging?

The most challenging part was designing the backend architecture around long-running AI responses and usage tracking.

One lesson I learned the hard way is that inefficient SQLite access patterns can dramatically increase database costs. As the project grew, I had to rethink how usage statistics were stored and aggregated instead of recalculating everything repeatedly.

Another challenge was handling very long SSE streams. For AI responses that may take a long time to complete, it is important that processing continues even if the client disconnects. This was my first time introducing Durable Objects into a production project, and they turned out to be a great fit for maintaining state and ensuring reliable streaming behavior.

What are you proud of?

I’m proud that this project pushed me beyond simple CRUD applications and into distributed system design. Integrating Durable Objects, building usage aggregation, and optimizing streaming performance taught me a lot about how real-world AI applications are built.

I’m also genuinely impressed by Cloudflare R2. It was extremely easy to integrate, works reliably, and offers a very generous free tier, making it an excellent choice for student developers and hobby projects.

How can people test it?

1. Fork this repository.
2. Update the wrangler.toml configuration for your own Cloudflare resources (do not commit any secrets).
3. Deploy the frontend (frontend) to Cloudflare Pages and the backend (backend) to Cloudflare Workers.
4. Configure the required Secrets in Cloudflare after deployment.
5. Open the deployed site and log in using the password you configured.
6. Create your first Passkey (highly recommended for a better login experience).
7. Start chatting, upload files, try different models, and explore usage statistics and budget management features.

  • 2 devlogs
  • 1h
Try project → See source code →
Open comments for this post

@yearcakes on Arona Chat

31m 54s logged

Release 1.1.0

This update focuses on enhancing usage tracking capabilities, introducing flexible service tiers and budget management, and delivering deep performance optimizations for the chat experience.

🌟 New Features

Usage Aggregation: Added persistent tracking of total requests, prompt/completion tokens, and total cost (USD) within user profiles, including a detailed breakdown by model.
Service Tiers: Introduced OpenRouter Service Tier support to balance cost and performance:
Flex (0.5x cost): More affordable, but potentially slower or less reliable.
Default (1.0x cost): Standard service level.
Priority (2.5x cost): Fastest response times and highest priority.
Temporary Daily Budget: Added the ability to set a temporary budget override for the current UTC day, allowing short-term flexibility without altering long-term settings.
Usage Sync Tool: A new “Recalculate Usage Statistics” feature in the settings allows users to force a backend scan of all records to synchronize aggregated totals.
⚡ Performance Improvements

Streaming Render Optimization: Implemented a buffering mechanism using requestAnimationFrame in useStore, shifting high-frequency streaming updates from “immediate trigger” to “frame-synced updates,” significantly reducing re-renders and improving UI smoothness.
Refined Auto-Scroll: Overhauled auto-scroll logic in ChatSession to distinguish between session switches, message count changes, and active streaming, ensuring smoother scrolling behavior.
🎨 UI/UX Enhancements

Session Management:
Pagination: Session list now uses lazy loading (“Load More”) instead of loading all sessions at once, improving startup speed.
Quick Actions: Added Pin and Archive capabilities in session menu for better organization.
Settings Panel Upgrade:
Advanced Tab: Introduced a new “Advanced” tab for system maintenance tools and technical information.
Budget UI: Improved budget settings interface with detailed cost multiplier explanations and a dedicated temporary budget input.
System Info: Added visibility for Instance ID and Schema Version.
🛠️ Technical Changes

Backend Architecture: Modularized routing and migrated chat sessions to a Durable Object-based implementation for better state consistency.
Database Migration: Updated user profile schema to support usage aggregation (Schema v13).
Shared Types: Updated UserProfile and ChatGenerationSettings types to support new tracking and configuration options.

@yearcakes

Release 1.1.0

This update focuses on enhancing usage tracking capabilities, introducing flexible service tiers and budget management, and delivering deep performance optimizations for the chat experience.

🌟 New Features

Usage Aggregation: Added persistent tracking of total requests, prompt/completion tokens, and total cost (USD) within user profiles, including a detailed breakdown by model.
Service Tiers: Introduced OpenRouter Service Tier support to balance cost and performance:
Flex (0.5x cost): More affordable, but potentially slower or less reliable.
Default (1.0x cost): Standard service level.
Priority (2.5x cost): Fastest response times and highest priority.
Temporary Daily Budget: Added the ability to set a temporary budget override for the current UTC day, allowing short-term flexibility without altering long-term settings.
Usage Sync Tool: A new “Recalculate Usage Statistics” feature in the settings allows users to force a backend scan of all records to synchronize aggregated totals.
⚡ Performance Improvements

Streaming Render Optimization: Implemented a buffering mechanism using requestAnimationFrame in useStore, shifting high-frequency streaming updates from “immediate trigger” to “frame-synced updates,” significantly reducing re-renders and improving UI smoothness.
Refined Auto-Scroll: Overhauled auto-scroll logic in ChatSession to distinguish between session switches, message count changes, and active streaming, ensuring smoother scrolling behavior.
🎨 UI/UX Enhancements

Session Management:
Pagination: Session list now uses lazy loading (“Load More”) instead of loading all sessions at once, improving startup speed.
Quick Actions: Added Pin and Archive capabilities in session menu for better organization.
Settings Panel Upgrade:
Advanced Tab: Introduced a new “Advanced” tab for system maintenance tools and technical information.
Budget UI: Improved budget settings interface with detailed cost multiplier explanations and a dedicated temporary budget input.
System Info: Added visibility for Instance ID and Schema Version.
🛠️ Technical Changes

Backend Architecture: Modularized routing and migrated chat sessions to a Durable Object-based implementation for better state consistency.
Database Migration: Updated user profile schema to support usage aggregation (Schema v13).
Shared Types: Updated UserProfile and ChatGenerationSettings types to support new tracking and configuration options.

Replying to @yearcakes
0
7

Followers

Loading…