Mega Fullstack Project

This project continues to expand with AI, multiplayer functionality, and real-time data processing. Below are some of the latest feature highlights with direct backend and frontend implementations.

AI-Powered News Aggregation

The About page now dynamically fetches real-time news updates via an API. The backend processes requests, ensuring reliability, while the frontend updates UI content.

Backend:

router.get("/news", async (req, res) => {
  try {
    const news = await fetchNewsFromAPI();
    res.json({ results: news });
  } catch (error) {
    res.status(500).json({ error: "Failed to fetch news" });
  }
});

Frontend:

useEffect(() => {
  const fetchNews = async () => {
    try {
      const response = await axios.get("/api/news");
      setNewsArticles(response.data.results);
    } catch (error) {
      setError("Failed to load news. Try again later.");
    }
  };
  fetchNews();
}, []);

---

Multiplayer Chatrooms

Users can now join public chat rooms and send real-time messages. The backend manages room sessions and broadcasting, while the frontend dynamically updates chat feeds.

Backend:

socket.on("send_message", async (data) => {
  const { room, user, message } = data;
  io.to(room).emit("message", { user, text: message });
});

Frontend:

socket.on("message", (data) => {
  setMessages((prev) => [...prev, data]);
});

---

SnapQuest AI Image Recognition

SnapQuest now enables users to submit images for AI classification, leveraging TensorFlow.js in the frontend and database tracking in the backend.

Backend:

router.post("/snapquest/upload", async (req, res) => {
  const { username, challenge } = req.body;
  await SnapQuestScore.create({ username, challenge, score: 1 });
  res.json({ success: true });
});

Frontend:

const classifyDrawing = async () => {
  const imgTensor = tf.browser.fromPixels(canvasRef.current)
    .resizeNearestNeighbor([224, 224])
    .toFloat()
    .expandDims();
  const predictions = await model.classify(imgTensor);
  setPrediction(predictions[0].className);
};

---

Next Steps

• Expanding AI moderation and NPC interactions in chatrooms.
• Adding more game mechanics for multiplayer quests in chatrooms.
• Optimizing API response times for enhanced performance.

This project continues to evolve, with more updates coming soon.