Inspiration

All flashcard systems (such as Anki, Quizlet) today all work, but each of them have major flaws such as lacking the ability to edit a card, a beautiful UI, and some lack a SRS (spaced repetition system).

ReSpot is the result of us taking everything good from these systems and implementing all the features that they lack, leaving only what's necessary and great.

We as a team decided to pursue this project after realizing how there isn’t a simple enough method for learning a new language or expand vocabulary. We want to create a system that has a simple, pleasant interface that is easily accessible across all devices to help students around the world expand their knowledge. At the same time, we realized that educators would love a straightforward method to provide questions, as well as an automated method to facilitate learning.

What it does

ReSpot has:

  • Beautiful, minimal UI
  • Accessible from everywhere
  • Centralized progress and data stores (as ReSpot is one web app).
  • No need for a custom app.
  • Uses an SRS algorithm.
  • Has a unique timeline for each user.
  • Ability to add and delete cards, as well as decks in a centralized manner.
  • Ability to generate cards using Pearson dictionaries for vocabulary, tailored for English, GRE English and Chinese-English words.

How we built

Backend

The back end was built using Node.js and the Node.js ecosystem. The language of choice was naturally Javascript. From the Node.js ecosystem, we used Express.js as the server framework, to route requests to the server and corresponding controllers to handle them. Jade was then used as a middleware templating library to generate dynamic HTML code for the frontend.

All data persists in a MongoDB instance. The server communicated with the MongoDB using the Monk module. By having data stored in-memory, we were able to create a fast and lightweight SaaS.

Node.js was used mainly because the project largely revolved around I/O calls with minimal need for CPU processing. Express was then the framework of choice to handle request routing and business logic because it's well-documented and easy to use.

Mongo was then the database of choice as data is stored in as JSON documents, allowing for more complex data structures to be stored than a relational database. Since it is also a NoSQL database, we did not have to determine the schema from the beginning, allowing no hard constraints and the ability to iteratively change our data models.

Frontend

As this is a web application (with single-page views), we used mostly HTML, CSS and JS along with front-end styling libraries such as Bootstrap (for the main UI) and MaterializeCSS (for the study UI to provide a pleasant, flat and minimal experience that is inline with today's modern web apps)

JQuery was used to manipulate the DOM and provide an AJAX library for a one-page app experience, along with modals.

Challenges we ran into

Our team was unfamiliar with the full web stack technologies, especially MongoDB and it's NoSQL datastores. Changing the technology stack numerous times (we chose PHP before this, haha).

Accomplishments that we're proud of

Our app managed to tie up a lot of concerns developers and users had with other flashcard systems. The UI looks clean, uniform and pleasant. We managed to make this in a very short time despite busy schedules, inexperienced teammates, and the result was fairly sophisticated. We're proud that we managed to build something that can rival established learning apps, in a span of only 3 days.

What we learned

'Be water, my friend.' - Bruce Lee

We learnt to adapt to constantly changing implementation and requirements, and how to better create applications made for the modern web. We learnt teamwork such as this is not something one can learn in class, rather only in projects. We also learnt more about the full stack by actually building something useful, and not just a Hello World app by blindly following tutorials.

What's next for respot

  • Shared Decks (the backend is designed around being to easily share decks)
  • Importing Decks and Cards from other existing established applications to ease user migration
  • Introduction of Quizzes and Learning Studio Exam APIs.
  • Additional gamification aside from scoring and stats

The Pearson Coding Competition 2015

Is the Application professional, visually appealing, and easy to use?

Yes. The application looks like a well polished app with a clean UI that is both pleasing and visually appealing. The application is easy to use as it is intuitive. We know this as we have done public testing and received feedback from users who have used flashcards systems and those who haven't, in which they were able to navigate around and understand what the app was trying to achieve.

How useful is the Application to learners or educators?

Very useful to learners. Learners can effectively learn a subject using a well-researched scientific algorithm (SRS). While educators can integrate this application with their study plan and encourage students to use this app for learning parts of a subject that require rote memorization such as vocabulary.

Is the Application original and/or innovative?

While the application is not original, that is not the goal, being full-featured and sophisticated is. The application is innovative because we unified all the good features of flashcard apps and SRS based learning systems out there and also fixed their flaws.

Share this project:
×

Updates