AI-Powered Flashcard Application With Next.js, Clerk, Firebase, Material UI, and LLaMA 3.1

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
 };

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const auth = getAuth(app);
export const db = getFirestore(app);

import { NextResponse } from "next/server";

const OPENROUTER_API_KEY = process.env.OPENROUTER_API_KEY;

const systemPrompt = `
You are an AI flashcard creator. Your task is to generate concise and effective flashcards based on the given topic or content. Follow these guidelines:
1. Create clear and concise questions for the front of the flashcard.
2. Provide accurate and informative answers for the back of the flashcard, ensuring they do not exceed one or two sentences.
3. Ensure that each flashcard focuses on a single concept or piece of information.
4. Use simple language to make the flashcards accessible to a wide range of learners.
5. Include a variety of question types, such as definitions, examples, comparisons, and applications.
6. Avoid overly complex or ambiguous phrasing in both questions and answers.
7. When appropriate, use mnemonics or memory aids to help reinforce the information.
8. Tailor the difficulty level of the flashcards to the user's specified preferences.
9. If given a body of text, extract the most important and relevant information for the flashcards.
10. Aim to create a balanced set of flashcards that covers the topic comprehensively.
11. Only generate 10 flashcards.

Return in the following JSON format:
{
    "flashcards": [{
        "front": str,
        "back": str
    }]
}

Remember, the goal is to facilitate effective learning and retention of information through these flashcards.
`;

