Fragezeichinator.de
I'm currently developing a fan companion web application for the german audio drama series "Die Drei Fragezeichen ???" (The Three Investigators) available at Fragezeichinator.de.
'Die Drei Fragezeichen ???' (literally translates to 'The Three Questionmarks') is a famous audio play here in Germany. Me and many of my fellow country men and women grew up listening to three youngish detectives solving mysteries in the fictional town of 'Rocky Beach' in California. A rather nice aspect of german pop culture I must say!
Since the series launched in 1979, over 250 episodes have been released (and counting!). Although the series is targeted at children and teenagers, many adults like to listen to it; often like a podcast to fall asleep to.
Picking the right episode every night turned out to be a struggle which inspired me to create this tool.
Fragezeichinator.de allows users to create accounts, rate, favorite and discover (random) episodes. What sets my project apart from other fan sites is the ability to create an account, rate episodes and filter on multiple criteria; for example minimum average rating, release year or whether the user has marked an episode as already listened to.
Features
Episode Database
Fragezeichinator has an up to date episode database with all released episodes with release date, description, episode cover and Streaming URLs for Spotify, Apple Music, YouTube Music & Amazon Music.
Account Creation
Users can create an account either with email and password or login with Google. However the page can also be used without creating an account. Features like favoriting, rating or marking episodes as listened to are only available to users with an account.
Random Episode Generator
Users can press a button to get a random episode from the database. Customizable filters allow filtering by average rating and release year, in case you want to filter out newer/older episodes or just the ones with a low rating.
Episode Filter
Users can filter episodes in the random episode generator using various criteria, such as setting minimum and maximum thresholds for their own or average ratings, release year or filter out (or in) episodes they already listened to.
Screenshots
Tech
Datascraping - Getting the episode data
At first the episode data was scraped with a python script from the offical Drei Fragezeichen product page at dreifragezeichen.de.
Unfortunately that was not the end of the data scraping part since quite a few streaming links on the official page were either missing or broken.
In the beginning Fragezeichinator only supported Spotify which was easy to scrape with the publicly available Spotify API. After users requested Apple, Youtube and Amazon Music links I had to resort to scraping episodes with a Playwright script due to the fact that aforementioned services don't have public APIs.
If you aren't familiar with end to end testing and/or Playwright: I wrote a small program that visits the Apple/Amazon/Youtube music page, types "title of the episode" in the search and then grabs the link from the first result it found on that page.
Literally 24 hours after finishing this rather annoying task I found out about the great project dreimetadaten.de which is a database with up to date episode data including the streaming links I wasted hours of my life scraping together. Anyway, good to know that it exists and that I can use it in the future.
Technologies
The project is mostly built on the T3 Stack, a full-stack development framework that combines several technologies such as React, TypeScript, Next.js, Tailwind, tRPC, Prisma, Postgres and NextAuth. For me that was an easy choice since I already had some experience working with that stack.
React & TypeScript
React because I'm familiar with it and TypeScript because I don't hate myself enough to write plain untyped JavaScript.
Next.js
I have limited experience with other full stack frameworks but for me Next.js always worked great and I haven't had any issues with it. For the app I used the pages router and not any of that modern fancy app router. It's simple and works great for my use case. In the future I might consider the switch to the app router though.
tailwind & DaisyUI
I love tailwind and can't imagine building a website without it. DaisyUI is a rather simple but good looking component library for tailwind. It doesn't have everything you can image but most of the stuff needed for building most websites.
tRPC & zod
A key part of the T3 Stack. tRPC, allows end-to-end typesafe APIs. In combination with zod for defining schemas and validation, it's a great way to build robust APIs. With this combination I never really ran into any issues regarding backend & frontend communication.
PostgreSQL
Robust relational database for storing user data and episode information. In local development I spun it up in a docker container. In production I use the 'neon' database that comes with vercel.
Prisma
Prisma as ORM for the PostgreSQL database. Since the data model is not too complicated in this application I also never ran into any issues.
NextAuth.js
Handles authentication with various providers. For now email/password and Google auth are supported in the app.
Resend
Modern email API for sending transactional emails. I simply had a look at various email API services I could find online and resend offered a great free tier that works perfectly for my use case. With resend I am sending sign up email confirmation and forgot password emails.
Tanstack Query
Tanstack Query is a library for managing server state in React. I used it to fetch episode, user and other data from the database. Tanstack Query is great but it took me a while to figure out optimistic updates. With optimistic updates the user can see the changes immediately without waiting for the server to respond. The code for optimistic updates is overly complex as of now and I plan on refacotring that in the futures.
Hosting
The project is hosted on vercel which was super simple to set up. Since vercel can get quite pricey once you reach a certain amount of use I'm thinking of moving to a VPS and host the Next.js application in a docker container there. When I make changes on either the staging or production branch in git, vercel automatically deploys the changes.
Roadmap
I have a lot of feature ideas but as of now the project is in a good state feature wise. In the near future I'm planning to fix bugs and speed up the episode data fetching because that is super slow at the moment. Aside from that the code definitely needs a little clean up because some things are more messy than they should be.