nicholasdly / minicards

A free, minimal, and open-source flashcard web app.

minicards - online flashcards simplified

minicards is a free, minimal, and open source flashcard web application

Inspired by the best parts of other flashcard programs like Anki and Quizlet, minicards is designed and built to bring simplicity back into flashcard software, while still being an incredibly effective method of study and memorization.

Features

• completely free with no ads
• unlimited flashcard decks
• unlimited flashcards
• flashcard deck organization (folders, tags, etc.)
• public and private decks
• user statistics

Development

At its core, minicards is built with the T3 stack including these tools:

• Web Framework: Next.js
• Styling: Tailwind CSS, daisyUI, and headlessUI
• Backend API: tRPC and Upstash
• Database: Planetscale
• Authentication: Clerk
• Testing: Vitest
• Deployment: Vercel

Prerequisites

To get started contributing to minicards, it is assumed you have Node.js installed along with necessary keys from Planetscale, Clerk, and Upstash (see the .env.example file).

Installation

1. Fork and clone this repository using git clone.

2. Install npm packages:

npm install

3. Create a .env file based off of .env.example, and provide the necessary keys.

DATABASE_URL='mysql://YOUR_MYSQL_URL_HERE?ssl={"rejectUnauthorized":true}'

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_KEY_HERE
CLERK_SECRET_KEY=YOUR_KEY_HERE
UPSTASH_REDIS_REST_URL=YOUR_KEY_HERE
UPSTASH_REDIS_REST_TOKEN=YOUR_KEY_HERE

4. Start a local development server.

npm run dev

Contributing

1. Make changes on a new branch.

git checkout -b my_changes

2. Commit and push your changes.

git commit -m "My new changes"
git push origin my_changes

3. Open a new pull request to merge your branch into the develop branch, not the main branch.

License

Licensed under the GNU General Public License v3.0, Copyright © 2023

minicards's Issues

Home page feed for recently created public decks

Currently, a logged in user will only see the list of decks they have created themselves on the home page. A new section should be created for public decks that have been recently created.

Note that this should be limited, considering we would not want the user to be stuck waiting for all public decks in the database.

Profanity filter

Currently, there is no profanity filter for deck and card content. When viewing a public deck, profanity should be censored.

Improved UI security for publicly visible decks

When viewing a deck and its cards, there is no UI difference between the creator of the deck (someone who has permissions to modify the deck) and a separate viewer (someone who does not have permissions to modify the deck).

The UI should be updated so that all buttons and forms are inaccessible to everyone except for the original creator of the deck.

Serverless function to prevent database sleeping

There should exist a serverless (or edge, but probably serverless) function that triggers activity on the database (most likely an arbitrary read) to prevent the the database from automatically sleeping due to inactivity.

More details on Planetscale database sleeping: https://planetscale.com/docs/concepts/database-sleeping

Improved API security for publicly visible decks

Although all current tRPC endpoints utilize a private procedure, meaning that only authenticated users can access such endpoints, security for the API should be further improved by verifying that the user is the creator of a deck before making changes to that deck.

User can change visibility of deck in edit deck form

Currently, there is no way to for a user to change the visibility of a deck they have already created. There should exist a toggle or checkbox element for the user to toggle visibility.

Both daisyUI and headlessUI have prebuilt toggle elements that can easily accomplish this.

Utilize foreign keys instead of relations

With the recent addition of MySQL foreign key support from Planetscale, the database schema can be updated to utilize foreign keys instead of the existing table relations.

Planetscale Foreign Keys Support Announcement: https://planetscale.com/blog/announcing-foreign-key-constraints-support
Drizzle Foreign Key Docs: https://orm.drizzle.team/docs/indexes-constraints/#foreign-key

Public deck URL sharing

When viewing a public deck, a user should be able to click a share button to immediately copy the URL for the deck to their clipboard, allowing them to easily share it to others.

Possibly useful code:

// https://stackoverflow.com/questions/70125627/copy-current-url-with-userouter-in-next-js
navigator.clipboard.writeText(window.location.toString())

Card shuffling

With the click of a shuffle button, a user should be able to shuffle the order of a deck's cards, allowing them to review a deck at a different order than what is in the database.

Possibly useful code:

/*
 * Randomize array in-place using Durstenfeld shuffle algorithm.
 * 
 * https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}

User can set visibility of deck in creation form

Currently, there is no way to for a user to create a new public deck. There should exist a toggle or checkbox element for the user to enable/disable to establish whether the new deck is viewable by the public or private (viewable only by the creator of the deck).

Both daisyUI and headlessUI have prebuilt toggle elements that can easily accomplish this.