export async function POST(req) {
    const data = await req.text(); // Get the raw text from the request
  
    try {
      const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
        method: "POST",
        headers: {
          "Authorization": `Bearer ${OPENROUTER_API_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model: "meta-llama/llama-3.1-8b-instruct",
          messages: [
            { role: "system", content: systemPrompt },
            { role: "user", content: data }
          ],
        })
      });
  
      if (!response.ok) {
        throw new Error(`Failed to fetch from OpenRouter AI: ${response.statusText}`);
      }
  
      const completion = await response.json();
      // Extracting JSON from the response content
      const rawJson = completion.choices[0].message.content;
      const startIndex = rawJson.indexOf('{');
      const endIndex = rawJson.lastIndexOf('}') + 1;
      const jsonString = rawJson.substring(startIndex, endIndex);
      const flashcardsData = JSON.parse(jsonString);
  
      // Assuming flashcardsData contains the "flashcards" array directly
      return NextResponse.json({ flashcards: flashcardsData.flashcards });
    } catch (error) {
      console.error("Error processing request:", error);
      return new Response("Error processing request", { status: 500 });
    }
  }

"use client";

import { AppBar, Container, Typography, Box, Toolbar, Button } from "@mui/material";
import { useRouter } from 'next/navigation';
import { SignIn } from "@clerk/nextjs";

export default function LoginPage() {
  const router = useRouter();

  const handleHomeClick = () => {
    router.push('/');
  };

  return (
    <Container maxWidth="sm">
      <AppBar position="static" sx={{ mb: 4 }}>
        <Toolbar>
          <Typography variant="h6" sx={{ flexGrow: 1 }}>
            Learn in a Flash
          </Typography>
          <Button color="inherit" onClick={handleHomeClick}>
            Home
          </Button>
        </Toolbar>
      </AppBar>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          mt: 4,
          p: 3,
          border: 1,
          borderColor: 'grey.300',
          borderRadius: 2,
        }}
      >
        <Typography variant="h4" gutterBottom>
          Login to Your Account
        </Typography>
        <SignIn />
      </Box>
    </Container>
  );
}

"use client";

import { AppBar, Container, Typography, TextField, Button, Box, Toolbar } from "@mui/material";
import { useRouter } from 'next/navigation';

export default function SignUpPage() {
  const router = useRouter();

  const handleHomeClick = () => {
    router.push('/');
  };

  const handleLoginClick = () => {
    router.push('/sign-in'); // Ensure the leading slash for routing
  };

  return (
    <Container maxWidth="sm">
      <AppBar position="static" sx={{ mb: 4 }}>
        <Toolbar>
          <Typography variant="h6" sx={{ flexGrow: 1 }}>
            Learn in a Flash
          </Typography>
          <Button color="inherit" onClick={handleHomeClick}>
            Home
          </Button>
          <Button color="inherit" onClick={handleLoginClick}>
            Login
          </Button>
        </Toolbar>
      </AppBar>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          mt: 4,
          p: 3,
          border: 1,
          borderColor: 'grey.300',
          borderRadius: 2,
        }}
      >
        <Typography variant="h4" gutterBottom>
          Create an Account
        </Typography>
        <form noValidate autoComplete="off">
          <TextField
            label="Email"
            variant="outlined"
            fullWidth
            margin="normal"
            type="email"
            required
          />
          <TextField
            label="Password"
            variant="outlined"
            fullWidth
            margin="normal"
            type="password"
            required
          />
          <Button variant="contained" color="primary" fullWidth sx={{ mt: 2 }}>
            Sign Up
          </Button>
        </form>
      </Box>
    </Container>
  );
}

import { useUser } from "@clerk/nextjs"; 
export default function Generate() { 
const { isLoaded, isSignedIn, user } = useUser(); 
// Other code will be placed below this 
}

const [flashcards, setFlashcards] = useState([]);  // Stores the generated flashcards
const [flipped, setFlipped] = useState({});  // Keeps track of which flashcards are flipped
const [text, setText] = useState("");  // User input for generating flashcards
const [name, setName] = useState("");  // Name for the flashcard collection
const [open, setOpen] = useState(false);  // Dialog state for saving flashcards

const handleSubmit = async () => {
  try {
    const response = await fetch("/api/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text }),  // Sends the input text to the API
    });

    if (!response.ok) {
      throw new Error("Failed to fetch flashcards");
    }

    const data = await response.json();  // Extracts the response data
    if (data && data.flashcards) {
      setFlashcards(data.flashcards);  // Updates the flashcards state with the generated flashcards
    }
  } catch (error) {
    console.error("Error generating flashcards:", error);
  }
};

const handleCardClick = (index) => {
  setFlipped((prev) => ({
    ...prev,
    [index]: !prev[index],  // Toggles the flipped state of the flashcard at the given index
  }));
};

const handleOpen = () => {
  setOpen(true);  // Opens the dialog
};

const handleClose = () => {
  setOpen(false);  // Closes the dialog
};

const saveFlashcards = async () => {
  if (!name) {
    alert("Please enter a name");
    return;
  }

  const batch = writeBatch(db);  // Firestore batch for atomic writes
  const userDocRef = doc(collection(db, "users"), user.id);  // User document reference
  const docSnap = await getDoc(userDocRef);

  if (docSnap.exists()) {
    const collectionData = docSnap.data().flashcards || [];
    if (collectionData.find((f) => f.name === name)) {
      alert("Flashcard with this name already exists.");
      return;
    } else {
      collectionData.push({ name });  // Add the new flashcard collection name
      batch.set(userDocRef, { flashcards: collectionData }, { merge: true });
    }
  } else {
    batch.set(userDocRef, { flashcards: [{ name }] });  // Create a new user document if it doesn't exist
  }

  const colRef = collection(userDocRef, name);  // Reference to the flashcard collection
  flashcards.forEach((flashcard) => {
    const cardDocRef = doc(colRef);  // Create a document for each flashcard
    batch.set(cardDocRef, flashcard);  // Save each flashcard
  });

  await batch.commit();  // Commit the batch
  handleClose();
  router.push("/flashcards");  // Redirect to the flashcards page after saving
};

return (
  <Container maxWidth="md">
    <Box sx={{ mt: 4, mb: 6, display: "flex", flexDirection: "column", alignItems: "center" }}>
      <TextField
        label="Enter Text"
        variant="outlined"
        fullWidth
        margin="normal"
        value={text}
        onChange={(e) => setText(e.target.value)}  // Update the text state on input
      />
      <Button variant="contained" onClick={handleSubmit}>
        Generate Flashcards
      </Button>
    </Box>

    {flashcards.length > 0 && (
      <Box sx={{ mt: 4 }}>
        <Typography variant="h5" align="center" gutterBottom>
          Flashcard Preview
        </Typography>
        <Grid container spacing={3}>
          {flashcards.map((flashcard, index) => (
            <Grid item xs={12} sm={6} md={4} key={index}>
              <Card onClick={() => handleCardClick(index)}>
                <CardActionArea>
                  <CardContent>
                    <Typography variant="h6">
                      {flipped[index] ? flashcard.back : flashcard.front}
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Card>
            </Grid>
          ))}
        </Grid>
        <Box sx={{ mt: 4, display: "flex", justifyContent: "center" }}>
          <Button variant="contained" color="secondary" onClick={handleOpen}>
            Save
          </Button>
        </Box>
      </Box>
    )}

    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>Save the Flashcards</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Please enter a name for your Flashcard's Collection
        </DialogContentText>
        <TextField
          autoFocus
          margin="dense"
          label="Collection Name"
          type="text"
          fullWidth
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>Cancel</Button>
        <Button onClick={saveFlashcards}>Save</Button>
      </DialogActions>
    </Dialog>
  </Container>
);