React Quizlet Flashcard 
A simple and responsive quizlet-like flashcard component with no additional dependency. Written in Typescript and React.
In a rush? Here's tl;dr
However, I found that no existing library replicated Quizlet's flashcard functionality, prompting me to create my own. I initially replicated Quizlet's appearance and built a basic React component. I implemented a subtle animation by keeping three cards loaded at all times, allowing smooth transitions when moving between cards.
I addressed user feedback and gradually added features, resolving 11 issues so far. Over time, the project became difficult to maintain due to a lack of type safety and code organization. To enhance maintainability, I rewrote the entire component in TypeScript and created a Storybook for it.
Around 50 people are using the library, and I'm thrilled to see its growing popularity, boasting 33 stars on GitHub. I'm especially grateful to a friend who built a website using my library. Despite its success, I plan to continue improving the library and exploring other ideas, such as a minimal table component and a "Neko" (cat) component for websites
Why did I make it?
To talk about this project, I’ll have to bring in one of my other “failed” or “abandoned” or “re-thought” project, [Genki]. I wanted to make a lightweight, no-nonsense flashcard app that just does what it says on the box. Other popular apps like Quizlet, are bloated with features that I’m never going to use or apps like Anki that are straight from 2000s(no really). I wanted to make something that is simple, fast, and responsive. I wanted to make something that I would use.
But whats the core of a flashcard app? Flashcards. I looked for a library that works just like Quizlet’s flashcard but guess what? There isn’t one. So I was like…
Implementation
I wanted a Quizlet-like flashcard component right? And where can you find that? Yeah in Quizlet website. For the first version, I just copied CSS from Quizlet and made a simple React component. It was quite interesting to see how it was implemented in their site(although now they changed it).
To have a subtle animation to make it come from right or left, they always have 3 cards loaded. When left or right button is clicked, the card in the other side is removed and a new card is added, making the invisible card visible.
| react-quizlet-flashcard | Quizlet’s flashcard component |
|---|---|
 |  |
Look how similar it looks to the original one. I’m quite proud of it. Try it yourself here.
Improvements
At first I made the component with Javascript and scss. It worked. It didn’t have any features except displaying cards. You wouldn’t be able to style it properly because of the default styles like padding taking precedence due to the selector specificity.
I added some of the features as people asked in the issues page. As of writing this, I’ve solved 11 issues. Its not much but I’m happy that I could help people use my library in their projects.
After some time, the project became unmaintainable because it had no type saftey and all the logic was in a single file. Even if I wanted to add more features, It would take a lot of time to understand my own code. So I decided to rewrite the whole thing in Typescript and also made a Storybook for it. Now its slightly easier to maintain.
There are around 50 people using my library and everytime I see the list, It just makes me so happy.
Thank you all ♥
Stars
It has 33 stars!! 33!! yay
Special mention to my friend who made a website for me using my library so she can star it ♥.
Conclusion
I really enjoyed making this library. I have one more feature in mind that I recently learnt how to do so I might do that when I get time. I also have 2 more library ideas that I want to make. A minimal table component and Neko(cat) component that you can add to your website like in this website(If you haven’t see what it does, scroll to the bottom of the page and enable “Neko” and move your mouse around).