Hey there space cowboy!
I’m writing this as a general outline of the process and architecture choices I made while creating Language Bee which is a language learning app specifically targeted at leanring Thai script.
I made this as a side-project and way to start learning marketing for myself.
I won’t include the source code here because it is a live product that has paid users. This is an architecture guide.
As of writing this, I have gotten a few paid users and am working on creating native Android and iOS versions which hopefully might be another post.
Anyway, let’s get into it
Frontend
The frontend I chose is Angular 16 and Typescript. I typically use Angular for all of my projects and I recommend anyone who is creating their own project and apps to simply learn one framework and stick with it.
There are slight differences between different frameworks, but it’s arbitrary when it comes to making apps. You might be forced to use different frameworks later on if you join a new project, but it’s a waste of time to force yourself to learn something that you don’t have to use.
Angular
Some quick notes on Angular.
Angular is an open-source framework developed by Google for building single-page web applications. It is arguably the best framework because it is very opinionated which means you need to maintain a very specific object architecture.
This enforces good habits for young and inexperience developers as well as makes joining an Angular project mid-way as painless as possible. You can’t say the same for React.
Most features are common to all modern frameworks, but here is a simple list:
- Component-Based Architecture
- Two-Way Data Binding
- Built-In Routing
- Reactive Programming with RxJS
- CLI for development
If you like this article, then check out my complete and step-by-step guide to deploying a database in Google Cloud here.
Backend
The backend is a Python Flask API which I chose for sheer simplicity and for how lightweight and versatile Flask is.
Flask
Flask is a lightweight WSGI web application framework [2] that is extremely simple and easy to use out of the box.
Flask supports frontend development and webpages as well, but I strictly use it for backend APIs because modern frontend frameworks are just superior to what Flask offers in this regard.
Regarding backend features and support, Flask offers pretty much anything that you might need including websockets, oauth support, endpoint security, and countless other features that are neatly segmented into packages that you will only add to the project if you need them.
Compare this to something like Django (they aren’t one to one comparisons in functionality, but still) that is quite heavy with default features.
Database
The database is as simple as can possibly be with MySQL hosted in Google Cloud’s Cloud SQL service.
I am planning to start using PostGreSQL by default for any future projects simply because it has more features and functions. Specifically the PARTITION [3] is missing in MySQL which can be annoying on occasion.
Not much to talk about here to be honest and I won’t go into basic database design. There are tables to store users, user_payments (including subscription status), vocab cards, and learning stats.
Deployment and Google Cloud
I deploy most of my projects on Google Cloud but you could AWS instead if you are more comfortable with that.
These PaaS providers (Google Cloud, AWS, Microsoft Azure) are largely competitive when it comes to pricing and offer all the same features when it comes to the basics. Microsoft Azure is probably the worst option here as their PaaS is unintuitive and archaic looking compared to Google Cloud and AWS.
I deploy using a app.yaml file in my project folder and the Google Cloud CLI.
An example is below for my Python Flask backend.
runtime: python39
instance_class: B1
beta_settings:
cloud_sql_instances: rtl-software-llc:us-central1:bobby-smith=tcp:3306
entrypoint: gunicorn -b :8080 -w 2 -k gthread --threads 4 --timeout 1040 main:app
service: app-backend
inbound_services:
- warmup
basic_scaling:
max_instances: 10
idle_timeout: 10m # Adjust as needed
resources:
cpu: 1
memory_gb: 2 # Increase if needed
disk_size_gb: 6 # Increase if needed
env_variables:
CLOUD_SQL_DATABASE_NAME: super_not_fake_database
CLOUD_SQL_CONNECTION_NAME: rtl-software-llc:us-central1:bobby-smith
STORAGE_KEY: 5b8e5t5tet5
handlers:
- url: /.*
script: autoConclusion
Ok!
That is a very, very general outline of my architecture choices for Language Bee.
The key takeaways here are to use the tech stack that you use more so than trying to constantly learn something new or optimize too much.
If your goal is to create useful products and do so in an efficient manner than you need to keep an eye on what your completion metric is and ignore the noise.
Like this article for instance; I could have painstakingly made a whitelabel version of my code that the reader could simply copy and paste. I could have gone more in-depth and included deployment commands etc to get a beginner started.
BUT…. that isn’t the goal of this article.
I have a lot to do this week and the goal of this article is to make a backlink for Language Bee so it will do better in SEO. Mission accomplished.
Thanks!
If you enjoyed this, then check out my guide to copy an entire database in MySQL that covers common pitfalls and breakdown each option with examples.