feat: add competition details and API integration, including new fields and loading states

Author: abdulkarim1422

fe-main/.env.example

@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:5000

fe-main/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# environment
+.env

fe-main/src/components/CompetitionCard.tsx

@@ -15,6 +15,10 @@ export interface CompetitionProps {
   deadline: string;
   teamSize: string;
   prize: string;
+  tkNumber?: string;
+  t3kysNumber?: string;
+  years?: number[];
+  applicationLink?: string;
 }
 
 export default function CompetitionCard({ competition, index }: { competition: CompetitionProps; index: number }) {
@@ -82,6 +86,23 @@ export default function CompetitionCard({ competition, index }: { competition: C
             >
               {statusText[competition.status]}
             </Badge>
+            <div className="absolute top-4 left-4 rtl:right-4 rtl:left-auto z-20 flex flex-wrap gap-2 max-w-[70%]">
+              {competition.tkNumber && (
+                <Badge variant="outline" className="backdrop-blur-md border-primary/30 text-primary">
+                  {t("card.tkNumber")}: {competition.tkNumber}
+                </Badge>
+              )}
+              {competition.t3kysNumber && (
+                <Badge variant="outline" className="backdrop-blur-md border-primary/30 text-primary">
+                  {t("card.t3kysNumber")}: {competition.t3kysNumber}
+                </Badge>
+              )}
+              {competition.years && competition.years.length > 0 && (
+                <Badge variant="outline" className="backdrop-blur-md border-primary/30 text-primary">
+                  {t("card.years")}: {competition.years.join(", ")}
+                </Badge>
+              )}
+            </div>
             <div className="absolute bottom-4 left-4 rtl:right-4 rtl:left-auto z-20">
               <span className="text-primary text-xs font-bold uppercase tracking-wider mb-1 block">
                 {competition.category}
@@ -107,6 +128,16 @@ export default function CompetitionCard({ competition, index }: { competition: C
                 <span>{t('card.prizePool')}: {competition.prize}</span>
               </div>
             </div>
+            {competition.applicationLink && (
+              <div className="mt-4 flex items-center justify-between text-sm text-muted-foreground">
+                <span>{t("card.applyLink")}</span>
+                <Button asChild variant="link" className="px-0 text-primary">
+                  <a href={competition.applicationLink} target="_blank" rel="noreferrer">
+                    {t("card.applyLink")}
+                  </a>
+                </Button>
+              </div>
+            )}
           </CardContent>
 
           <CardFooter className="pb-6 pt-0">

fe-main/src/lib/competitions.ts

@@ -0,0 +1,66 @@
+import { type Language } from "@/lib/translations";
+
+export interface CompetitionApi {
+  id: number;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  image_path: string | null;
+  tk_number: string | null;
+  t3kys_number: string | null;
+  application_link_tr: string | null;
+  application_link_en: string | null;
+  application_link_ar: string | null;
+  tr_name: string | null;
+  tr_description: string | null;
+  tr_link: string | null;
+  en_name: string | null;
+  en_description: string | null;
+  en_link: string | null;
+  ar_name: string | null;
+  ar_description: string | null;
+  ar_link: string | null;
+  years: number[];
+  min_member: number | null;
+  max_member: number | null;
+}
+
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "";
+
+export const buildApiUrl = (path: string) => {
+  if (path.startsWith("http")) return path;
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+  return `${API_BASE_URL}${normalizedPath}`;
+};
+
+const localeOrder = (language: Language): Language[] => {
+  const order: Language[] = [language, "en", "tr", "ar"];
+  return Array.from(new Set(order));
+};
+
+export const pickLocalizedField = (
+  competition: CompetitionApi,
+  language: Language,
+  suffix: "name" | "description" | "link" | "application_link",
+): string | null => {
+  for (const locale of localeOrder(language)) {
+    const key = `${locale}_${suffix}` as keyof CompetitionApi;
+    const value = competition[key];
+    if (typeof value === "string" && value.trim()) {
+      return value;
+    }
+  }
+  return null;
+};
+
+export const formatTeamSize = (
+  minMember: number | null,
+  maxMember: number | null,
+  membersLabel: string,
+  fallback: string,
+) => {
+  if (minMember && maxMember) return `${minMember}-${maxMember} ${membersLabel}`;
+  if (minMember && !maxMember) return `${minMember}+ ${membersLabel}`;
+  if (!minMember && maxMember) return `${membersLabel} <= ${maxMember}`;
+  return fallback;
+};

fe-main/src/lib/translations.ts

@@ -32,7 +32,9 @@ export const translations = {
       transportation: "Transportation",
       noResults: "No competitions found",
       tryAdjusting: "Try adjusting your search or category filter.",
-      reset: "Reset Filters"
+      reset: "Reset Filters",
+      loading: "Loading competitions...",
+      error: "Unable to load competitions."
     },
     card: {
       applicationsOpen: "Applications Open",
@@ -42,13 +44,27 @@ export const translations = {
       teamSize: "Team Size",
       prizePool: "Prize Pool",
       viewDetails: "View Details",
-      members: "Members"
+      members: "Members",
+      notSpecified: "Not specified",
+      tkNumber: "TK No",
+      t3kysNumber: "T3KYS No",
+      years: "Years",
+      applyLink: "Apply"
     },
     cta: {
       title: "Ready to Change the World?",
       description: "Don't miss the chance to showcase your projects at the world's biggest technology festival. Applications are closing soon!",
       register: "Register Now"
     },
+    detail: {
+      noDescription: "Description will be added soon.",
+      noYears: "Years not set",
+      loading: "Loading competition details...",
+      error: "Unable to load this competition.",
+      deadlineFallback: "To be announced",
+      prizeFallback: "Prize to be announced",
+      yearsLabel: "Years"
+    },
     footer: {
       description: "The world's largest aviation, space, and technology festival. Building a technology-producing Turkey.",
       quickLinks: "Quick Links",
@@ -99,7 +115,9 @@ export const translations = {
       transportation: "Ulaşım",
       noResults: "Yarışma bulunamadı",
       tryAdjusting: "Aramanızı veya kategori filtrenizi değiştirmeyi deneyin.",
-      reset: "Filtreleri Sıfırla"
+      reset: "Filtreleri Sıfırla",
+      loading: "Yarışmalar yükleniyor...",
+      error: "Yarışmalar yüklenemedi."
     },
     card: {
       applicationsOpen: "Başvurular Açık",
@@ -109,13 +127,27 @@ export const translations = {
       teamSize: "Takım Boyutu",
       prizePool: "Ödül Havuzu",
       viewDetails: "Detayları Gör",
-      members: "Üye"
+      members: "Üye",
+      notSpecified: "Belirtilmedi",
+      tkNumber: "TK No",
+      t3kysNumber: "T3KYS No",
+      years: "Yıllar",
+      applyLink: "Başvur"
     },
     cta: {
       title: "Dünyayı Değiştirmeye Hazır Mısın?",
       description: "Projelerinizi dünyanın en büyük teknoloji festivalinde sergileme şansını kaçırmayın. Başvurular yakında kapanıyor!",
       register: "Hemen Kayıt Ol"
     },
+    detail: {
+      noDescription: "Açıklama yakında eklenecek.",
+      noYears: "Yıllar ayarlanmadı",
+      loading: "Yarışma detayları yükleniyor...",
+      error: "Bu yarışma yüklenemedi.",
+      deadlineFallback: "Duyurulacak",
+      prizeFallback: "Ödül duyurulacak",
+      yearsLabel: "Yıllar"
+    },
     footer: {
       description: "Dünyanın en büyük havacılık, uzay ve teknoloji festivali. Teknoloji üreten bir Türkiye inşa ediyoruz.",
       quickLinks: "Hızlı Bağlantılar",
@@ -166,7 +198,9 @@ export const translations = {
       transportation: "النقل",
       noResults: "لم يتم العثور على مسابقات",
       tryAdjusting: "حاول تعديل البحث أو تصفية الفئات.",
-      reset: "إعادة تعيين المرشحات"
+      reset: "إعادة تعيين المرشحات",
+      loading: "جارٍ تحميل المسابقات...",
+      error: "تعذر تحميل المسابقات."
     },
     card: {
       applicationsOpen: "التطبيقات مفتوحة",
@@ -176,13 +210,27 @@ export const translations = {
       teamSize: "حجم الفريق",
       prizePool: "مجموع الجوائز",
       viewDetails: "عرض التفاصيل",
-      members: "أعضاء"
+      members: "أعضاء",
+      notSpecified: "غير محدد",
+      tkNumber: "رقم TK",
+      t3kysNumber: "رقم T3KYS",
+      years: "الأعوام",
+      applyLink: "تقديم"
     },
     cta: {
       title: "هل أنت مستعد لتغيير العالم؟",
       description: "لا تفوت فرصة عرض مشاريعك في أكبر مهرجان للتكنولوجيا في العالم. التسجيل يغلق قريباً!",
       register: "سجل الآن"
     },
+    detail: {
+      noDescription: "سيضاف الوصف قريباً.",
+      noYears: "لم يتم تحديد الأعوام",
+      loading: "جارٍ تحميل تفاصيل المسابقة...",
+      error: "تعذر تحميل هذه المسابقة.",
+      deadlineFallback: "سيتم الإعلان لاحقاً",
+      prizeFallback: "سيتم الإعلان عن الجائزة لاحقاً",
+      yearsLabel: "الأعوام"
+    },
     footer: {
       description: "أكبر مهرجان للطيران والفضاء والتكنولوجيا في العالم. نبني تركيا منتجة للتكنولوجيا.",
       quickLinks: "روابط سريعة",