Developing a Personalized English Learning Web App

Published:  at 

Table of Contents

Open Table of Contents

Overview

English learners have very different goals, abilities, and available study time. A learner preparing for TOEIC has very different requirements from someone who wants to improve their conversational English, while an EIKEN student may need an entirely different type of practice.

I developed 英語ビット, a personalized English learning web application designed to adapt the learning experience to each user’s goals, English level, interests, and available study time.

The goal of the project is to bring different English learning tools together in a single platform rather than requiring users to rely on separate applications for vocabulary, exam preparation, practice questions, and progress tracking.

The application is designed primarily for Japanese learners and currently focuses on TOEIC, EIKEN, and general English improvement.

Core Features

Personalized Onboarding

The first step of the learning experience is a personalized onboarding process.

Rather than immediately presenting every available feature, users are asked about their learning preferences and goals, including:

  • Current English level
  • Learning goals
  • TOEIC target score
  • EIKEN target grade
  • Available study time
  • Personal interests

This information provides the foundation for personalizing the user’s experience.

For example, a user preparing for a TOEIC exam with only 10 minutes available each day should receive a different learning experience from an advanced learner studying English casually for an hour.

The onboarding system is designed so that these preferences can also be updated later as the user’s goals change.

TOEIC and EIKEN Practice

A major part of 英語ビット is its exam preparation system.

The application supports structured practice for exams such as TOEIC and EIKEN, with questions organized according to their respective exam parts and difficulty levels.

Practice sessions are stored so that users can return to their previous work and review their performance.

The system keeps track of information such as:

  • Questions attempted
  • Selected answers
  • Correct and incorrect answers
  • Practice session completion
  • Exam and question type
  • Performance over time

For longer reading sections, questions can also be associated with passages, allowing the application to reproduce the structure of real exam questions more effectively.

Vocabulary Learning

Vocabulary is another core component of the platform.

Users can maintain their own vocabulary collection, including:

  • Words
  • Meanings
  • Example sentences
  • Personal notes
  • Tags

This allows vocabulary to become part of the user’s broader learning experience rather than existing as an isolated flashcard list.

The vocabulary system is designed with future personalization in mind, allowing words and learning activities to eventually be selected based on a user’s level, interests, and previous performance.

Progress Tracking

The application records learning activity so users can understand how they are progressing.

Practice history can be used to show:

  • Completed practice sessions
  • Accuracy
  • Number of questions answered
  • Improvement over time
  • Performance by exam and part

The dashboard brings this information together into a single view, giving users a clearer picture of their learning rather than simply presenting an endless list of exercises.

Technical Architecture

Tech Stack

英語ビット is built using a modern TypeScript-based stack:

  • TypeScript: Used throughout the application for type safety and maintainability
  • Astro: Used for the web application and server-rendered pages
  • Fastify: Provides the backend API
  • PostgreSQL: Stores user accounts, learning data, practice questions, and progress
  • Drizzle ORM: Provides type-safe database queries and schema management
  • Zod: Used for validating API requests and user input
  • Tailwind CSS: Used for the application’s UI
  • Node.js: Runs the backend services

The project is structured as a monorepo, allowing the frontend, API, and shared database packages to be developed together.

Monorepo Structure

The project uses a workspace-based monorepo to keep shared code and application code organized.

A simplified structure looks like:

apps/ web/ api/ packages/ db/

The web application is responsible for the user-facing experience, while the API handles authentication, onboarding, vocabulary, practice sessions, dashboards, and other application logic.

The database schema lives in a shared package so that both the API and other services can use the same strongly typed database definitions.

This structure also makes it easier to introduce additional applications in the future, such as a mobile client, without duplicating the underlying business logic.

Backend and API

The backend exposes a versioned REST API under /api/v1.

Different areas of the application are separated into their own route modules, including:

  • Authentication
  • OAuth
  • Onboarding
  • Vocabulary
  • Practice
  • Dashboard
  • History
  • Settings

For example, practice functionality is available through endpoints under:

