Why I Built My Own Flashcard System

Don’t get me wrong. I spent time with my family, and I went to church over Christmas, but rather than spending the few days I had at home mindlessly watching terrible Christmas TV, drinking, and eating junk, I decided to build something that would help me hit my goals in 2025. Here’s why

  1. Increasing Tibetan Vocabulary: It’s one of my OKRs for 2025
  2. To Avoid Proprietary Apps: I prefer FOSS solutions, and if they don’t exist, I create them.
  3. Security Concerns: Anki’s plugin system posed potential security risks, and I preferred a streamlined approach without third-party dependencies.
  4. Simplicity and Speed: Adding and reviewing cards in Anki felt unnecessarily slow and clunky. I needed a faster, more efficient way to manage my learning.
  5. Customization: I wanted something that was fast to create cards and fast to review, no constant clicking to see answers and score them.
  6. Rapid Review: My system lets me quickly cycle through all my cards on one screen, ensuring a focused and effective learning experience.
Flashcard app on mobile

How I Built a Custom Flashcard App During the Holidays

Building a Flashcard Application: From Conception to Deployment

Flashcards have long been a powerful tool for learning and memorization, and creating my own custom flashcard application allowed me to design a system that offers flexibility and ownership over my learning process. In this article, I will describe how I designed, built, and deployed a dynamic flashcard application, including creating a database, designing a visually appealing interface, generating static HTML for mobile use, and implementing advanced features like flipped cards.

Conception and Goals

When I set out to create this application, I had several goals in mind:

  1. Efficient Vocabulary Storage and Categorization: I wanted to organize vocabulary for various subjects such as Tibetan, music, and general knowledge. The system needed to support additional topics or knowledge areas through a flexible categorization system.
  2. A Seamless User Experience: I focused on building a clean interface with realistic flashcard animations to make the learning process enjoyable.
  3. Portability: Generating static HTML versions for offline use on mobile devices was crucial for flexibility.
  4. Future Extensibility: I designed the system to incorporate potential enhancements like proficiency tracking and test modes.

Database Design

At the core of this project is the database. I chose SQLite for its simplicity and platform compatibility. I structured a single flashcards table with the following fields:

  • id: A unique identifier for each card.
  • front: The content displayed on the front of the flashcard (e.g., a Tibetan word).
  • back: The content on the back (e.g., its English translation).
  • category: The subject or topic of the card (e.g., “Tibetan,” “Quotes,” or, “History”). This field ensures the system is adaptable to new knowledge areas without requiring structural changes.
  • level: The difficulty or level of the card.
  • proficiency: A measure of how well the card has been learned.
  • date_last_correct: The last date the card was marked as correct.

I used the following SQL command to create the table:

CREATE TABLE flashcards (
    id INTEGER PRIMARY KEY,
    front TEXT NOT NULL,
    back TEXT NOT NULL,
    category TEXT NOT NULL,
    level INTEGER,
    proficiency INTEGER DEFAULT 0,
    date_last_correct TEXT
);

I populated the table using a combination of manual INSERT commands and Python scripts to process batch data from text documents and spreadsheets.

Application Design

Using Python and Flask, I developed a web application that dynamically interacts with the database. Flask’s flexibility allowed me to implement routes for various functionalities, including:

  • Homepage: Displaying levels and categories.
  • Flashcards Page: Serving the flashcards dynamically.
  • Test Page: Allowing users to test their knowledge with prompts.
  • Static Page Generator: Creating offline-ready HTML files.
  • Full List: A Page containing a list of all flashcards in the database.

I ensured that cards were prioritized for review based on learning priorities such as the date_last_correct field.

Here’s a snippet of my Flask application setup:

from flask import Flask, jsonify, request, render_template
from flask_cors import CORS
import sqlite3
from datetime import datetime

# Initialize Flask app
app = Flask(__name__)
CORS(app)

# Path to SQLite database
DB_PATH = "vocabulary.db"

# Utility function for querying the database
def query_db(query, args=(), one=False):
    conn = sqlite3.connect(DB_PATH)
    conn.row_factory = sqlite3.Row
    cur = conn.execute(query, args)
    rv = cur.fetchall()
    conn.close()
    return (rv[0] if rv else None) if one else rv

# Route: Homepage
@app.route('/')
def home():
    return render_template('index.html')

# Route: Test Page
@app.route('/test')
def test_page():
    return render_template('test.html')

# Route: Get Test Cards
@app.route('/test-cards', methods=['GET'])
def get_test_cards():
    """
    Returns cards for testing, sorted by lowest to highest proficiency,
    excluding cards with proficiency <= 0.
    """
    cards = query_db(
        "SELECT id, back FROM flashcards WHERE proficiency > 0 ORDER BY proficiency ASC"
    )
    return jsonify([dict(card) for card in cards])

# Start the Flask server
if __name__ == '__main__':
    app.run(debug=True)


Generating Static HTML for Mobile Use


To make the application portable, I wrote a script to generate static HTML pages for each category and level. I used Python’s string formatting capabilities to create these pages. The script also created flipped versions of each page where the back content appeared first, providing additional study options.


Here’s a Python snippet for generating a static HTML page:


HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{title}</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>{title}</h1>
        <div class="card-grid">
            {cards}
        </div>
    </div>
</body>
</html>
"""


By swapping the front and back fields, I ensured that flipped pages were easily generated alongside the normal ones.




Styling and Realistic Card Flipping with CSS


Creating the look and feel of real flashcards was essential. Using CSS, I implemented a smooth flipping animation with a 3D transformation. This gave the flashcards an intuitive and engaging appearance.


.card {
    position: relative;
    width: 300px;
    height: 200px;
    perspective: 1000px;
    margin: 10px;
}

.card .front, .card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s ease;
}

.card .front {
    transform: rotateY(0deg);
    background-color: #000000;
}

.card .back {
    transform: rotateY(180deg);
    background-color: #496b8c;
}

.card:hover .front {
    transform: rotateY(180deg);
}

.card:hover .back {
    transform: rotateY(0deg);
}



      

        
 
          

            
          

        

      

    




Testing and Deployment


I tested the application rigorously on both desktop and mobile platforms to ensure compatibility and responsiveness. By transferring the static HTML files to my phone, I could access the flashcards offline, creating a lightweight and portable solution.




Future Enhancements


While I’m thrilled with the current functionality, there’s always room for improvement. Potential future features include:


    

  1. Spaced Repetition: Implementing algorithms like Leitner or SM-2 to optimize review schedules.
    2. 

  2. Interactive Modes: Adding test modes that prompt users to type answers or create sentences.
    3. 

  3. Improved Analytics: Providing detailed insights into learning progress.
    4. 

  4. User Management: Enabling multiple users to maintain separate profiles and progress.
    5. 





This project reflects my ability to combine tools like SQLite, Flask, and CSS into a cohesive, extensible, and visually appealing learning platform. The journey from concept to deployment highlights my focus on clear goals, scalable design, and iterative testing. The result is a system that not only meets my personal learning needs but can also adapt to broader educational applications.


 View Website