Interactive Flashcards Map with AI-Generated Content

Client: Tanna AI

Feature: Flashcards Map with AI Content Generation

Tech Stack: Flutter, Firestore, OpenAI APIs

Project Overview

Tanna AI needed an interactive map to manage flashcards, helping users better organize their lectures and data. The solution aimed to address the difficulty users faced when revising or creating custom flashcard sets while knowing exactly where their content resides.

Workflow Overview

The following diagram illustrates the end-to-end workflow for managing interactive flashcards.

Workflow Steps

1. Interactive Map Initialization

The workflow starts with an Interactive Map, which allows users to visualize and manage flashcards. Users can select different types of flashcards such as text flashcards or image flashcards.

2. Flashcards Management

Flashcards are categorized into Text Flashcards and Image Flashcards. The current flashcard is highlighted for focused interaction, while unfocused flashcards remain visible for contextual reference.

3. AI-Generated Content for Enhanced Learning

The AI Generated Content feature uses OpenAI APIs to provide additional information and context for each flashcard, ensuring that users receive enriched content tailored to their needs.

4. Connection Lines for Contextual Mapping

Connection Lines between flashcards represent relationships and dependencies. These lines are dynamically redrawn as flashcards are added or updated.

5. Real-Time Database Integration with Firestore

Flashcards and related data are stored in Firestore Database with real-time sync capabilities. This allows for seamless updates across all devices accessing the platform.

6. CRUD Operations for Flashcards

We implemented CRUD Operations (Create, Read, Update, Delete) to manage flashcards effectively. This is facilitated by the Flashcards Service, which handles all interactions with the Firestore Database.

Features and Solutions

1. Flashcards Map Using Flutter and Custom Painter

We developed the flashcards map with a custom painter to render the lines connecting the flashcards. Variations of the flashcards were also created, including text flashcards and image flashcards, providing users with versatile tools to manage their learning.


              class LinePainter extends CustomPainter {

                final List<MapLine> lines;

                Note? currentNote;



                @override

                void paint(Canvas canvas, Size size) {

                  final paint = Paint()

                    ..strokeWidth = 2

                    ..style =
              PaintingStyle.stroke;

                  for (var line in lines) {

                    canvas.drawLine(line.start,
              line.end, paint);

                  }

                }


                @override

                bool shouldRepaint(covariant LinePainter oldDelegate)
              {

                  return oldDelegate.lines != lines;

                }

              }

2. CRUD Operations with Firestore

We used Firestore to store and manage the flashcards in real-time. A GetXService handles the creation, updates, and deletion of flashcards.


              class CardService extends GetxService {

                final RxList<Card> scheduledCards =
              RxList<Card>([]);

                final Rx<Card?> currentCard =
              Rx<Card?>(null);



                Future<void> addCard(Card card) async {

                  await FirebaseFirestore.instance

                    .collection('flashcards')

                    .add(card.toJson());

                }

              }

3. AI-Generated Content for Flashcards

To enhance user experience, we integrated OpenAI APIs to generate content dynamically for flashcards.


              Future<String> generateFlashcardContent(String prompt) async
              {

                final response = await
              OpenAI.instance.completions.create(prompt: prompt);

                return response.choices.first.text.trim();

              }

4. Flashcard Animations and UI Elements

We added animations to the flashcards for better user interaction, with smooth transitions during creation and deletion.


              AnimatedSwitcher( 

                duration: const Duration(milliseconds: 300),

                child: currentCard.value != null

                  ? FlashcardWidget(card:
              currentCard.value!)

                  : const Text("No card available"),

              );

Challenges and Solutions

1. Connecting Flashcards Dynamically

Challenge: Ensuring correct line connections between dynamically added or removed flashcards.
Solution: A custom painter was used to redraw connections whenever flashcards were updated.

2. Managing Real-Time Data with Firestore

Challenge: Synchronizing updates across multiple users in real-time.
Solution: Firestore's real-time sync feature ensured consistent data across devices.

Impact

The flashcards map significantly improved user experience on the Tanna AI platform, resulting in higher user engagement and positive feedback. The AI-generated content feature was particularly appreciated for reducing the workload of creating flashcards.