🧠 Gaia Flashcard Generator

August 23, 2025 · View on GitHub

A lightweight, AI-powered flashcard application that leverages Gaia Node capabilities to create personalized learning experiences. Transform any topic into interactive flashcards with markdown support and a beautiful, modern interface.

Gaia Flashcards Demo Node.js Express.js

✨ Features

  • 🤖 AI-Powered Generation: Automatically create flashcards from any topic using Gaia Node
  • 📝 Markdown Support: Rich text formatting with headers, lists, code blocks, and inline code
  • 🎨 Modern UI: Vibrant gradient design with glassmorphism effects
  • 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
  • 🔄 Interactive Cards: Smooth flip animations with 3D effects
  • ⚡ Real-time Generation: Dynamic flashcard creation with loading states
  • 🎯 Quick Prompts: Pre-defined topic suggestions for instant learning

🚀 What This App Does

Gaia Flashcards simplifies the learning process by:

  1. Topic Input: Enter any subject you want to learn about
  2. AI Processing: Uses your Gaia Node to generate relevant questions and answers
  3. Interactive Learning: Review flashcards with smooth flip animations
  4. Progress Tracking: Monitor token usage and generation statistics

Perfect for:

  • 📚 Students preparing for exams
  • 🧑‍💻 Developers learning new technologies
  • 🎓 Educators creating study materials
  • 🧠 Anyone wanting to improve memorization

🛠️ Technology Stack

  • Frontend: HTML5, CSS3, Bootstrap 5.3.2, Vanilla JavaScript
  • Backend: Express.js v5.1.0
  • AI Integration: OpenAI SDK v5.15.0 (Gaia Node compatible)
  • Runtime: Node.js v18+
  • Styling: Custom CSS with gradients and glassmorphism effects

📋 Prerequisites

Before running this application, ensure you have:

  • Node.js v18 or higher (Download here)
  • npm (comes with Node.js)
  • Gaia Node or OpenAI API access
  • A modern web browser

🔧 Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd gaia-flashcards

2. Install Dependencies

npm install

3. Environment Configuration

Create a .env file in the root directory (optional):

# Gaia Node Configuration
GAIA_NODE_URL=https://your-gaia-node-url.gaia.domains/v1
GAIA_API_KEY=your-api-key

Note: If you don't set these environment variables, the app will use default Gaia Node settings:

  • Default URL: https://0xee7253294f6580c32c3ed745fe578b2eb8220f46.gaia.domains/v1
  • Default API Key: gaia

4. Start the Application

npm start
# or
node server.js

5. Open in Browser

Navigate to: http://localhost:3000

🎮 How to Use

Basic Usage

  1. Enter a Topic: Type any subject in the input field

    Example: "Basics of Quantum Computing"

  2. Generate Flashcards: Click the "Generate Flashcards" button

  3. Review Cards: Click on any flashcard to flip between question and answer

  4. Try Quick Prompts: Use the suggested topics for instant learning

Advanced Features

  • Markdown Content: The AI can generate flashcards with formatted text, code examples, and lists
  • Multiple Topics: Generate multiple sets of flashcards for different subjects
  • Token Tracking: Monitor your API usage with the token counter

🔑 API Configuration

Using Your Own Gaia Node

  1. Replace the GAIA_NODE_URL with your node's URL
  2. Set your GAIA_API_KEY if required
  3. Restart the server

📁 Project Structure

gaia-flashcards/
├── public/
│   ├── index.html          # Main application interface
│   └── style.css           # Custom styling and animations
├── server.js               # Express.js server and API endpoints
├── package.json            # Dependencies and scripts
├── package-lock.json       # Dependency lock file
└── README.md              # This file

🎨 Customization

Changing Colors

The app uses CSS variables for easy theming. Edit public/style.css:

:root {
    --primary-gradient: linear-gradient(135deg, #your-color 0%, #your-color 100%);
    --secondary-gradient: linear-gradient(135deg, #your-color 0%, #your-color 100%);
    /* ... more variables */
}

Modifying AI Behavior

Edit the prompts in server.js:

const questionPrompt = `Your custom prompt for generating questions...`;
const answerPrompt = `Your custom prompt for generating answers...`;

🔍 Troubleshooting

Common Issues

Server won't start:

  • Ensure Node.js v18+ is installed
  • Check if port 3000 is available
  • Run npm install to install dependencies

Flashcards not generating:

  • Verify your Gaia Node/API configuration
  • Check network connectivity
  • Ensure your API key has sufficient credits

UI issues:

  • Clear browser cache
  • Ensure JavaScript is enabled
  • Try a different browser

Performance Tips

  • Shorter topics generate faster
  • Simple language works better with AI
  • Monitor token usage to manage costs

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request