Flash card web-app

Introduction

As introduced in my project page, I needed an application that can help me to memorize vocabulary and also mobile for me to carry during commute. I decided to make a flashcard application that utilize technology of single page application (SPA) using Angular and Firebase.

Tech choice

Angular

Angular is a really powerful framework that encompass all the tools you need for a web app. It definitely has a learning curve, nonetheless after learning the ways in Angular, developing using this framework is very enjoyable.

Firebase

Firebase provides all the funtionality that I need for this application, and it is relatively easy to use. I consider it as a database for front-end, and the authorization etc. is handled for you. I can simply plug in the Firebase api for authentication, the login and authorization will be handled by firebase therefore it saves a lot of efforts.

Product display

The most important feature for me is to share data across devices and also be able to efficiently support me to reinforce my learning on the vocabulary.

In the application, different people, depending on the login account, will have their own listing for vocabulary. The access of listing is controled with authentication using api provided by firebase, which means by trying different url, unauthorized access is not allowed even if the url hits.

flashcard display on phone

flashcard app on mobile

flashcard display

flashcard on mobile going to next card by swiping

flashcard display desktop

editing vocabular on desktop

flashcard display

listing vocabulary on desktop

flashcard display

listing different folders of vocabulary on desktop

The resulting application can sufficiently support my need, although there are definitely more room for improvement. However, for the purpose of reviewing for my exam, this is adequate.