/api/v1/practice

This separation keeps the API maintainable as the number of features grows.

Request validation is handled using Zod, while Fastify provides the HTTP server and plugin architecture.

The API also includes production-oriented protections such as rate limiting and security headers to reduce the risk of common web attacks and abuse.

Authentication

Authentication was designed around both traditional email/password accounts and social login providers.

Email/password authentication includes:

  • Secure password hashing
  • Session-based authentication
  • Password reset functionality
  • Email verification
  • Session expiration
  • Account deletion

Email verification uses a randomly generated token rather than storing the raw verification token in the database.

The application stores a cryptographic hash of the token and sends the original token to the user through a verification link.

The same principle is used for password reset tokens and session tokens, ensuring that sensitive authentication credentials are not stored directly in the database.

OAuth support is also being built around providers such as Google, Apple, and LINE, allowing users to connect social accounts to their 英語ビット account.

Development Challenges

Designing Personalized Learning

One of the biggest challenges is deciding what “personalized learning” actually means in practice.

Simply asking users about their preferences is not enough. The application needs to turn that information into meaningful changes to the content users see.

For example, a user’s:

  • English level
  • Exam goals
  • Target score
  • Study time
  • Interests
  • Previous performance

can all potentially influence which activities should be recommended.

The architecture therefore needs to store this information in a structured way so that increasingly sophisticated recommendation systems can be introduced without redesigning the entire application.

Authentication and Account Security

Building authentication introduced several challenges beyond simply creating a login form.

Password reset and email verification links need to be:

  • Randomly generated
  • Short-lived
  • Stored securely
  • Single-use
  • Rate limited

The application also needs to avoid exposing sensitive account information through authentication endpoints.

For example, password reset requests should not reveal whether a particular email address is registered.

These considerations become increasingly important as the application moves from a development project toward a production service.

Database Performance

As the amount of learning data increases, database performance becomes increasingly important.

The application contains relationships between users, practice sessions, questions, passages, answers, vocabulary, and learning goals.

Indexes are therefore added to frequently queried columns such as user IDs, session IDs, and combinations commonly used when retrieving learning history.

For example, practice sessions have indexes that allow a user’s completed sessions to be retrieved efficiently.

Using PostgreSQL with Drizzle also provides a strongly typed interface to the database while retaining the flexibility and performance of SQL.

Roadmap

Planned Features

There are several areas that can expand the learning experience:

  • AI Learning Assistant: An AI-powered assistant for explanations, practice, and personalized recommendations
  • Adaptive Practice: Automatically adjust question difficulty based on previous performance
  • Spaced Repetition: Schedule vocabulary reviews based on retention
  • Speaking Practice: Add conversational English practice and pronunciation feedback
  • Personalized Recommendations: Recommend activities based on goals, performance, and available study time
  • Mobile Application: Extend the platform to mobile devices
  • Expanded Exam Support: Add additional EIKEN and TOEIC content and potentially other English examinations

Technical Improvements

The underlying platform can also be improved as the application grows.

Potential improvements include:

  • More sophisticated recommendation algorithms
  • Background processing for expensive operations
  • Caching frequently accessed learning content
  • Improved database query optimization
  • Automated testing and integration tests
  • Monitoring and observability
  • More comprehensive analytics
  • Scalable infrastructure for AI-powered features

Conclusion

英語ビット is an attempt to build a more personalized approach to English learning for Japanese users.

Rather than treating every learner the same, the application starts by understanding the user’s goals, ability, interests, and available time. This information can then be used to build a learning experience that becomes increasingly personalized as more data is collected.

From a technical perspective, the project has also provided an opportunity to build a full-stack application using TypeScript, Astro, Fastify, PostgreSQL, and Drizzle while implementing real-world concerns such as authentication, email verification, API security, database performance, and scalable application architecture.

The long-term goal is to combine these foundations with adaptive learning and AI-powered features to create an English learning platform that feels less like a collection of exercises and more like a personal learning system.