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
01 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.
02 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.
03 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.
04 Connection Lines for Contextual Mapping
Connection Lines between flashcards represent relationships and dependencies. These lines are dynamically redrawn as flashcards are added or updated.
05 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.
06 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 Firestore.
Features and Solutions
01 Flashcards Map Using Flutter and Custom Painter
We developed the flashcards map with a custom painter to render the lines connecting the flashcards. Variations including text flashcards and image flashcards provide users with versatile tools.
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;
}
}
02 CRUD Operations with Firestore
We used Firestore to store and manage 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());
}
}
03 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();
}
04 Flashcard Animations and UI Elements
We added smooth animations to the flashcards for better user interaction, with 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 & Solutions
Challenge Ensuring correct line connections between dynamically added or removed flashcards.
Solution A custom painter was used to redraw connections whenever flashcards were updated, keeping the map always in sync.
Challenge Synchronizing updates across multiple users in real-time.
Solution Firestore's real-time sync feature ensured consistent data across all connected devices instantly.
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 from scratch.