Flashcard Genius is an AI-powered flashcard generator that helps you master any topic through concise, relevant Q&A pairs. Just enter a topic, and the app instantly creates 10 high-quality flashcards for efficient study and revision.
Built with Next.js, Tailwind CSS, and powered by the Gemini API, the app is optimized for simplicity, speed, and modern learning.
- 🔮 AI Flashcard Generation – Automatically generates 10 flashcards for any topic using Gemini API
- 🃏 Interactive UI – Flip animations and easy navigation between flashcards
- 📱 Responsive Design – Fully functional on desktop and mobile devices
- 💨 Fast Performance – Lightweight and efficient frontend stack
- 🎓 Ideal for Learners – Great tool for studying, prepping for exams, or quick revision
- Frontend: Next.js, React
- Styling: Tailwind CSS
- AI Integration: Gemini API (Google AI Studio)
Clone the project to your local environment:
git clone https://github.com/your-username/flashcard-genius.git
cd flashcard-genius
Install the required packages:
npm install
Create a .env file in the root directory and add your Gemini API key:
GEMINI_API_KEY=your_gemini_api_key_here
You can get your API key from Google AI Studio
Start the development server:
npm run dev
The app will be available at: http://localhost:3000
- User enters a topic (e.g., "Photosynthesis" or "JavaScript Promises")
- The app sends a prompt to the Gemini API requesting 10 question-answer pairs
- Gemini returns structured content
- The flashcards are displayed with flip effects and next/previous navigation
| Key | Description |
|---|---|
GEMINI_API_KEY |
Your Gemini API key from Google AI Studio |
. ├── components/ # Reusable components (Card, FlipCard, etc.) ├── pages/ # Next.js page routes │ └── index.tsx # Main app logic and UI ├── public/ # Static assets (icons, etc.) ├── styles/ # Tailwind CSS setup (globals) ├── utils/ # API call and data parsing logic ├── .env.local # Local environment variables └── README.md # Project documentation
yaml Always show details
Copy
- 📝 Save flashcards to local storage or a backend database
- 🧠 Add quiz mode for self-testing
- 🔊 Enable text-to-speech support
- 📲 Add PWA support for offline access
Contributions are welcome! Follow these steps:
- Fork the repository
- Create a new feature branch:
git checkout -b feature/YourFeature - Commit your changes:
git commit -m "Add YourFeature" - Push to your branch:
git push origin feature/YourFeature - Open a pull request 🚀
This project is licensed under the MIT License
Rupesh Kumar Singh
- GitHub: @whyrupesh
- Twitter: @whyrupesh
- Portfolio: rupeshsingh.com