Flash Cards : Web Application

Submitted as a part of Modern Application Development Course at IIT Madras

Keywords: IIT Madras  Modern Application  Web App  Development  Python  Flask  Vue  Celery  Redis  SQLite  Swagger  API  Insomnia


[Click on any image to open it in full size.]

Introduction

The objective for this project is to create a flashcards web app with following features.

Features:

  1. Login, register page for user
  2. Dashboard with list of decks, last reviewed deck
  3. Time of last review, score on deck
  4. After selecting a deck for practice, present cards one after other
  5. Allow user to select difficult of each card
  6. Update last reviewed time and score, and overall deck score
  7. Options to create a new deck, edit, delete deck
  8. Add cards, edit, delete cards
  9. Export/Import decks
  10. APIs for interaction with decks

Files Structure

The files structure is shown as below. It explains how files are connected to each other.

[Fig 1.1] Files Structure
Files Structure

Files Tree Diagram

This app is built in two iterations. In first iteration, a simple flashcards web app was built with using just Python and Flask. It had extra features like import/export a deck of cards and token based authentication. In next iteration, the same app was modified as a SPA with Vue.js, along with extra features like caching using Redis, background async jobs with Celery, report generation with weasyprint, and scheduled email notifications.

The files tree diagram for the app is shown below.

[Fig 2.1] Files Tree Diagram
Files Tree Diagram

Web Page Design

A wireframe is a schematic that can be used to determine the app's structure. It consists of a number of screens arranged in the order in which they will be displayed to the user, as well as the material that will be displayed on each screen. It's also useful for programming. Based on the wireframes, the webpages were designed and developed with HTML, CSS, JS, and Bootstrap

The web pages are shown below.

[Fig] Login
Login
[Fig] Sign Up
Sign Up
[Fig] Dashboard
Dashboard
[Fig] Import Deck
Import Deck
[Fig] Add Card
Add Card
[Fig] Edit Card
Edit Card
[Fig] Add Deck
Add Deck
[Fig] Edit Deck
Edit Deck
[Fig] Review Card Front Side
Review Card Front Side
[Fig] Review Card Back Side
Review Card Back Side

Presentation and Video Demo

After building all required screens and programming related functions final app has been ready.

The video below is the project presentation for the first iteration of the app. (It was submitted to IIT Madras as a part of MAD-I Course.)

The video below is the project presentation for the second iteration of the app. (It was submitted to IIT Madras as a part of MAD-II Course.)

The video below is the live demo of the app.

Resources

All the relevent files and documents are available in the Github repository. Prefix v1 means first iteration and v2 means second iteration.

Github Project Repository: Click Here !!