iTranslated by AI
I Built a Mostly Free English Learning Site Using DeepL
What I built
Background
At the beginning of this year, I found an article like this on Qiita.
As for the basic functions,
"Write an opinion in Japanese for a given question -> Try writing it in English -> Compare it with DeepL's response to the Japanese opinion -> Memorize DeepL's response -> Try writing DeepL's response yourself"
It's a system designed to bridge the gap between your ability to express what you want to say in English on your own and DeepL's reasonably correct English by comparing them.
When learning English composition or conversation, people often memorize English sentences using commercial textbooks. The goal is to increase the stock of basic English phrases and expressions. However, with this method, don't you often find yourself unable to use the phrases you're supposed to have memorized when you actually try to use them? The reason is that the memorization isn't based on sentences generated from your own thoughts. In general, everyone has their own habits or quirks in the phrases and expressions they use frequently in daily life. I believe it's more practical and efficient to memorize the English versions of those everyday expressions.
I felt that the process of "writing an opinion in Japanese -> trying to write it in English -> comparing it with DeepL's response to the Japanese opinion" is suitable for building a stock of English sentences that match your own thinking.
By the way, the service mentioned in the article above was free at the time, but because it went a bit viral, it has become a service where paid use is mostly recommended. There are DeepL usage fees and server costs, and once you have a certain number of users, it's impossible to operate for free. It's inevitable, and not a bad thing at all, but I thought I could probably set up the basic functions mentioned above for free to some extent on my own. So, I created an English learning environment using DeepL while customizing it for my own use.
Features
As for the basic functions, I included the following from the original site:
- Write an opinion in Japanese for a given question -> Try writing it in English -> Compare it with DeepL's response to the Japanese opinion
- A system for tracking consistency, such as consecutive days
I removed the following features:
- Time limit for answers
- I want to go at my own pace
- The part where you memorize and write DeepL's sentences
- I felt it wouldn't be very effective to memorize them on the spot. It's better to be able to look back at them many times later.
In addition, I added the following new features (*features that weren't available when the original site was released):
- Questions categorized by level
- Because motivation drops if questions are too difficult
- A vocabulary book-like feature where you can stock good expressions you want to remember on the comparison page
- You can take notes on expressions you use frequently
- History of solved problems
- DeepL's answers can sometimes be nonsensical, so I wanted to be able to select and save solved problems to review later
- Voice recognition input and a feature to read out DeepL's answers
- Sometimes words come up that I don't know how to pronounce, so the readout can supplement the feel
- I'm such a beginner that I might not use it much, but being able to input by voice seems like it would be good practice for conversation
I created the aforementioned site for my own use by brushing up these features.
Architecture
Next, I will describe how I built the site with the features mentioned above.
Before that, here is the approximate scale I am assuming. Since the original site went viral and reached about 1,000 UU, I estimated this would be about 1/10 of that, so at most this much. Besides, in English learning, if 100 people start, probably only about 5 will continue, so I figured even if it goes a bit viral, it would be around this scale at most.
- Authentication: Max 10,000 users
- UU: Around 100
- Estimated translation of about 160 characters per person per day
At this scale, the service can be operated completely for free for at least one year.
Supabase
I am using Supabase for the backend this time.
Supabase is a service that started as a Firebase alternative with PostgreSQL as its foundation. It has familiar features like a database that can be handled from the frontend like Firestore, and Authentication. Since the code is published as OSS, you can dig deeper by reading the code when you are in trouble.
Supabase is built by fully utilizing the features of PostgreSQL, and it lacks the unique difficulties of NoSQL that I experienced with Firestore. For example, in Firestore, you need to set up Security Policies using a unique syntax, but an equivalent feature is implemented using PostgreSQL's standard RLS (Row Level Security). Also, although it is still in the alpha stage, things like triggering processes in other tables based on table inserts are also prepared using PostgreSQL features, which is quite convenient.
I mainly use the Database and Authentication features. Looking at the Pricing, the current free tier allows up to 500MB for the Database and up to 10,000 users for Authentication. This should be plenty for me + alpha (around 100 UU). Even if there is a sudden surge in users, the Pro plan is $25/month per project and expands the capacity to 8GB, which should be sufficient for a text-based service.
With Firestore, you are billed for reads/writes, so it is nice not to have to worry about unique query optimization tips or sudden traffic spikes.
That said, some features are still in alpha/beta, so there are times when it doesn't quite reach every itch. Since the code is open on supabase - GitHub, I occasionally refer to it. In fact, I had some trouble with Authentication and ended up tracing the GoTrue code quite a bit.
There are also some hurdles when setting up the local environment. I wrote about setting up the local environment for development with Supabase in the article below, so please refer to it if you run into problems.
Vercel
The frontend is built with Next.js and deployed to Vercel. Deploying Next.js to Vercel is so easy that I think it requires no explanation, and I'm not doing anything special like delivering heavy images or performing time-consuming tasks with APIs. So, unless something extraordinary happens, it should probably stay free. There's almost nothing more to write.
Pixela
I adopted Pixela for managing persistence data such as consecutive days. I considered keeping log data myself, but that might quickly hit the Supabase DB capacity limit. I wanted to avoid that as much as possible, so I decided to use Pixela. Pixela is a service that provides an API to easily manage persistence by "growing grass" (contribution graphs), similar to what you see on GitHub.
The process with Pixela involves creating a user via API, creating a GraphId for that user, and then "growing grass" using that user and GraphId triggered by user actions.
For the functionality I want to achieve this time, the free tier is more than enough. Since I could offload all log data and graph creation to Pixela, both the backend and frontend became quite lightweight. I'm grateful. If the number of users increases, I plan to become a supporter via Patreon, as it wouldn't feel right to keep using it for free.
Domain
I haven't gotten a custom domain because it's mainly for personal use, and I'd only get one if I were motivated to turn it into a business. For this service, it's https://deep-eisakubun.vercel.app, but it doesn't have a random string, and if you don't mind it, I don't think it's such a bad domain. Consequently, there are no domain management costs.
DeepL
DeepL is a well-known, high-precision translation service. DeepL provides this translation functionality via an API. Surprisingly, you can use up to 500,000 characters per month for free.
You might think 500,000 characters per month is almost unlimited, but as I wrote in the initial assumptions, calculating 160 characters * 30 days for 100 users results in 480,000 characters. If the number of users increases even slightly or an English expert continues to write thousands of characters, the quota will be exhausted in an instant (though someone at that level probably wouldn't need this service...).
Therefore, DeepL is the biggest hurdle in building this free-tier service. I believe this is a major reason why the original site quickly introduced a paid plan.
While there aren't many countermeasures for the 500,000-character limit, I added one feature: the ability for users to register their own authentication keys required for the DeepL API.
The reason the limit is hit quickly is that I am performing translations for others using my own authentication key. If individuals provide their own, the problem disappears. I've prepared a registration form like the one below. Of course, the keys are not stored in plain text; they are encrypted with a salt and decrypted only on the backend for use.
You can still use the service without registering an authentication key, but I display the remaining translatable characters in the top right of the header. If things start looking tight, you can at least continue using the service by registering your own authentication key.
However, since only I would lose access to the service in that case, I might have to pay 650 yen/month to increase the translatable characters. I can only pray that the number of free riders doesn't increase too much...
Summary
- I built a customized English learning site for myself to train Japanese-to-English skills using DeepL.
- I've tried to make it possible to operate for free as much as possible by utilizing Supabase, Vercel, Pixela, and others.
- Since DeepL's free tier has stricter limits than expected, I also prepared features for conscientious free riders.
Finally, I'll include a link to the original service, Engister. I'm not an acquaintance or anything, but they seem to be working hard on development every day, so if you're okay with paying, it might be better to use that one.
https://english.yunomy.com/
Discussion