What I learned building an AI language learning app
Part 4/4: Tools
Here we are, the final post in the series!
In this post, I'll share the tools we used to build Yaya v1.0 along with some thoughts for each. I'll start with the key tools, which may be all you're interested in if you're a software engineer or a business person. But since I started as a beginner on this project, I'll also mention a bunch of basic tools that more experienced coders might take for granted. And finally I'll close things out with a few final thoughts.
The mythical objects on our quest (image credit: DALL-E)
Note: There's a new version of Yaya too. Check it out! And once again if you're new, start at part 1.
OpenAI API
We used the OpenAI API (GPT-3.5) to generate the reading content as well as the definitions/grammar explanations. We did a lot of prompt engineering to get consistently good output. We were curious about tools for testing prompts to improve stability and consistency but had other priorities at the time. The quality was generally solid in popular languages (English, Spanish, etc.) but trailed off in less common languages, putting out weird grammar patterns or even gibberish. We were eagerly awaiting access to the GPT-4 API.
Google Translate API
We used the Google Translate API to translate the generated content into other languages. It wasn't perfect, but it was good enough for language learning purposes. We were planning to pass in more context to improve the translation quality but also had other priorities. As I mentioned above, we also used Google Translate as a workaround for languages where ChatGPT was weak.
Next.js
Next.js is a great framework for building React web apps that comes with a lot of built-in features that make development much easier. It's also great for SEO and performance (see SSR/SSG, etc.). It was created by Vercel, so works best when you deploy there (more below).
Vercel
We used Vercel to host the app. It's a great platform for hosting Next.js apps (and other serverless apps). It's easy to use, has great performance (see their Edge Network, etc.), and is free for small projects. Deploying is as easy as pushing to Github and the basic analytics are solid too.
Firebase
We used Firebase for the back end, e.g. user authentication, serverless functions, and data storage in a NoSQL DB (among other things). It's a good complement for serverless apps. It was a bit of a learning curve for me, but it's pretty easy to work with the data in Javascript, the web GUI is convenient when needed, and it's popular so there's a ton of learning content out there. David also had a lot of experience with it (and training junior developers on it) from other projects.
For an open source alternative, I've heard good things about Supabase.
(skip to the end if you're already familiar with the basics)
Javascript
It's pretty basic, but we wrote the app in Javascript. If you're a total beginner and want to work on web apps, learn Javascript.
TypeScript
We used TypeScript to write the app. It's a superset of Javascript that adds static types. It's a good way to catch bugs early and make your code more readable and maintainable. It's also the most popular way to write Javascript these days.
React
We used React to build the front end. It's the most popular front end framework for a reason.
The nerd in me wanted to try Svelte or another hot framework, but you better have a good reason if you're not gonna stick with the "industry standard," especially if you're working on a team. React hasn't yet become an old dinosaur to consider only cautiously.
MUI
We used MUI for the UI components (buttons, drop downs, menus, etc.). Pick a customizable and widely-used component library and save yourself a lot of time.
TailwindCSS
We used TailwindCSS for the CSS styles (colors, sizes, layout, etc.). It's a great way to get a good-looking and consistent app without needing to be a designer. Utility classes are just one way to do things, but I found it pretty easy and intuitive. It's worth spending time customizing themes and colors to make your life easier. Occasionally Tailwind didn't play nice with MUI (and vice versa) but it was mostly smooth sailing.
Google Domains
This is where we bought our domains. Google doesn't offer this service anymore, but there are tons of alternatives (here's one). It's a commodity, so don't overthink it.
Google Analytics
Google analytics is probably the most popular web analytics tool (although I've used privacy-focused alternatives like Plausible in the past as well). We used it to track traffic to the site/app and user activity. When you're using Firebase, it's good to stick in the Google ecosystem.
If we were a little further along and had the budget, tools like Amplitude and FullStory would have been great for understanding user behavior and getting feedback. We did a lot of user testing and feedback collection manually.
Github
We used Github for version control and as a code repository. I learned the basics of git, some best practices, how to do pull requests, and some collaboration etiquette from David. Github is ubiquitous and great. It also has a really nice integration with Vercel. Seriously nice.
VSCode
VSCode is the code editor that most professional engineers use. It's solid and extensible. We used it too.
Mac
If you're using Windows now and don't have a good professional reason for that (e.g. working in finance), switch. Mac has a great ecosystem for developers, and coding on a unix-based OS is a better experience. If cost is a factor, buy used.
As for me, switching to a Mac laptop after years of running Linux on the desktop was a little bit of an adjustment (ergonomically and ideologically :P), but I got a lot faster at building (not just the coding, but the collaboration and other work too) when I did. There's a reason why so many developers use Macs. (more on my stubbornness and eventual transition)
Quick plug for Rectangle a nice little window manager for macOS. Definitely improved my quality of life.
iTerm
iTerm is a great terminal emulator for macOS. The default app works fine, but iTerm just makes everything a bit more comfortable. I got a bit carried away with mostly unnecessary but fun customizations (like ZSH and powerlevel10k). It took me back to the days of playing with my linux config and Compiz Fusion in high school.
Figma
We didn't use it much, but for a handful of complicated page mockups and brainstorming, Figma was pretty essential. It's a great product design tool that scales up and down.
Google Docs
Perhaps surprisingly, I mostly used Google Docs to keep track of work, burning through new docs almost as fast as stickie notes. David used Roam and other tools. I'm a big fan of Asana (and project management software generally - very curious about Linear) in a professional setting, but with just two people in pretty constant communication, we opted to keep it simple. Use the right tool for the job and all.
Tuple
We used Tuple for pair programming. It's seriously great.
And we used WhatsApp to chat on and off asynchronously. While it is a great tool, you definitely don't need Slack for two people.
AI Assistants
And finally, I also used ChatGPT as a "coding tutor." If you haven't already, try asking ChatGPT questions and pasting in code snippets to get help with tricky problems and debugging. It's not perfect, but often it saves a lot of time vs. Google searching for blogs or digging through docs or StackOverflow. Copilot is also great for getting tips without breaking flow. Of course, these are both gonna get it wrong a lot of the time, and you'll still run into lots of bugs when coding... but debugging is half the fun, right?
And if you're new (or experienced and building smaller projects), I can't say enough good stuff about Replit's AI features.
If you'd like to go back and revisit anything, here's a list of the whole series.
- Part 1: An introduction to Yaya v1.0, plus some reflections
- Part 2: A deeper dive on the lessons learned while building Yaya
- Part 3: The backstory: how I got to Yaya, what I did, and our early iterations
- Part 4 (this post): The tools we used to build Yaya and some final thoughts
Thanks for reading! I had a great time writing these blogposts. The writing process really helped me to reflect on the time I spent building Yaya with David and to get clear on what I want to do next. I sincerely hope you found something helpful in here.
Foreign language learning is a big passion of mine. I've studied Spanish (español), Japanese (日本語), and Korean (한국어). I also love software. Using it, writing it, and growing it. It was a treat to work on a project that combined these interests. I learned so so much.
As I mentioned in the first post, I'm currently looking for my next gig. I'm especially intested in AI, edtech, or dev tools startups. If you need a smart, hard-working business generalist with a technical background, consider hiring me.
Whatever you're working on, whatever you're learning, I wish you the best. Have fun out there!