jacob-macleod / dolphin-flashcard-app Goto Github PK
View Code? Open in Web Editor NEWHome Page: http://www.dolphinflashcards.com
License: MIT License
Home Page: http://www.dolphinflashcards.com
License: MIT License
Investigate and learn more about React for front end
Improve the github actions pipeline to add:
Design and implement a switch to using firestore as a database, rather than the realtime database. This will allow lots of users to be added, whereas before, the single collection of a realtime database would simply not allow it
Make the search box on the /flashcards
page functional, by making it actually show search results. This involves writing the python backend to facilitate this, adding any animations, including loading icons, designing the search view, and making the page work on mobile. You should follow the UI designs.
If you're interested at all, please reply, and I'll send through more detailed information, including the UI designs
Add API methods to manage weekly quests
Quests are created weekly, and all users are in a quest. Quests can be based on a fixed number of characteristics such as cards learned, streak, xp, etc.
There should be a way to get all users ranked in order of how they are doing in the quest, as well as some sort of rating - ie, 3/5 sets learned
At the moment, a default max number of cards are recommended for he user to learn. The user should be able to customize this
Develop documentation in a folder for the documentation of the API. Comments explaining the API are at the start of each API function, so it should be a fairly straightforward fix
While testing the calculate_streak
endpoint, i faced the following exception:
File "Flashcard-App\backend\routes\api\statistics.py", line 203, in calculate_streak
last_streak = stats["lastStreak"]
^^^^^^^^^^^^^^^^^^^
TypeError: 'NoneType' object is not subscriptable
Testing with valid data, it returns a proper {'success': True}
message, i had no problems with valid data.
But when it comes to testing with non-existent data, userID
in this case, shouldn't the endpoint return something like "User not found" or {'success': False}
?
I was testing the create-account
endpoint via /api/create-account with the following parameters:
{
"userID": "1231",
"displayName": "Jayme Klein"
}
database_config.py
is configured as type="local"
I had this exception when trying to create a new user:
Flashcard-App\backend\database\local_database.py", line 41, in _traverse_path
current = current[key]
^^^^^^^^^^^^
KeyError: ''
and these were the values the method was using:
Event with an existing user in the file, the ''
key would not be found:
Should an empty ''
key exist in data.json
file?
I'm gonna skip this endpoint for the moment.
Please let me know if you need more context or if the issue is not properly writen.
Sets should show limited number of cards to revise and learn to avoid overwhelming the user. This should be automatically calculated from the words in each flashcard to learn today, or set my the user from "default" to another value
Add resetting of weeklyXP at the start of a new week
Mobile and tablet support and resizing should be added for the flashcard overview page. This should be based on the UI designs, and includes the popups present in the site
Develop initial code to return an HTML template when the right URL is entered. The code should also:
Make the New Folder button on the /flashcards
page functional, by making it actually add a folder. This involves writing the python backend to facilitate this, adding any animations, including loading icons, and making the page work on mobile. You should follow the UI designs.
If you're interested at all, please reply, and I'll send through more detailed information, including the UI designs
When testing the create_flashcard
endpoint using example data, during the check_request_json
function,
i got a TypeError: unhashable type: 'list'
:
In re.match(expected_value, request_values[i]):
the values are:
expected_value
[
{
"front": "",
"back": "",
"reviewStatus": "^\\d+\\.\\d+$",
"lastReview": "^(0[1-9]|[12][0-9]|3[01])/(0[1-9]|1[0-2])/\\d{4}$"
}
]
request_values[i]
[
{
"front": "Front 1",
"back": "Back 1",
"reviewStatus": "0.0",
"lastReview": "01/01/1969"
},
{
"front": "Front 2",
"back": "Back 2",
"reviewStatus": "0.0",
"lastReview": "01/01/1969"
}
]
Dummy data
data = {
"userID": "1",
"flashcardName": "My new set",
"flashcardDescription": "This is\nmy description",
"cards": [
{
"front": "Front 1",
"back": "Back 1",
"reviewStatus": "0.0",
"lastReview": "01/01/1969"
},
{
"front": "Front 2",
"back": "Back 2",
"reviewStatus": "0.0",
"lastReview": "01/01/1969"
}
]
}
The above test results in:
File "Flashcard-App\backend\verification\api_error_checking.py", line 44, in check_request_json
if not re.match(expected_value, request_values[i]):
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Program Files\Python312\Lib\re\__init__.py", line 167, in match
return _compile(pattern, flags).match(string)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Program Files\Python312\Lib\re\__init__.py", line 285, in _compile
return _cache2[type(pattern), pattern, flags]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
TypeError: unhashable type: 'list'
Develop a REST API to handle logging in and authenticating users, as well as creating an account
Add API to allow users to select individual goals. This could be on the same categories as the quest page. A timeframe is selected, and there is some system to tag whether a goal has been failed, possibly deleting the record after a certain time
Develop dahsboard page in React. UI mockups are provided
Here, you can see the total XP (6093). The dashboard page is in development, and an API route needs to be written to read the total XP from the database and return it.
How the code works is:
backend/main.py
runs a serverfrontend/
displays the UI, and gets data from backend/main.py
using the API, which is basically a function that does some processing returns a value that can be accessed over the internet. The frontend code knows to go to http://dolphinflashcards.com.api/<whatever api function is being called>
because that is stored as a variable in a file in the frontend
folderEvery API request is made with json data, which provides information needed for the request
Your code will go in backend/routes/api/statistics.py
. The format of each function that already exists is as follows - below you can see a simplified existing function with some comments:.
# /api/get-heatmap is the URL the user will go to to get the data. It must begin with /api/
# "POST" in methods=["POST"] means new data will be created. Your route will only read data, so
# you'll have methods=["GET"]
@statistics_routes.route("/api/get-heatmap", methods=["POST"])
def get_heatmap() : // The unique function name
# A comment explaining the code and how to use it
""" Get the user's heatmap data
Requests should have json in the following format:
{
"userID": "my id"
}
"""
# Check the request json
# A variable storing a dictionary storing the format we should expect the request to be in. You only need
# To take the userID, so your variable will be the same
expected_format = {
"userID": "",
}
# Next few line - check the json provided with the request is correct. request.json is the
# json the user provides with the request
result = check_request_json(
expected_format,
request.json
)
if result is not True:
return jsonify(
{"error": result + ". The request should be in the format: " + str(expected_format)}
), 400
# Get the userID
user_id = request.json.get("userID")
# Read the heatmap data. Your total XP data is at "/users/" + user_id + "/statistics/totalXP"
heatmap = db.get("/users/" + user_id + "/heatmapData")
# Return the data read in json format
return jsonify(heatmap)
Investigate how to improve issues to better follow agile methodology. Issues should have:
CONTRIBUTING.md
should be created and info on this added
Develop Sign In/Landing Page for React
There are several main tasks for this DevSecOps focused issue:
http://dolphin-flashcards.com
) so that the frontend can be run independently of the local backend server. So the frontend should never need the backend server running locally. The url should be in a standalone file for easy access"my/data/path"
) to a json location. Add reading and writing this way. Use ChatGPT for thisCONTRIBUTING.md
file. This should explain how to contribute for frontend and backend, and explain the relationship between the two separate codebases. Since local files are now read from in dev for the backend, no firebase configuration should be needed. This should be explain, and a link given to explain how to setup your own test project. The frontend will use the real production code, from the public APICONTRIBUTING.md
README.md
This must be done before contributors can really work on code. Right now, the backend server must be running locally, connected to the live production database, to do any contributing
Write an API endpoint to get all the flashcards that a user needs to revise to day based on their due date
Add the API for the community page. This means:
Implement the "Rename" and "Delete" buttons for each flashcard which is accessed by clicking the three dot menu on the /flashcards
page. This involves developing the frontend, including mobile support and loading animations, as well as the backend methods. Follow the UI designs.
If you're interested, please reply to this comment, and I'll send more detailed information, including showing the UI designs
Add the API methods required for the leaderboard page. This includes:
Convert the existing documentation to mintlify, which will make the docs a lot nicer to read and understand. Below are some links:
https://mintlify.com/docs/quickstart#creating-your-documentation-repository
https://github.com/mintlify/starter
https://github.com/mintlify/starter/blob/main/mint.json
The initial setup can be based on https://github.com/mintlify/starter, but make sure you change the folder structure, possibly putting all files inside docs/
to make the repo simpler.
Setup the code to upload a static site to mintlify.
Give the documentation a blue theme, to fit in with dolphin flashcards
Develop statistics APIs so that:
Add features to the API to allow:
Make the "New Flashcard" button on the /flashcards
page functional, by making it actually create a flashcard. This involves writing the python backend to facilitate this, adding any animations, including loading icons, and making the page work on mobile. You should follow the UI designs.
If you're interested at all, please reply, and I'll send through more detailed information, including the UI designs
Error checking should be added to the API to check:
The algorithm should be similar to Anki, and allow users to be shown only the flashcards they need to learn
The client should pass an API endpoint the card data like review date and review status, and the new review date and status should be returned.
In Anki, cards are classed as Learn, hard, medium, easy. Easy is rarely used, and I would argue "hard" is used even less. So I would say:
Host the initial code on a GCP server, and setup Github actions to reload the docker container on the server when a merge is made to main
At the moment, the API is not tested. This should be fixed by adding extensive unit tests. This is essential, and very important, to ensure the code works long term with no errors. So far, it has only been slightly tested manually, and so there is the potential for significant issues in the code. The pipeline should run unit tests which are in the the testing
folder, if they are named following a pattern which pytest can detect
I was starting to test the /api/get-flashcard
endpoint, which is returning None
regardless of given data:
Valid data json:
valid_data = {
"userID": "1",
"flashcardName": "My new set"
}
And this is is the current data in data.json
:
{
"users": {
"1": {
"userID": "1",
"name": "Dummy",
"statistics": {
"streak": "0",
"totalXP": "0",
"weeklyXP": "0",
"lastStreak": "03/03/2024"
},
"heatmapData": {},
"flashcards": {
"109048371178679571656833207928626960824600184952382683242495299362286693266526": {
"flashcardID": "109048371178679571656833207928626960824600184952382683242495299362286693266526",
"flashcardName": "My new set",
"flashcardDescription": "This is\nmy description",
"cards": [
{
"front": "Front 1",
"back": "Back 1",
"reviewStatus": "0.0",
"lastReview": "01/01/1969"
},
{
"front": "Front 2",
"back": "Back 2",
"reviewStatus": "0.0",
"lastReview": "01/01/1969"
}
]
}
}
}
}
}
This is the path
argument passed in Database.get
method:
/users/1/flashcards/109048371178679571656833207928626960824600184952382683242495299362286693266526
The LocalDatabase.get
method returns the expected data:
{
"flashcardID": "109048371178679571656833207928626960824600184952382683242495299362286693266526",
"flashcardName": "My new set",
"flashcardDescription": "This is\nmy description",
"cards": [
{
"front": "Front 1",
"back": "Back 1",
"reviewStatus": "0.0",
"lastReview": "01/01/1969"
},
{
"front": "Front 2",
"back": "Back 2",
"reviewStatus": "0.0",
"lastReview": "01/01/1969"
}
]
}
But when it comes to the Database.get
method, his return is always None
.
I changed the line 126 from return jsonify(db.get("/users/" + user_id + "/flashcards/" + flashcard_id))
in two different lines, just for purpose of debugging:
data = db.get("/users/" + user_id + "/flashcards/" + flashcard_id)
return jsonify(data)
Does the data
value from db.get
shouldn't be the same as LocalDatabase.get
?
After adding the return
statement to the Database.get
method, the endpoint properly returned the requested data.
Should i keep this change for the next commit?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.