DEV Community

Cover image for AI Flashcard: NextJs (Basic)
Taki
Taki

Posted on

AI Flashcard: NextJs (Basic)

#webdev #programming #ai #nextjs

1. Create a FlashCard Component

Create a file called components/FlashCard.tsx:

import React from 'react'; export interface FlashCard { phrase: string; meaning: string; breakdown: string[]; simpleMeaning: string; usageContext: string; examples: { sentence: string; explanation: string; }[]; similarPhrases: string[]; tip: string; domainUsage: string; } interface FlashCardProps { card: FlashCard; } const FlashCard: React.FC<FlashCardProps> = ({ card }) => { return ( <div className="max-w-3xl mx-auto bg-white shadow-lg rounded-lg p-6 my-6"> {/* Phrase Header */} <h2 className="text-2xl font-bold mb-4">🔤 {card.phrase}</h2> {/* Explanation Section */} <section className="mb-4"> <h3 className="text-xl font-semibold mb-2">📘 Explanation</h3> <p className="mb-2"><strong>Definition:</strong> {card.meaning}</p> <p className="mb-2"> <strong>Phrase Breakdown:</strong> <ul className="list-disc list-inside"> {card.breakdown.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> </p> <p className="mb-2"><strong>Meaning (in simple English):</strong> {card.simpleMeaning}</p> <p className="mb-2"><strong>Usage Context:</strong> {card.usageContext}</p> </section> {/* Examples Section */} {card.examples.length > 0 && ( <section className="mb-4"> <h3 className="text-xl font-semibold mb-2">🧠 Examples</h3> <table className="table-auto border-collapse w-full"> <thead> <tr> <th className="border p-2 text-left">English Sentence</th> <th className="border p-2 text-left">Simple Meaning</th> </tr> </thead> <tbody> {card.examples.map((ex, index) => ( <tr key={index}> <td className="border p-2">{ex.sentence}</td> <td className="border p-2">{ex.explanation}</td> </tr> ))} </tbody> </table> </section> )} {/* Similar Phrases */} {card.similarPhrases.length > 0 && ( <section className="mb-4"> <h3 className="text-xl font-semibold mb-2">🔁 Similar Phrases</h3> <ul className="list-disc list-inside"> {card.similarPhrases.map((phrase, index) => ( <li key={index}>{phrase}</li> ))} </ul> </section> )} {/* Memory Tip */} {card.tip && ( <section className="mb-4"> <h3 className="text-xl font-semibold mb-2">📌 Memory Tip</h3> <p>{card.tip}</p> </section> )} {/* Field / Domain Usage */} {card.domainUsage && ( <section> <h3 className="text-xl font-semibold mb-2">🧩 Field Usage</h3> <p>{card.domainUsage}</p> </section> )} </div> ); }; export default FlashCard;
Enter fullscreen mode Exit fullscreen mode

2. Create a Next.js Page to Consume the API

Here’s an example of a simple page in the app directory (if you’re using the Next.js App Router) or pages/index.tsx if you’re on the Pages Router.

If using App Router (Next.js 13+ with /app):

Create or update app/page.tsx:

'use client'; import { useState } from 'react'; import FlashCard, { FlashCard as FlashCardType } from '../components/FlashCard'; export default function Home() { const [input, setInput] = useState(''); const [flashCard, setFlashCard] = useState<FlashCardType | null>(null); const [loading, setLoading] = useState(false); const [error, setError] = useState<string>(''); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setError(''); setFlashCard(null); try { const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/phrase/explain`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: input }), }); if (!res.ok) { throw new Error(`Error: ${res.statusText}`); } const data: FlashCardType = await res.json(); setFlashCard(data); } catch (err: any) { console.error(err); setError(err.message); } finally { setLoading(false); } }; return ( <main className="max-w-4xl mx-auto p-8"> <h1 className="text-4xl font-bold mb-6 text-center">🧠 AI Dictionary Flashcard</h1> <form onSubmit={handleSubmit} className="flex gap-4 mb-8"> <input className="flex-1 border rounded-md p-3" type="text" placeholder="Enter an English phrase..." value={input} onChange={(e) => setInput(e.target.value)} /> <button className="bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700" type="submit" disabled={loading || !input.trim()} > {loading ? 'Loading...' : 'Generate Flashcard'} </button> </form> {error && <p className="text-red-600">{error}</p>} {flashCard && <FlashCard card={flashCard} />} </main> ); }
Enter fullscreen mode Exit fullscreen mode

If using Pages Router (create pages/index.tsx): 

import { useState } from 'react'; import FlashCard, { FlashCard as FlashCardType } from '../components/FlashCard'; export default function Home() { const [input, setInput] = useState(''); const [flashCard, setFlashCard] = useState<FlashCardType | null>(null); const [loading, setLoading] = useState(false); const [error, setError] = useState<string>(''); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setError(''); setFlashCard(null); try { const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/phrase/explain`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: input }), }); if (!res.ok) { throw new Error(`Error: ${res.statusText}`); } const data: FlashCardType = await res.json(); setFlashCard(data); } catch (err: any) { console.error(err); setError(err.message); } finally { setLoading(false); } }; return ( <div className="max-w-4xl mx-auto p-8"> <h1 className="text-4xl font-bold mb-6 text-center">🧠 AI Dictionary Flashcard</h1> <form onSubmit={handleSubmit} className="flex gap-4 mb-8"> <input className="flex-1 border rounded-md p-3" type="text" placeholder="Enter an English phrase..." value={input} onChange={(e) => setInput(e.target.value)} /> <button className="bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700" type="submit" disabled={loading || !input.trim()} > {loading ? 'Loading...' : 'Generate Flashcard'} </button> </form> {error && <p className="text-red-600">{error}</p>} {flashCard && <FlashCard card={flashCard} />} </div> ); }
Enter fullscreen mode Exit fullscreen mode

3. Environment Variables

Ensure you have a .env.local file in your Next.js project with:

NEXT_PUBLIC_API_URL=http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Replace http://localhost:3000 with your backend URL as needed.

✅ 4. Enable CORS in NestJS (for local testing)

In main.ts (NestJS):

app.enableCors({ origin: 'http://localhost:3000', });
Enter fullscreen mode Exit fullscreen mode

✅ 5. Run Both Apps 

# Backend npm run start:dev # (port 3000) # Frontend npm run dev # (port 3000 default → change one to 3001)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)