ZenDecks: Next-gen Flashcards

ZenDecks is a free, open source flashcard webapp with full Markdown and LaTeX support. ZenDecks is a feature-rich alternative to Quizlet, Anki, Memrise, and other spaced repetition systems. CSV import/export is fully supported, meaning that ZenDecks decks are compatible with Quizlet, Anki, Memrise, Excel, and many other apps!

Tech Stack

Frontend: TypeScript, ReactJS, Redux, SCSS, Framer Motion, Swiper
Backend: Firebase, Cloud Firestore

Firebase User Auth

• Currently support Google account sign-in
• Email/Password sign-in coming soon

Cloud Firestore Database

Data Model:

• Decks collection
  • Deck metadata (stored directly on the deck document: author, title, description, tags, etc.)
  • Cards subcollection
  • front (string)
  • back (string)
  • Ratings subcollection
  • id (string, the id of the user document corresponds to a user's unique uid)
  • score (number, between 1 and 5)
  • Users subcollection
  • id (string, the id of the user document corresponds to a user's unique uid)
• Users collection
  • username (string, unique)
  • photoURL (string, url to user's Google account photo)

Redux State Management

• Stores deck data loaded from cloud firestore
• Keeps track of deck review progress for the session

Framer Motion Animations

• Transitional animations on component mount

Swiper Carousel

• Swiper.js used to implement carousels across the site, including "Preview" section on homepage, card previews on deck info panels, and study mode.

Contributing

Post an issue, or respond to an open issue to get started. Feel free to contact the main developer, Mitchell, via Email if you have any questions.

To run the codebase locally:

• Ensure that you have Node.js, and Git installed.
• Clone the repository by running git clone https://github.com/SharmaMitchell/ZenDecks.git from the directory where you want the codebase stored
• Run npm install, to install the required dependencies
• Run npm start to start a local server for the React application

To Contribute:

• Fork the repository
• Implement your feature, bugfix, or idea
• Submit a pull request
  • Detail your changes in the pull request
  • Document functions and component using TSDoc comments (Example)
  • Please follow style guidelines (nothing too strict, just use Prettier and use BEM naming for any SCSS)

License

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

See LICENSE.md for the full license text

TL;DR:

• Allowed:
  ✅ Contributions (code, issues, documentation, etc.)
  ✅ Non-comercial use (access, collaboration, running locally, etc.)
• Not Allowed
  ❌ Deploying spnioffs or derivatives
  ❌ Commercial use or adaptation

Work in Progress

ZenDecks is an early-stage work in progress; many features are currently missing or incomplete. Suggestions are welcome in the issues tab, as are contributions!

Development Screenshots