orbital2020: STUDYSMART

Prototype hosted: https://sheltered-atoll-56102.herokuapp.com

Proposed Level of Achievement: Vostok

Project Scope:

A web application that provides students with the ability to create flashcards online and arrange them according to folders. Users will be able to access community made flashcards and collaborate with others to create effective cards for studying.

Motivation

Everyday, students are bombarded with large amounts of content, spanning multiple modules, that they have to internalise. While they are clear on what they have to know, it remains a challenge developing an efficient system that will help them internalise the content.

Instead of going through entire chunks of content, wouldn’t it be nice to only have to revisit the content that you are unsure of or are going to forget? We want to leverage on the proven technique of spaced repetition and memory curves to optimize the studying process. We aim to not only streamline the process of studying, but give students real time collaborative power to leverage on the knowledge of their peers to ease their studying pains. Say goodbye to long hours of studying with a new and effective approach!

Aim

We hope to streamline the studying process by incorporating spaced repetition using flash cards into the daily lives of students.

Core features

The Web Application will feature multiple decks of flashcards, stored in a database. Users will be able to organise module content within a deck by constructing flash cards for that specific deck. Users will have a log/sign in page (authentication) to gain access to the database of decks. Cards are created by users themselves as they go about their studies, they are not auto-generated by the system in order to ensure that the students internalise this data before being tested on it with the flashcards.

(Feature 1-3: MS1 & MS2, Features 4 MS3.) (All completed)

1. Web app a) Allow users to add and review cards added to the deck b) When reviewing cards, users will be able to determine the difficulty of the review c) Upon reviewing a card, based on the difficulty of the review, a next review date is tagged to the card d) Connect decks to a database.
2. Ability to add multiple decks
3. Website hosting on Heroku
4. Authentication a) Log in page b) Sign up page

Landing page (OLD)

Landing page with Log In (NEW!)

Sign up Page (NEW!)

Sign In/Log In page (NEW!)

All of the users' decks.

Cards of the chosen deck.

There is also an option to edit the cards if needed.

Each time a flash card is reviewed, the user provides feedback on the difficulty of the review. Based on the difficulty, a next review data is tagged to the card and the card does not surface again until that date.

Question shown.

Answer shown along with choice of difficulty of the question.

User Stories:

1. As a student who has multiple modules, I want to be able to manage all the content I need to know in one place.
2. As a student who is revising for exams, I want to be able to quickly identify the areas that I am weak in so I can focus more on those topics.
3. As a student, I would like to review only the content that I have to and not waste unnecessary time reviewing content I already know well.
4. As a student, I would like to be able to know how productive I am in revising for an exam and how frequently I should be revising concepts with varying difficulties.

Hierarchy

Wireframes

Bugs we faced

Problem (P) Solution (S)

Problem 1

P: State not being passed between card edit page and card page. Thus, the cards were not edited even though it was supposed to be.

S: Completely revamped pages due to the cyclic dependency between the aforementioned pages. Redesigned pages to ensure that they have a proper parent-child relationship

Problem 2

P: Users could access the collaborative database of decks without proper authorization (ie; anyone using the site can edit the decks)

S: Decided to add in user authorisation and added in permissions for each page such that users are forced to sign in to access the database

Lessons Learnt

• The importance of proper planning (individual classes etc), ensuring there's no cyclic dependencies etc.
• Architecture of react web apps, learning how to build model pages as components and managing local states with react functions.
• Navigation between pages was something new to us, we had to learn that from scratch
• Client-backend relationship and how to query the backend from the front-end.
• A practical implementation of what we have learnt in CS2030 and how OOP really does play a huge part in SWE (and sites)

Problems that remain

• Able to click on "Study" button even despite having 0 cards in the deck. (We should reroute back to the deck page or leave a message box letting the user know about this and prevent access to the cards page etc)
• In some cases, when the user edits the card, then clicks on "Study", the changes aren't reflected when studying.