Flashcard AI

Make flashcards in as little as three clicks

1. Right click
2. Paste
3. Click Generate Results

And there you go! Ready to go flashcards for studying. Built for desktop (not mobile)

Tech Stack

• UI made with react and built with vite
• Hosted on vercel
• AI supported by openrouter
• Storage with neon

Supported Features

• Deck creation
• Google authentication and deck saving
• Deck renaming, editing, and deletion
• Dark/light theming

Self-Hosting Guide

Prerequisites

• Node.js (v18 or higher)
• Git
• A Vercel account
• A Neon database account integrated with Vercel
• An OpenRouter API key

Setup Steps

1. Clone the repository

   git clone https://github.com/cyan-ding/flashcard-ai.git
   cd flashcard-ai

2. Install dependencies

   npm install

3. Environment Configuration

   Create a .env.local file in the root directory with the following variables for google auth:

   VITE_CLIENT_ID="your_google_client_id"
   VITE_CLIENT_SECRET="your_google_client_secret"

4. Vercel Configuration

   • Push your code to a new github repository (or fork this one)
   • Make a new project in Vercel
   • Import your github repo
   • Create environmental variables in Vercel:

   api_key="your_openrouter_key"
   

5. Database Setup

   • Create a new project in Neon using Vercel native integration
   • New environmental variables should have been created by default if you are deploying with Vercel.

6. Start the Development Server

   npm run dev

7. Deploy with Vercel

   • Push your code to GitHub
   • Import the repository in Vercel
   • Make sure your environment variables are in the Vercel dashboard
   • Deploy!

Troubleshooting

• If you encounter database connection issues, verify you have a DATABASE_URL in Vercel environment variables.
• For API errors, check your OpenRouter API key and quota. By default, OpenRouter limits free models to 50 requests/day, unless you have purchased 10 credits, which raises the limit to 1000 requests/day for free models. Also check Vercel logs for errors from the app's serverless functions.
• Make sure all environment variables are properly set.

Support

For issues or questions about self-hosting, please open an issue in the GitHub repository.