Skip to content

A responsive flash card app built with React and Tailwind CSS that helps users test their JavaScript knowledge with animated cards, dark mode, and keyboard navigation.

License

Notifications You must be signed in to change notification settings

nurf21/flash-cards

Repository files navigation

🧠 Flash Card App

An interactive flash card app built with React, Tailwind CSS, and Framer Motion to help users test their knowledge with JavaScript questions.

✨ Features

  • ✅ Predefined JavaScript flashcards (20 total)
  • ✅ Flip card animation to reveal answers
  • ✅ Responsive design (mobile-first)
  • ✅ Light and dark theme support
  • ✅ Progress bar and navigation
  • ✅ Keyboard navigation (← → keys)
  • ✅ Randomized question order on each load
  • ✅ Smooth transitions using framer-motion

🚀 Live Demo

📍 View it here


🛠 Tech Stack


📦 Installation

git clone https://github.com/nurf21/flash-cards.git
cd flash-cards
npm install
npm run dev

🧪 Usage

  • Click "Show Answer" to flip the card.
  • Use "Previous" / "Next" to navigate.
  • Use the left/right arrow keys as shortcuts.
  • Works great on desktop and mobile.
  • Automatically picks random card order on each refresh.

🌗 Theme

The app supports both light and dark themes. Your system preference is detected automatically.


📝 License

This project is open-source and available under the MIT License.


🙌 Acknowledgments

About

A responsive flash card app built with React and Tailwind CSS that helps users test their JavaScript knowledge with animated cards, dark mode, and keyboard navigation.

Topics

Resources

License

Stars

Watchers

Forks