Python web application to help improve English vocabulary. I developed this web app while working as a web developer intern at the Shiksha in the Summer of 2019.

Introduction

This web app titled “Shiksha,” which means education in Hindi is also the name of the learning center at which I was enrolled as a student and also worked as a web developer intern. When I was preparing for the Verbal Reasoning Section of the GRE using the institution’s offline reading material, I used to feel a need to revise new words I learned whenever and wherever I wanted, like while when I was traveling. I often used mobile apps for this purpose. However, the offline material of the institute was more comprehensive. Therefore, I approached the institute’s manager to allow me to build an app that could not only help me but all prospective graduate students to take advantage of the institute’s reading material.

Requirement Analysis

Before starting to work on this project, I used many apps for my GRE preparation, the “Magoosh GRE Flashcard App,” was the most frequently used one. In each, I could identify some features that could be added to improve their effectiveness. During my preparation, when I used to come across a new word, I would often Google its word root or origin to remember its meaning. For example, I could remember the word “labyrinth,” meaning a complicated network of paths, when I learned it originated from the Greek word “laburinthos,” which was the name of the maze used to house the Greek monster, Minotaur. Therefore I thought of redirecting users to a dictionary entry having the word origin and even example sentences when they click on a button instead of them having to Google them separately.

I also thought it would be great if the app included features like displaying synonyms and if it used a quiz-like format to show a score at the end, things that were lacking in the already available apps. I chose to build a responsive web app as it was faster to implement and would allow users to access the app functionality by conveniently switching between their desktop and mobile browsers.

Design

I decided that two webpages were sufficient for a simple app like Shiksha. The homepage would serve as an index to the Vocabulary tests, which would have frequently asked GRE words divided lexicographically into seven tests. The four Session Tests would each have an extensive set of words belonging to a specific alphabet range. Clicking on a test would start its corresponding test on a new screen. Here, users can mark whether they knew a word they see on a flashcard or not. Since a flashcard should have minimal content, I thought it would be appropriate if it only revealed the word meaning and synonyms when flipped. If users wished to know the word origin and example sentences, they could click on a separate button.

The app was initially designed using paper prototypes. Later on, I used Adobe XD for low fidelity design prototyping. I started designing the app HTML and CSS. I used Bootstrap, a front-end framework to optimize the design for mobile users. I used inbuilt classes in the framework to customize the appearance on desktop and mobile.

Development

Before developing Shiksha, I had developed a similar app for my final project of an online course offered by Harvard University called CS50. Since the course had taught me how to build apps on a Python framework called Flask, later, I found it easier to switch to the conventional framework Django with which it was easier to work. Since the deadline for the final project submission was nearing, I developed a simple website with limited features that could be run only on the localhost.

Web Development & Hosting

Using Django, a python-based web framework, for developing my app was a great experience as it had an in-built model–view–controller (MVT) architecture. The model layer in my app consisted of a list of words stored in an SQLite database defined using a python file called models.py. The HTML templates were responsible for how the website appeared to the user. These used externally linked CSS & JavaScript files and were extended from a base.html file at the project level. The view layer was responsible for passing data to the templates and configuring URLs.

I chose Heroku for deploying my app as it is one of the top-free python friendly web hosting services. Its package, “django-heroku,” automatically configures the python application to run on the Heroku server efficiently.

Future Work

A tutorial page can be added to teach users how to use the app. In the new design, users can easily choose between vocabulary and session tests using a switch instead of having to scroll down. Intuitive round buttons can replace the traditional buttons with a new feature to save favorite words that can be reviewed later whenever a user wants. An info button can be included to open a dialog box revealing the word origin and sentences instead of redirecting users to a separate webpage. I am looking forward to implementing these features in my app soon.