Move randomization from backend to client-side

- Remove order_by('?') from backend to avoid database overhead
- Implement Fisher-Yates shuffle in QuestionCarousel component
- Provides true per-visit randomization instead of per-cache-refresh
- Keeps backend query deterministic and cache-friendly

Co-authored-by: Hlib <[email protected]>

Author: github-actions[bot]

front_end/src/app/(main)/(home)/components/questions_carousel.tsx

@@ -4,7 +4,7 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 
 import Carousel, { CarouselItem } from "@/components/carousel";
 import ForecastCard from "@/components/forecast_card";
@@ -19,6 +19,16 @@ type Props = {
 const QuestionCarousel: FC<Props> = ({ posts }) => {
   const t = useTranslations();
 
+  // Randomize posts on each render using Fisher-Yates shuffle
+  const shuffledPosts = useMemo(() => {
+    const array = [...posts];
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+  }, [posts]);
+
   return (
     <Carousel
       className="flex flex-col gap-4 md:gap-12"
@@ -34,7 +44,7 @@ const QuestionCarousel: FC<Props> = ({ posts }) => {
         </div>
       }
     >
-      {posts.map((p) => (
+      {shuffledPosts.map((p) => (
         <CarouselItem key={p.id}>
           <ForecastCard
             post={p}

posts/views.py

@@ -123,9 +123,6 @@ def posts_list_homeage_api_view(request):
 
     qs = get_posts_feed(Post.objects.all(), show_on_homepage=True)
 
-    # Randomize the order of posts
-    qs = qs.order_by('?')
-
     return Response(
         serialize_post_many(qs, with_cp=True, include_cp_history=True, group_cutoff=3)
     )