Next.js और MongoDB से Flashcard Study App बनाएं

अगर आपने कभी एग्जाम से एक रात पहले रट्टा मारा है, तो आपको पता होगा कि सब याद रखना कितना मुश्किल होता है। Flashcards सबसे effective study tools में से एक हैं क्योंकि ये **active recall** use करते हैं – आपका brain information को passively re-read करने के बजाय actively retrieve करता है।

Digital flashcard app बनाना modern web development को educational psychology के साथ combine करता है। इस guide में मैं आपको बताऊँगा कि Next.js (frontend/backend दोनों के लिए) और MongoDB (data storage के लिए) use करके full-stack flashcard application कैसे बनाते हैं।

---

Flashcard App क्यों बनाएं?

Physical flashcards के मुकाबले digital flashcards के कई advantages हैं:

- **Portability**: Internet हो तो कहीं भी access कर सकते हैं अपने decks
- **Spaced repetition**: Algorithms review timing optimize कर सकते हैं
- **Media support**: Images, audio, formatting – सब possible है
- **Progress tracking**: Learning performance की analytics मिलती है

Real-World Use Cases

Code में जाने से पहले ये scenarios देख लो जहाँ हमारा app काम आएगा:

1. **Medical Students**: Images के साथ detailed anatomy flashcards बनाना
2. **Language Learners**: Pronunciation audio के साथ vocabulary decks बनाना
3. **Professional Certification**: Complex technical concepts को systematically organize करना

---

Tech Stack Overview

हम use करेंगे:
- **Next.js 14** (React framework with server-side rendering)
- **MongoDB Atlas** (cloud database)
- **Mongoose** (MongoDB object modeling)
- **Tailwind CSS** (styling के लिए)

Ye stack क्यों? Next.js frontend और API routes दोनों handle करता है, जिससे deployment simple हो जाता है। MongoDB का flexible schema varying flashcard structures के लिए perfect है।

---

Project Setup करें

सबसे पहले नया Next.js project बनाएं:

