back
Onyx
A modern and minimalist study flashcards app
2025
Overview
I created a full stack web-based flashcards studying app, combining the best features of popular flashcard study tools into one modernized package. I designed my app with minimalism and simplicity in mind, to give students a distraction free environment to study flashcards.
Problem
Quizlet and Omnisets are not as versatile as Anki, but Anki’s user interface is too outdated.
key contributions
designed user interface in Figma
developed front end using HTML, CSS, JavaScript
implemented RESTful API with Node.js, Express, MongoDB
secured user authentication using bcrypt hashing & JWT authentication tokens
added a text editor for creating flashcards using Quill.js
Initial Research
I started by using 3 popular flashcard tools: Quizlet, Omnisets, and Anki, taking note of features I like, dislike, and wish were available.
Anki
Anki's interface is too outdated, and it's versatility
may overwhelm users. However, I love the spaced
repetition algorithms.
Quizlet
Quizlet's interface is too cluttered, and there are
many unnecessary features.
Surveys
I surveyed 10 students at UCF, and asked the following questions:
What is your favorite flashcards app?
What do you like about it?
What do you dislike about it?
What features did you wish existed?
Design Process
I wanted this project to stand out in design. I knew I wouldn't be able to make something as intricate as the popular study apps, but I could make a good UI. Listening to user feedback, I kept things simple and focused only on the essentials, cutting out any unnecessary extras.
Consistent styling
I chose a purple and pink color
scheme
to create an aesthetic
studying atmosphere for students.
Dark and light mode
In Figma, I designed every page in a dark and light mode.
Designing for all screen sizes
Ensuring that Onyx is compatible for all forms of devices, making learning as accessible as possible.
Simplifying the studying process.
Studying is hard. What makes it worse? Unnecessary features, too much clutter, absurd paywalls (looking at you, Quizlet.)
making the home page feel like home.
technical when it matters most.
learn more with spaced repetition.
Developing Onyx
After designing the prototype in Figma, I coded the front end using HTML and CSS. Then I set up the MongoDB local database to be connected to my Node.js server using Express.
Implementing the database
In MongoDB, I created 3 collections, each with their own schema and all connected by user IDs.
Handling user authentication
I used JavaScript to validate a user input, which would then be sent via POST request to the MongoDB local server. The user input would then be checked for if an account has already been made, otherwise the user's new password would be hashed using bycrypt hashing. Upon successful user creation, the server generates a JWT that includes the user's ID with a 1 hour expiration time, which is then stored in local storage to be used to access the user's data such as flashcards and studysets.
