Spanish Flash Card Web App

Jan 2018

A bespoke flash card web app built with Django used to teach myself Spanish vocabulary quickly using data to analyse my progress. Python JS jQuery Ajax Django Heroku PostgreSQL SQLite HTML CSS

Key Points

• A Django web app deployed on Heroku using a Postgres database.
• Applies ‘spaced repetition’ theory and data tracking to present words at the perfect time.
• Aided in my journey to becoming proficient in Spanish at a C1 level.

---

Features

At first glance this app looks like a simple flash card app like any other. Underneath, however, it’s powered by a sophisticated data analytical powerhouse used to track your progress and optimise your learning. Well that’s a bit exaggerated, but it is cool.

No fancy JS frameworks here, just good old HTML and Ajax calls.

Fill the app with the phrases you want learn and the app cleverly feeds you new phrases once you’ve begun to master old ones. This spaced repetition technique has found to be effective in learning vocabulary.

Some key features:

• View phrases in a random language or choose one specifically.
• It sports a voice synthesiser (with real accents!) for listening practice.
• Isolate phrases based how easy/medium/hard they are according to your past performance.
• Use keyboard shortcuts to quickly mark words and other actions.
• Group phrases in sets and activate specific sets and/or phrases that you wish to practice.
• Import 100s of phrases in one go via a text parser interface.

---

Includes a multi-parameter filter, pagination, and lovely CRUD operations.

---

Check out your overall performance or dive into specific stats for each phrase.

---

Tech Specs

This web app was built in Django and deployed on Heroku with a Postgres database. This was built for web in order to practise web development, but also to be able to access the data and progress from any device, anywhere in the world.

Django

• A Python based server framework used to serve HTML, handle DB calls, and front APIs used by the front end.
• Is DB agnostic so tests are setup with SQLite and production with Postgres.
• Ships with niceties like user auth, safeguards against SQL injection, powerful admin screens, and much more.
• The ‘d’ is silent.

Heroku

• A PaaS used to host the Django server and Postgres DB.
• Makes deployment is super easy. Simply push to a Git repo and Heroku handles the rest.
• The app was built for me and is hosted privately. Their free and dev tiered products are perfect for this use case.

Front End

• HTML is built dynamically through Django and its templates. No frontend libraries are used for rendering.
• jQuery is used for interactivity and handling server API calls through Ajax using JSON.
• Phrases are returned in batches and the API is called in advanced in order to eliminate lag under heavy use.