TQ
Trần Quang

Flashcard App - Copy this React, Tailwind Component to your project

Build a desktop web application for learning English vocabulary using a spaced repetition algorithm, with a clean and intuitive UI. The app should include the following features: 1. Flashcard Management: Organize flashcards by folders and tags using a sidebar or dashboard with drag and drop functionality. Flashcards support rich text and images on both sides via a rich text editor. Include preview and edit modes. 2. Flashcard Front Page Layout: The front displays: Main Section: Vocabulary word in a large, bold font with a text to speech button. Hint 1 (Practical Usage): Hidden, revealed by a “Show Hint” button with a smooth dropdown. Hint 2 (Synonyms): Revealed after a second click. Use clear section dividers, fade in animations, and hover effects for buttons. 3. Learning & Review Dashboard: Session dashboard shows review schedule with progress bars and upcoming reviews. Flashcard review in a distraction free mode, with "Easy," "Hard," and "Again" buttons for rating. Include keyboard shortcuts. 4. Progress Tracking: Visualize learning progress with charts for word mastery and review stats. A detailed stats page tracks review frequency and accuracy, with export options. 5. Design Style: Minimalist UI with ample white space and a responsive design. Smooth animations for transitions and feedback.

Prompt
Component Preview

About

FlashcardApp - Organize flashcards with rich text and images, manage reviews, track progress, and enjoy a minimalist UI built with Rea. Get code instantly!

Share

Last updated 1 month ago