Add multiple types of Pearson cards in one click.
A modern flashcard UI for effective studying.
Minimalist UI for Studying
View Custom Statistics inside Each Deck
A personalized timeline for every user and deck
Homepage after signing in to display all decks
Generate a deck using Pearson Dictionaries
Create your own personalized decks
Homepage without any existing decks
Login Page Modal for a single page experience
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
- 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
The back end was built using
Node.js and 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.
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.