flash-card-app

Description

This code base creates a general-purpose flash card app. The tech stack is vue.js, node.js, express.js, and mongodb. Users can sign up for accounts in order to create decks with cards that can then be read aloud to them in the language of their choice. Note: the first two months of this project's code can be found at https://github.com/abasile1-tech/flash-card-application-early-days (at the time, I wanted a clean slate, so I moved my code into this current repository).

Check Out the App Yourself

You can create a free account and log in to try out the flashcard app. It is hosted in the cloud at https://vast-citadel-56213.herokuapp.com/

Vue 3 Upgrade in Progress

This project is currently being upgraded from Vue 2 to Vue 3. It is also being upgraded to use TypeScript and node version 20 instead of node version 16. You can view the upgraded project repository at https://github.com/abasile1-tech/flash-card-application-vue3-upgrade

➡️ Setting up

• This project was updated to be able to run on Heroku in the cloud. If you would like to run it locally there are a few lines that need to be updated:
• create a .env file
• Inside of the .env file, add the following line of code:

mongoURL='mongodb://localhost:27017/flash-card-app'

• and set up your mongodb to use that url.
• Once those are updated cd into the client and run npm run build. Then run npm run serve to run the client. Then open a new terminal tab and cd to the server folder and run npm run dev. Open localhost:5000 in web browser.
• Please note that this project uses Node version 16.20.2 (use nvm, the node version manager to control which version of node you are using).

Jest Testing (Unit Tests)

There is a Jest unit testing suite in the client folder. cd into the client folder and run npm run test to run the Jest tests.

Cypress Testing (End-to-End and Integration Testing)

There is also a Cypress testing suite in the client folder. cd into the client folder and run npx cypress open to open Cypress and see the tests that are available to be run.

✅ Completed Goals

• ✅ Create Users
• ✅ Add CSS
• ✅ Add a way to shuffle the cards
• ✅ Add language support for audio output so that the cards can be read to the user in the specified language
• ✅ Add a Search Deck Button
• ✅ Add an Edit Card Button
• ✅ Add the ability to exit out of the Add Card Process.
• ✅ Display the card number on each card / the total number of cards in the Deck
• ✅ Remove language selector on mobile or make the language selector work on mobile
• ✅ Move the buttons pertaining to the Decks above the card
• ✅ Fix a bug where a card temporarily displays the front on the back when a card is deleted while viewing the back.
• ✅ prompt the user to make sure they are certain before deleting a card
• ✅ Log the user out if the local Storage no longer knows who the user is anymore
• ✅ Add some UI/UX design
  • ✅ Design a logo for the website
  • ✅ New Color Scheme
  • ✅ Condensed Login/Signup views
  • ✅ Three bar dropdowns for logout and return to decks functionality
• ✅ Add a cookies disclaimer
• ✅ Fix indexing issues when manipulating cards in decks that have been shuffled
• ✅ Allow the backs of the cards to be shown by default instead of always the fronts
• ✅ Add a Dark Mode Option
• ✅ Add the ability to navigate to the desired card number
• ✅ Give the user the option to delete their account
• ✅ Add a disclaimer about the use of localStorage
• ✅ Make the Decks look like more than just buttons (perhaps they could look like notebooks with a background image)
• ✅ Give the notebooks some colors
• ✅ Add a little piece of tape to each notebook and change the font to look handwritten (this will make it look more realistic)
• ✅ The problem with Microsoft Edge having limited language options has been fixed by Microsoft and there are now several hundred language options to choose from for voice in Microsoft Edge. This is way more than before, so the app functionality has been greatly improved.
• ✅ I made it so the card to be added is shown with more information so that the user better understands the details of the new card that they are creating.
• ✅ I allowed the dropdown menu to disappear when somewhere else on the page is clicked
• ✅ I added Cypress testing to verify that a specific user can log in to their account, see their specific library of decks, and use a specific deck.
• ✅ I added Speech Recognition to test user pronunciation and give a score on how well the pronunciation was understood.
• ✅ I improved upon the searchDeck function. Partial matches are now found using an algorithm that determines the percentage of similarity for two strings.

Future Work

• Add voice control of the buttons
• Allow cards to be reordered
• Add a backup for the database
• Allow each notebook to have a user-choosable color to allow for further customization
• Save each user's preference for dark or light mode in the database and load that preference the next time that they log in.
• Convert to TypeScript for better type-safety when compared with Vanilla JavaScript
• Migrate from Vue 2 to Vue 3
• Upgrade from Node 16 to Node 20

Videos

flashcards1.mp4

flashcards2.mp4

📸 Screenshots