```bash
npx create-next-app@latest flashcard-app
cd flashcard-app
npm install mongoose mongodb
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

`tailwind.config.js` में Tailwind configure करें:

```javascript
/** @type {import('tailwindcss').tailwind.config} */
module.exports = {
content: [
"./app/**/*.{js,jsx,ts,jsx}",
"./pages/**/*.{js,jsx,ts,jsx}",
"./components/**/*.{js,jsx,ts,jsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```

`app/globals.css` में add करें:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

---

Database Connection

`lib/mongodb.js` create करें:

```javascript
import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = {
useNewUrlParser: true,
useUnifiedTopology: true,
}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
throw new Error('Please add your MongoDB URI to .env.local')
}

if (process.env.NODE_ENV === 'development') {
if (!global._mongoClientPromise) {
client = new MongoClient(uri, options)
global._mongoClientPromise = client.connect()
}
clientPromise = global._mongoClientPromise
} else {
client = new MongoClient(uri, options)
clientPromise = client.connect()
}

export default clientPromise
```

---

Flashcard Model बनाएं

`models/Flashcard.js` में:

```javascript
import mongoose from 'mongoose'

const flashcardSchema = new mongoose.Schema({
question: {
type: String,
required: true,
},
answer: {
type: String,
required: true,
},
deck: {
type: String,
required: true,
},
tags: [String],
createdAt: {
type: Date,
default: Date.now,
},
})

export default mongoose.models.Flashcard || mongoose.model('Flashcard', flashcardSchema)
```

---

API Routes

Next.js API routes हमारा backend logic handle करते हैं। `pages/api/flashcards/index.js` create करें:

```javascript
import dbConnect from '../../../lib/dbConnect'
import Flashcard from '../../../models/Flashcard'

export default async function handler(req, res) {
const { method } = req

await dbConnect()

switch (method) {
case 'GET':
try {
const flashcards = await Flashcard.find({})
res.status(200).json(flashcards)
} catch (error) {
res.status(400).json({ success: false })
}
break
case 'POST':
try {
const flashcard = await Flashcard.create(req.body)
res.status(201).json(flashcard)
} catch (error) {
res.status(400).json({ success: false })
}
break
default:
res.status(400).json({ success: false })
break
}
}
```

---

Frontend Components

Form component बनाएं `components/FlashcardForm.js`:

```javascript
import { useState } from 'react'

export default function FlashcardForm({ onSubmit }) {
const [question, setQuestion] = useState('')
const [answer, setAnswer] = useState('')
const [deck, setDeck] = useState('')

const handleSubmit = async (e) => {
e.preventDefault()
const response = await fetch('/api/flashcards', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ question, answer, deck })
})

if (response.ok) {
const newFlashcard = await response.json()
onSubmit(newFlashcard)
setQuestion('')
setAnswer('')
setDeck('')
}
}

return (

Question
value={question}
onChange={(e) => setQuestion(e.target.value)}
required
className="w-full p-2 border rounded"
/>

Answer
value={answer}
onChange={(e) => setAnswer(e.target.value)}
required
className="w-full p-2 border rounded"
/>

Deck Name
type="text"
value={deck}
onChange={(e) => setDeck(e.target.value)}
required
className="w-full p-2 border rounded"
/>

Add Flashcard

)
}
```

---

Study Interface

Active recall practice के लिए `components/StudyMode.js` बनाएं:

```javascript
import { useState, useEffect } from 'react'

export default function StudyMode({ flashcards }) {
const [currentIndex, setCurrentIndex] = useState(0)
const [showAnswer, setShowAnswer] = useState(false)
const [shuffledCards, setShuffledCards] = useState([])

useEffect(() => {
setShuffledCards([...flashcards].sort(() => Math.random() - 0.5))
}, [flashcards])

const nextCard = () => {
setShowAnswer(false)
if (currentIndex < shuffledCards.length - 1) {
setCurrentIndex(currentIndex + 1)
}
}

const prevCard = () => {
setShowAnswer(false)
if (currentIndex > 0) {
setCurrentIndex(currentIndex - 1)
}
}

if (!shuffledCards.length) return

No flashcards available

const card = shuffledCards[currentIndex]

return (

)
}
```

---

Main Application Page

`app/page.js` create करें:

```javascript
import { useState, useEffect } from 'react'
import FlashcardForm from '../components/FlashcardForm'
import StudyMode from '../components/StudyMode'

export default function Home() {
const [flashcards, setFlashcards] = useState([])
const [activeView, setActiveView] = useState('create')
const [selectedDeck, setSelectedDeck] = useState('')

useEffect(() => {
fetchFlashcards()
}, [])

const fetchFlashcards = async () => {
const response = await fetch('/api/flashcards')
const data = await response.json()
setFlashcards(data)
}

const addFlashcard = (newFlashcard) => {
setFlashcards([newFlashcard, ...flashcards])
}

const filteredCards = selectedDeck
? flashcards.filter(card => card.deck === selectedDeck)
: flashcards

const decks = [...new Set(flashcards.map(card => card.deck))]

return (

)
}
```

---

Deployment Considerations

Production के लिए ये enhancements consider करें:

1. **Authentication**: NextAuth.js से user accounts add करें
2. **Spaced Repetition**: SM-2 jaise algorithms implement करें
3. **Rich Media**: Flashcards में images और audio support करें
4. **Offline Support**: Service workers use करके PWA capabilities add करें

Vercel pe deploy करें (Next.js के लिए optimized) या similar platform। MongoDB Atlas cluster setup करें और environment variables configure कर लें।

---

Conclusion

Ye flashcard app core concepts demonstrate करता है जबकि practical भी रहता है। अब आपके पास एक foundation है जिसे specific needs के हिसाब से extend किया जा सकता है। चाहे languages पढ़नी हों, exams की preparation करनी हो, या professional material memorize करना हो – digital flashcards effective और customizable solution provide करते हैं।

Simple start करें, अक्सर iterate करें, और core user experience पर focus रखें। आपके learning journey के लिए शुभकामनाएं!

---

FAQ

Q: क्या मुझे MongoDB का prior experience चाहिए?
A: Basic familiarity help करती है लेकिन required नहीं है। MongoDB का document model intuitive है once you understand JSON-like structures.

Q: क्या मैं flashcards में images add कर सकता हूँ?
A: बिल्कुल! Schema को image URLs के साथ extend करें और form components को file uploads handle करने के लिए modify करें।

Q: Spaced repetition कैसे implement करूँ?
A: Timestamps के साथ review history store करें, फिर recall performance के basis पर optimal intervals calculate करें। `supermemo` jaise libraries algorithms में help कर सकते हैं।

Q: क्या ये mobile devices के लिए suitable है?
A: Responsive CSS frameworks जैसे Tailwind के साथ, हाँ। Native-like experience के लिए PWA features add करने consider करें।