Flashcard-App
-
- Broad Overview
- 3.1. Flashcard System
- 3.2. Gamified Features
- 3.3. Access Control System
- Broad Overview
1. Broad Overview
This app is designed to improve simiar apps like Quizlet and Anki by implementing a spaced repetition system in an easy to use and visually pleasing UI. The website, which is in development, can be seen here
Contributors are welcome! More information is in CONTRIBUTING.md
2. USPs and Points of Differentiation
- Flashcard app with nice UI
- Spaced Repetition
- Gamified with lots of "juice"
Anki solely fills the second point, while Quizlet serves the first point. None fully cover all points. This would provide a unique opportunity for this app
See the planned features
## 3. Broad Overview A broad overview of the planned features to be made ### 3.1. Flashcard System * Log into account * Create account * Users should be able to see a tree list of all the cards they have added. They should be able to see which folders everything is in * There should be an indicator like Anki showing how many cards are there to learn, recap and revise in each folder and set * You can click a three dot menu to view all cards in the set, not just the ones you need to learn. You can access the same options as below * When you click this menu, you can also choose to create a card * When you click on a card or a folder, you view all the cards you need to learn or revise in it as a list * Flashcards * Multiple choice QU * With each qu, you can see whether you know a little, whether you know it well, or not at all * Cards have HTML code which can be rendered. Images or text can be uploaded * Folders can be created or deleted. Cards can be created, deleted or moved around * Anki-Like Algorithm * More details to follow ### 3.2. Gamified Features * Streak, XP * Leader board with multiple levels. Completing a level in the top 5 pushes you to the next level * Quests - things like learn x cards, add x cards, get an x day Streak etc * When you win them you get a badge on your profile * When you complete one the variable x increases * When you win it again the badge looks the same but it has a different number associated with it - the badge number * Quests give you gold ### 3.3. Access Control System * The user that created the flashcard/folder owns the flashcard/folder. If they own the folder, they own all the cards inside it * Other users can view it but not edit it * If they want to edit it, they can first clone it * Users can find flashcards made by other users on a separate search tab * Users can be given access to flashcard by the owner4. Contributors
Contributors are welcome!
The project uses feature branches, which are made from the development branch. It is important to keep to this rule!
For more information, please go to CONTRIBUTNG.MD. API documentation is avaliable at docs/
5. Server setup
At the moment, a pipeline exists to:
- Build the docker container
- Check the container can run
- Upload it to docker hub as a private container since it contains keys
- SSH into a GCP VM and update the container
- Check the VM is running
If you want to manually setup the code, follow the following steps:
firebase_url,firebase_config.jsonandcredentials.jsonin the overall project directory, which store the url of the firebase instance and the firebase credentials (api key)- Get the code on the server, using git or docker(your own build of the code)
- Navigate to the
frontend/folder, install thenpmdependencies innode_requirements.txt, and building the code withnpm run build - If using docker, a
docker-compose.ymlfile can be made, using the following information: - Make sure
backend/database/database_config.pystorestype="production" - Make sure
frontend/src/api/secretKeys.jsstores theactionpart of the correct Mailchimp form asmailChimpApiKey- See this medium article for more information
version: '3'
services:
flashcard-app:
image: jacobmacleod/flashcard-app:latest
ports:
- "5000:5000" docker-compose upcan be used to build the code, anddocker-compose up --force-recreate --build -d && docker image prune -fto update the container
More information of how the code works is in CONTRIBUTING.md