Korange's Lab / Relaytale Used AI

Before shipping, a quick intro:

Korange's Lab is a collection of small web services I created. One of them, Relaytale, lets everyone write a story together by adding one paragraph at a time in real-time. The first paragraph is randomly chosen from prepared starters.
(e.g., While walking down the street, I found a button with a sign that said, ‘Don’t push! Absolutely do NOT push.’)

Participants then take turns writing the next paragraph until the story reaches a set length. You can join with a Google account or HackClub Slack.

I originally made a similar app called “Collabtale” and always wanted to remake it. When I found the perfect theme for my development sprint — “build a real-time app” — I decided to create Relaytale.

The app currently has minimal features but I planned chat, emoji reactions, private rooms, and more. Due to the sprint deadline, I paused feature development and shipped what I had. The code got a bit messy from rushing, so refactoring or a rebuild is needed.

Technically, it’s a monorepo managed with pnpm, using TypeScript for both frontend and backend.
The frontend uses Nuxt and TailwindCSS, hosted on Netlify.
The backend runs on Hono, which handles authentication (via auth.js) and the core websocket server, hosted on Google Cloud Run.
This was my first time using Hono, and I love it! Sharing types and Hono RPC feel like magic — highly recommend it for TypeScript users.

As a fun add-on, I made an introduction video. It took looooonger than expected, but I finished it, so feel free to check it out if you have time 👇️

Completed!!!!! ᕕ( ᐛ )ᕗ

I repeatedly added various functions and made modifications to both the front-end and back-end, and deployed the front-end on Netlify and the back-end on Google Cloud Run.

On the way... I made it in a hurry and haphazardly, so the code base is literally shit. A lot of bugs appeared.
However, since the deadline for YSWS is approaching, I decided to finish it in this state - it may still be unstable and have unfriendly UI, but the main functionality can continue without any problems :)

All that's left now is to publish it on GitHub and completely satisfy the other YSWS submission conditions and submit it!

However, to be honest, I don't see any hope for the future of the current code base, so I would like to slowly refactor it and improve it someday after submitting it. In fact, there are many things that I compromised on due to time constraints.

(P.S. I was surprised that the total work time for SoM exceeded 40 hours without me noticing - EVERYOHE, PLEASE VOTE!!!!!!!!! I WANT SHELLS!!!!!!!!!!!!!!!!)

I worked a lot today. I'm working on the front-end because I'm starting to get confused about what features are needed for the back-end.

I decided to use Nuxt for the front-end. With the help of ChatGPT and others, I added back-end integration in Nuxt style.

I'm currently working on the main feature of Relaytale, the page where you write the story! This uses Websockets a lot, and is one of the requirements for the Hackmate YSWS where I'll be submitting this app.

However, there are a lot of temporary, half-baked code in the codebase, and I'm starting to wonder if I can submit it by the YSWS deadline (although I would like to do it).

I also need multilingual support. Currently I've made the app in Japanese, my native language, but if I want to show it to people at the Hack Club, I need to add English.

(btw - Hono is great! It's fun to code, and the RPC function is magical)

I haven't posted a Devlog in a while.
Recently development was literally a series of Trial and Error, but it seems to be working out well.

At first, I tried to create the entire application, including the API, using Nuxt. (Authencation is @sidebase/nuxt-auth)
Later on, I felt that @sidebase/nuxt-auth was a little difficult, so I decided to use NextAuth(Auth.js) and Next.
Actually, before I decided to use Nuxt, I tried making it with Next and decided to switch to Nuxt, but I came back. (I took over some of the code base I created with Next and created a new Next project)
I tried to use Drizzle ORM, but I had some errors, so I switched to Prisma - which I am more familiar with.

BUT --- I'm not used to approach from Next.js, that is the Frontend and Backend boundaries become blurred. I was confused, I thought very difficult.
As a result I decided to seperate Backend API and Frontend. I decided to use Hono, which I was interested in, for the Backend
I haven't decided yet what to build the frontend with - maybe Next? Since I've decided to put authentication in the backend, maybe I'll go back to Nuxt.

By the way, the development experience at Hono was very good! It's much more fun to accumulate what you've accomplished than to worry deeply about one thing :)
I also created a Websocket authentication process on the backend. Since it is difficult to send cookies directly via Websocket, I issue a JWT token that is valid for one minute at a normal HTTP endpoint and send it via Websocket. (Thanks to JWT, the server does not need to have temporary token information! When I first learned about JWT, I thought it was just a modern token, but it's so useful.)

(I also tried Beeter Auth when I found sidebase too difficult, but it's been a long journey to get to this point.)

I’ve done various things, such as bringing back a navigation bar that had disappeared and porting components I built in React over to Vue.
Currently, I’m working on connecting a PostgreSQL database using Drizzle ORM.

I’ve been asking ChatGPT for a long time how to make each mini-service in a Nuxt site nicely independent at the codebase level, but the information it provided was full of mistakes and serious misconceptions, so it wasn’t helpful at all — LLMs tend to hallucinate and produce plausible-sounding but wrong answers… or maybe I’m just using it wrong?
Also, I accidentally deleted the Navbar component permanently along the way. Since this was still the very beginning of the project and I hadn’t even set up a Git repository, I’ll have to recreate it from scratch again 😭
In the end, it seems like making the codebase behave exactly how I envisioned would be too difficult, so I decided to abandon perfectionism for now and just build it using the standard Nuxt directory structure. (I wasn’t too happy about how the “services” would end up split between frontend and API routes, but then again there are plenty of examples of backends being implemented as separate projects in other languages, so maybe I don’t really need to worry about it that much… but though there are a few other reasons too.)

I plan to keep building small web services in the future, so I decided to create a website called “Korange’s Lab” to collect all the mini services I’ve made. (There are lots of benefits, like sharing authentication, reusing SaaS features, and encouraging users to explore other services :) ).

With that in mind, I’ve decided to include Relaytale in Korange’s Lab and develop both the core features of Korange’s Lab and Relaytale in parallel. Relaytale will be submitted to Hackmate YSWS!

At this stage, I’m building the authentication system using @sidebase/nuxt-auth. Actually, I’ve had this idea for the site for a while, and since I already have ui-design drafts, I don’t expect to run into many issues :)

Relaytale is a web app where people gather together to take turns writing chaotic stories (it's also a remake of something I made before).

I'm currently working on the first screen, but I might remake it.