AI-powered learning workspace that turns raw notes into complete study systems: course outlines, flashcards, quizzes, notes, and AI tutoring.
- Website: https://notes2card.vercel.app/
Studying from unstructured notes is slow and inconsistent. Notes2Card transforms a topic into a guided, interactive learning path so learners can move from "what should I study?" to "I can test and retain this" in minutes.
- AI-generated course outlines from any topic
- One-click material generation for flashcards, quizzes, and chapter notes
- Difficulty-aware learning paths (Easy, Medium, Hard)
- Built-in AI tutor for contextual Q&A
- Secure auth with Clerk and premium upgrade flow via Stripe
- Async generation pipelines with Inngest for better reliability
- Responsive dashboard experience with modern UI primitives
- Enter a topic and choose difficulty.
- Generate a structured course outline with chapters.
- Produce study assets (flashcards, quizzes, notes).
- Review progress from a central dashboard.
- Upgrade for unlimited course generation.
- Framework: Next.js 16.0.10
- UI Components: Radix UI, Lucide React, Embla Carousel
- Styling: Tailwind CSS 4, PostCSS
- State Management: React Context
- Authentication: Clerk NextJS
- Animations: Lottie Files, Typewriter Effect
- Notifications: Sonner
- Theme: next-themes
- Runtime: Node.js (Next.js API Routes)
- Database: PostgreSQL via Neon
- ORM: Drizzle ORM
- AI/ML: Google Gemini AI, Anthropic Claude AI
- Async Jobs: Inngest
- Payments: Stripe
- HTTP Client: Axios
- Build Tool: Webpack (via Next.js)
- Compiler: Babel React Compiler
- Code Generation: Drizzle Kit
- Environment: Dotenv
notes2card/
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ │ ├── courses/ # Course management
│ │ ├── generate-course-outline/ # AI course generation
│ │ ├── generate-study-type-content/ # Study materials generation
│ │ ├── payment/ # Stripe payment handling
│ │ ├── qa/ # Q&A functionality
│ │ └── study-type/ # Study material types
│ ├── (auth)/ # Authentication pages (Sign-in, Sign-up)
│ ├── course/ # Course display pages
│ ├── dashboard/ # User dashboard
│ ├── create/ # Course creation flow
│ ├── landing/ # Landing page
│ └── layout.js # Root layout
├── components/
│ └── ui/ # Reusable UI components
├── configs/
│ ├── AiModel.js # AI model configurations
│ ├── db.js # Database connection
│ └── schema.js # Database schema
├── inngest/
│ ├── client.js # Inngest client
│ └── functions.js # Background job definitions
├── lib/
│ ├── aiError.js # AI error handling
│ └── utils.js # Utility functions
└── public/ # Static assets
- User profiles and authentication metadata
- Free tier course limits (3 courses max)
- Stripe customer ID for payment tracking
- Course information and metadata
- Difficulty levels and course layout
- Generation status tracking
- Created timestamp
- Detailed notes for each chapter
- Content storage for study materials
- Generated flashcards, quizzes, and other materials
- Content in JSON format
- Generation status
- Payment records and upgrade tracking
- Stripe session and customer IDs
- Node.js 18+ and npm/yarn
- PostgreSQL database (Neon)
- Google Gemini API key
- Clerk API keys
- Stripe API keys
- Clone the repository
git clone <repository-url>
cd notes2card- Install dependencies
npm install- Set up environment variables
Create a
.env.localfile in the root directory:
# Database
DATABASE_CONNECTION_STRING=your_neon_postgres_connection_string
# Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
# AI Services
GEMINI_API_KEY=your_google_gemini_api_key
ANTHROPIC_API_KEY=your_anthropic_api_key
# Payments
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key
# Inngest
INNGEST_EVENT_KEY=your_inngest_event_key
INNGEST_SIGNING_KEY=your_inngest_signing_key- Set up the database
npm run db:push # Using drizzle-kit- Run development server
npm run devOpen http://localhost:3000 to see the application.
# Development
npm run dev # Start dev server with webpack
# Production
npm run build # Build for production
npm start # Start production server
# Database
npm run db:push # Push schema to database
npm run db:studio # Open Drizzle Studio- User enters a topic and selects difficulty level
- API calls
generate-course-outlineendpoint - Gemini AI generates a structured course outline with chapters and topics
- Inngest background job processes and stores the course
- User can access generated content via dashboard
Multiple study types can be generated from a course:
- Flashcards: Question-answer pairs for memorization
- Quizzes: Assessment questions with answers
- Notes: Structured study notes by chapter
- AI Tutor: Interactive Q&A based on study materials
- Free Tier: Up to 3 courses per user
- Premium: Unlimited courses via Stripe payment
- Free tier limits enforced at both UI and API level
AI errors are classified and mapped to user-friendly messages using lib/aiError.js:
- Invalid AI responses trigger automatic retries via Inngest
- Failed generations are marked with "Failed" status to prevent stuck states
- User receives clear error messages with actionable feedback
- Landing Page → Marketing with features and product demo
- Sign Up/Sign In → Clerk authentication
- Dashboard → View all created courses
- Create Course → Generate new course via AI
- Course View → Access course chapters and materials
- Study Materials → Generate/view flashcards, quizzes, notes
- Premium → Upgrade via Stripe payment for unlimited courses
- Model: Gemini 3-Flash (preview)
- Temperature: 0.3-0.4 (controlled randomness)
- Max Tokens: 8192
- Output Formats: JSON and plain text
- Course outline generation (max 4 chapters for performance)
- Flashcard generation
- Quiz generation
- Interactive Q&A tutor
- Notes summarization
- Course outline generation limited to max 4 chapters for faster processing
- AI tutor context uses study material
topicfield (fallback to courseTitle) - Async processing via Inngest prevents blocking requests
- React Compiler enabled for optimized rendering
- Webpack used for bundle optimization
- Clerk Integration: Complete auth system with sign-in/sign-up
- API Protection: User context validation on protected routes
- Session Management: Automatic session handling via Clerk
- Payment Security: Stripe webhook validation for payments
The application is ready to deploy on Vercel:
npm run build
vercel deployEnsure all environment variables are configured in Vercel dashboard.
- Spaced repetition scheduling for flashcards
- Study streaks and retention analytics
- Team/classroom mode with shared courses
- Export options (PDF, Anki-compatible formats)
Contributions are welcome! Please ensure:
- Code follows existing patterns
- AI errors are properly classified
- Database migrations are tested
- Study material generation is tested with various topics
For issues or questions:
- Check the documentation
- Review existing issues
- Create a new issue with detailed description
TBD.
- Built with Next.js
- AI powered by Google Gemini
- Authentication by Clerk
- Payments by Stripe
- Job processing by Inngest