michaelschuff / flashmath

A notecard app supporting advanced formatting for beautiful looking flash cards.

FlashMath

A notecard app supporting advanced formatting for beautiful looking flash cards.

Authors

Michael Schuff, Billy Merchan, Dante Luis, Yuyang Zheng, Jun Song

Step 1: Create an Account

• Click on the "Don’t have an account?" button located in the middle of the homepage.
• Enter your email address and create a password. Follow the prompts to complete the registration process.

Step 2: Logging In

• After creating your account, enter your registered email address and password.
• Click "Log In" to access your FlashMath card page.

Step 3: Explore the Card Page

• After logging in, you'll be directed to your FlashMath card page.
• Take a moment to familiarize yourself with its layout, which includes a card editor, shuffle button, and left and right arrow keys

Step 4: Create a Set of Flashcards

• Scroll down and give your card a title and add terms (questions) and definitions (answers) for each flashcard. You can also use LaTex for more complex math notations!
• Once you've added all your terms and definitions, click “Add Card” found in the middle
• Repeat this step until you’ve added all the terms/definitions you need

Step 5: Study Your Flashcards

• Scroll back up to locate the card you just added
• Click on the set to open it. You'll see your terms and definitions displayed like flashcards.
• Click on a card to flip it and reveal the answer.
• Use the arrow keys or navigation buttons to move through the set. You can also use the "Shuffle" button to randomize the order.

Step 6: Log Out

• When you're done using FlashMath, it's important to log out for security.
• Click on the "Log Out" button at the top right corner

Step 7: Log Back In

• If you want to continue using FlashMath later, you'll need to log back in.
• If you want to proceed with a new account, go to step 1. Otherwise, if you want to access a card set from an existing account, go to step 2.

flashmath's Issues

Make the flip actually flip to a backside instead of just hiding text

self explanatory, only the title needs to be shown in big letters at first then on flip it should work, also:

• just clicking on the front of the card should flip, that top right area should be dedicated to editing the cards

React Rotuer

Router has not been implemented yet, no easy way to navigate between pages.

Theme across pages isn't consistent

Title says it all, theme should match the login page (or if we decide to change it). Buttons should look similar and background should be the gradient.

Animations for cards

Add a small slide animation when going to the next card!

Title of card does not appear at the top of the card

Should just involve some CSS that I can't figure out, maybe the title needs to pop up a div but then it should be good.

card page polish

A few frontend fixes that would make the UX a lot more enjoyable

• Search bar should be located at the top of the page
• share button needs to be transparent please, maybe add functionality?
• Cards should be bigger on screen
• Add left and right arrow key interaction with cards
• Shuffle button spacing is weird
• Logout button needs a button

God send latex

If someone has extra time, actually implementing that latex would be the crown of our project, and it would allow us to get a nice grade B)

ShareButton filepath in EditorPage bugged

ShareButton import statement is red underlined, idk why. Says it differs from previous import by case only (..../Sharebutton.jsx). Idk what to do to fix this

Need to merge Multiple cards (front end branch) with editable cards (Editable-cards branch)

title says it all

Login Isn't linked to users logging in

pressing Login should send a request to the server to verify credentials, and then change the state of the app to logged in. Register should work accordingly.

Creating a page for cards

This should include:

The title, search bar, menu bar, card (one side), card edit button, single and double arrows (for card navigation), shuffle button, and share button.

The design is from the mockup we created for sprint 4.

Cards don't immediately display their default values

When EditorPage loads up the initial cards do not display their values. its not until you press shuffle/left/right does it show up

Adding linter

Linter should be run by calling npm run test before every push, using Standard linter for javascript (see package.json).

Login/Register page

Users should navigate to the login page by default if not logged in. Login screen should resemble image below, featuring:

Login:

• email field
• password field
• Login Button
• switch to register page link

Register

• name field
• email field
• password field
• Register button
• switch to login page link

Bug: Uncaught Exception Error When Username and Password are empty

Finish up Front end

Make a view deck button, create new deck button and make the share button transparent

Need to sync the backtext with the correct Title and Text

The flip button is completed just need someone to sync up the backtext with everything else.

Editable Cards

Cards need to be editable. Baseline user needs to be able to click on the card and have a textbox appear and they can type in text to modify the card.

polish up login

There are a few things that need fixing up on the frontend for the login:

• Two register buttons, only one that sends api route should be present
• Maybe revamp buttons, make em look nicer
• make labels look nicer
• continue on guest only on login,
• the "dont have an account" buttons should both be underlined small like the styling on the register page

Cards not saved after editing

title says it all, once you edit a card and press enter, it should save the text you've written