An AI-powered flashcard platform that enables users to create, manage, and study flashcards efficiently. Built with Next.js, Clerk, Firebase, and OpenAI API.
- AI-Powered Flashcard Generation: Automatically generate flashcards from user-provided content using OpenAI's API.
- User Authentication: Secure sign-up, login, and account management via Clerk.
- Real-Time Data Sync: Flashcard data is stored and synchronized in real-time using Firebase.
- Responsive Design: Optimized UI for seamless experience across devices.
| Main Dashboard | Sign up/Login | AI Flashcard Generation | Saved Flashcard |
|---|---|---|---|
 |
 |
 |
 |
(Replace path/to/... with actual image paths)
| Component | Tech / Library |
|---|---|
| Frontend | Next.js, React, Tailwind CSS |
| Authentication | Clerk |
| Backend & Database | Firebase (Firestore) |
| AI Integration | OpenAI API |
- Node.js (v16 or later)
- npm or yarn
- Firebase account
- OpenAI API key
- Clerk account
- Clone the repository:
git clone https://github.com/yourusername/flashcard-saas.git
cd flashcard-saas- Install dependencies:
npm install- Set up Firebase
Create a Firebase project.
Add a web app to get Firebase configuration.
- Set up Clerk:
Create a Clerk application.
Obtain your Clerk frontend API and API key.
- Set up GEMINI :
Create an Google gemini account.
Obtain your API key.
- Create a .env.local file in the root directory with your environment variables:
Copy code
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id
NEXT_PUBLIC_CLERK_FRONTEND_API=your_clerk_frontend_api
NEXT_PUBLIC_CLERK_API_KEY=your_clerk_api_key
GEMINI_API_KEY=your_gemini_api_key- Running the Development Server
npm run devOpen http://localhost:3000 in your browser.
📝 Project Structure
flashcard-saas/
├── pages/ # Next.js pages
├── components/ # Reusable React components
├── lib/ # Firebase and API helpers
├── public/ # Static assets (images, icons)
├── styles/ # Tailwind CSS and global styles
├── .env.local # Environment variables
└── README.md # Project documentation
🧪 Testing Ensure user authentication works via Clerk.
Test flashcard creation, editing, and deletion.
Verify AI-powered flashcard generation works with sample input.
📦 Deployment Can be deployed using Vercel for seamless Next.js integration.
📚 Usage Guide Sign up / Login via Clerk.
Navigate to the Dashboard to see your flashcards.
Create new flashcards manually or use the AI-powered generation feature.
Review flashcards and test your knowledge.
All changes are saved automatically via Firebase.