feat: implement certificate encoding and decoding functionality with AES encryption

apps/hackathon/src/app/certificate/[certId]/page.tsx

@@ -0,0 +1,222 @@
+import { FC, ReactElement, useState, useEffect, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { decodeCertificateId } from '../../../utils/certificate';
+import { useTeamById, useTeamSubmission } from '@imphnen-frontend-service/service';
+
+interface DecodedCert {
+  teamId: string;
+  submissionId: string;
+}
+
+const CertificatePage: FC = (): ReactElement => {
+  const { certId } = useParams<{ certId: string }>();
+  const navigate = useNavigate();
+  const [decodedInfo, setDecodedInfo] = useState<DecodedCert | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const teamNameRef = useRef<HTMLHeadingElement>(null);
+  const projectNameRef = useRef<HTMLSpanElement>(null);
+  const [teamNameFontSize, setTeamNameFontSize] = useState('2.25rem');
+  const [projectNameFontSize, setProjectNameFontSize] = useState('1.5rem');
+
+  useEffect(() => {
+    if (certId) {
+      decodeCertificateId(certId)
+        .then(setDecodedInfo)
+        .catch(() => {
+          setError('Invalid certificate ID');
+        });
+    }
+  }, [certId]);
+
+  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(decodedInfo?.teamId || '', !!decodedInfo?.teamId);
+  const { data: submissionData, isLoading: isLoadingSubmission } = useTeamSubmission(
+    decodedInfo?.teamId || '',
+    !!decodedInfo?.teamId
+  );
+
+  const team = teamData?.data;
+  const submission = submissionData?.data;
+
+  const isLoading = (!decodedInfo && !error) || isLoadingTeam || isLoadingSubmission;
+
+  // Dynamic font sizing: shrink by 2px if height exceeds 80px
+  useEffect(() => {
+    const adjustFontSize = (element: HTMLElement | null, maxHeight: number, startSize: number, setter: (size: string) => void) => {
+      if (!element) return;
+
+      let currentSize = startSize;
+      element.style.fontSize = `${currentSize}px`;
+
+      while (element.offsetHeight > maxHeight && currentSize > 1) {
+        currentSize -= 2;
+        element.style.fontSize = `${currentSize}px`;
+      }
+
+      setter(`${currentSize}px`);
+    };
+
+    const timer = setTimeout(() => {
+      adjustFontSize(teamNameRef.current, 80, 36, setTeamNameFontSize);
+      adjustFontSize(projectNameRef.current, 80, 24, setProjectNameFontSize);
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [team?.name, submission?.project_name]);
+
+  if (error || !certId) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-6xl mb-4">❌</div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Invalid Certificate</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          {error || 'The certificate ID is invalid or malformed.'}
+        </p>
+        <Button onClick={() => navigate('/')}>Back to Home</Button>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <div className="text-gray-600 dark:text-gray-400">Loading certificate...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!submission || submission.id !== decodedInfo?.submissionId) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-6xl mb-4">📄</div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Certificate Not Found
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          The submission associated with this certificate could not be found.
+        </p>
+        <Button onClick={() => navigate('/')}>Back to Home</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Certificate</h1>
+              <p className="text-gray-600 dark:text-gray-400 mt-1">{team?.name}</p>
+            </div>
+            <Button variant="secondary" onClick={() => navigate(`/teams/${decodedInfo?.teamId}/submission`)}>
+              Back to Submission
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Certificate Content */}
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        {/* Certificate Container */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 overflow-hidden">
+          {/* Certificate Design Area */}
+          <div
+            id="certificate"
+            className="p-12 sm:p-16 bg-linear-to-br from-slate-50 to-slate-100 dark:from-gray-800 dark:to-gray-900 border-4 border-amber-600 dark:border-amber-500 min-h-[500px] flex flex-col items-center justify-center space-y-6"
+          >
+            {/* Decorative Element */}
+            <div className="text-5xl">🏆</div>
+
+            {/* Certificate Title */}
+            <h2 className="text-4xl sm:text-5xl font-bold text-center text-amber-900 dark:text-amber-100">
+              Certificate of Participation
+            </h2>
+
+            {/* Decorative Line */}
+            <div className="w-32 h-1 bg-linear-to-r from-amber-600 to-amber-400"></div>
+
+            {/* Team Name */}
+            <div className="text-center space-y-2 w-full px-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm uppercase tracking-widest">
+                This Certificate is Proudly Presented To
+              </p>
+              <h3 ref={teamNameRef} className="font-bold text-gray-900 dark:text-white wrap-break-word" style={{ fontSize: teamNameFontSize, lineHeight: '1.2', wordBreak: 'break-word' }}>
+                {team?.name}
+              </h3>
+            </div>
+
+            {/* Achievement Text */}
+            <div className="text-center max-w-2xl w-full px-4">
+              <p className="text-gray-700 dark:text-gray-300 text-base sm:text-lg">
+                For successfully submitting their hackathon project
+              </p>
+                <p ref={projectNameRef} className="font-bold text-amber-900 dark:text-amber-100 wrap-break-word block" style={{ fontSize: projectNameFontSize, lineHeight: '1.3', wordBreak: 'break-word' }}>
+                  {submission.project_name}
+                </p>
+            </div>
+
+            {/* Submission Details */}
+            <div className="grid grid-cols-2 gap-8 pt-6 text-center w-full max-w-md">
+              <div>
+                <p className="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-widest mb-1">
+                  Submission ID
+                </p>
+                <p className="text-xs font-mono text-gray-900 dark:text-white break-all">
+                  {submission.id}
+                </p>
+              </div>
+              <div>
+                <p className="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-widest mb-1">
+                  Submitted
+                </p>
+                <p className="text-xs text-gray-900 dark:text-white">
+                  {submission.submitted_at
+                    ? new Date(submission.submitted_at).toLocaleDateString('id-ID')
+                    : 'N/A'}
+                </p>
+              </div>
+            </div>
+
+            {/* Footer Text */}
+            <p className="text-xs text-gray-600 dark:text-gray-400 pt-4 italic">
+              Authenticated Certificate - {new Date().getFullYear()}
+            </p>
+          </div>
+
+          {/* Actions */}
+          <div className="bg-gray-50 dark:bg-gray-800 p-6 flex gap-3 justify-center">
+            <Button
+              variant="secondary"
+              onClick={() => window.print()}
+              className="flex items-center gap-2"
+            >
+              🖨️ Print Certificate
+            </Button>
+            <Button
+              onClick={() => navigate(`/teams/${decodedInfo?.teamId}/submission`)}
+              variant="secondary"
+            >
+              View Submission
+            </Button>
+          </div>
+        </div>
+
+        {/* Info Box */}
+        <div className="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
+          <h3 className="font-bold text-blue-900 dark:text-blue-100 mb-2">Certificate Information</h3>
+          <p className="text-sm text-blue-800 dark:text-blue-200">
+            This certificate is a digital record of your hackathon participation and project submission.
+            You can print or save this page as a PDF for your records.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CertificatePage;

apps/hackathon/src/app/teams/[teamId]/submission/page.tsx

@@ -2,6 +2,7 @@ import { FC, ReactElement } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useNavigate, useParams } from 'react-router';
 import { useTeamById, useTeamSubmission } from '@imphnen-frontend-service/service';
+import { encodeCertificateId } from '../../../../utils/certificate';
 
 const SubmissionViewPage: FC = (): ReactElement => {
   const { teamId } = useParams<{ teamId: string }>();
@@ -15,18 +16,18 @@ const SubmissionViewPage: FC = (): ReactElement => {
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
-        <div className="text-gray-600 dark:text-neutral-400">Loading submission...</div>
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-gray-600 dark:text-gray-400">Loading submission...</div>
       </div>
     );
   }
 
   if (!submission) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
         <div className="text-6xl mb-4">📄</div>
         <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">No Submission Yet</h2>
-        <p className="text-gray-600 dark:text-neutral-400 mb-4">Your team hasn't submitted a project</p>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">Your team hasn't submitted a project</p>
         <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
       </div>
     );
@@ -43,13 +44,13 @@ const SubmissionViewPage: FC = (): ReactElement => {
     : 'Not submitted';
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
-      <div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-700">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
           <div className="flex items-center justify-between">
             <div>
               <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Project Submission</h1>
-              <p className="text-gray-600 dark:text-neutral-400 mt-1">{team?.name}</p>
+              <p className="text-gray-600 dark:text-gray-400 mt-1">{team?.name}</p>
             </div>
             <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
               Back to Team
@@ -101,9 +102,37 @@ const SubmissionViewPage: FC = (): ReactElement => {
           </div>
         )}
 
-        <div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden">
+        {/* Certificate Banner - Only show when submission is submitted */}
+        {submission.status === 'submitted' && (
+          <div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-400 dark:border-amber-500 rounded-lg p-6 mb-6">
+            <div className="flex items-center justify-between flex-wrap gap-4">
+              <div className="flex items-center space-x-3 flex-1 min-w-0">
+                <span className="text-4xl shrink-0">🏆</span>
+                <div className="min-w-0">
+                  <h3 className="font-bold text-amber-900 dark:text-amber-100 text-lg">
+                    View Your Certificate
+                  </h3>
+                  <p className="text-amber-700 dark:text-amber-300 text-sm">
+                    Congratulations! Your certificate is ready to download and share.
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={async () => {
+                  const certId = await encodeCertificateId(teamId || '', submission.id);
+                  navigate(`/certificate/${encodeURIComponent(certId)}`);
+                }}
+                className="shrink-0 px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
+              >
+                Get Certificate
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden">
           {/* Project Header */}
-          <div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-8">
+          <div className="bg-linear-to-r from-blue-600 to-blue-800 text-white p-8">
             <h2 className="text-3xl font-bold mb-2">{submission.project_name}</h2>
             <p className="text-blue-100">Team: {team?.name}</p>
           </div>
@@ -113,8 +142,8 @@ const SubmissionViewPage: FC = (): ReactElement => {
             {/* Description */}
             <div>
               <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Project Description</h3>
-              <div className="bg-gray-50 dark:bg-neutral-800 rounded-lg p-4">
-                <p className="text-gray-700 dark:text-neutral-300 whitespace-pre-wrap">{submission.description}</p>
+              <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+                <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{submission.description}</p>
               </div>
             </div>
 
@@ -170,7 +199,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
                       <img
                         src={url}
                         alt={`Screenshot ${index + 1}`}
-                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-neutral-700 hover:border-blue-500 dark:hover:border-primary-500 transition-colors cursor-pointer"
+                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-primary-500 transition-colors cursor-pointer"
                       />
                     </a>
                   ))}
@@ -179,11 +208,11 @@ const SubmissionViewPage: FC = (): ReactElement => {
             )}
 
             {/* Submission Info */}
-            <div className="bg-gray-50 dark:bg-neutral-800 rounded-lg p-4 border-t-4 border-blue-600 dark:border-primary-500">
+            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border-t-4 border-blue-600 dark:border-primary-500">
               <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-2">Submission Information</h3>
               <div className="grid gap-2 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-gray-600 dark:text-neutral-400">Status:</span>
+                  <span className="text-gray-600 dark:text-gray-400">Status:</span>
                   <span className={`font-medium ${
                     submission.status === 'submitted'
                       ? 'text-green-600 dark:text-green-400'
@@ -199,11 +228,11 @@ const SubmissionViewPage: FC = (): ReactElement => {
                   </span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-600 dark:text-neutral-400">Submitted:</span>
+                  <span className="text-gray-600 dark:text-gray-400">Submitted:</span>
                   <span className="font-medium text-gray-900 dark:text-white">{submittedDate}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-600 dark:text-neutral-400">Submission ID:</span>
+                  <span className="text-gray-600 dark:text-gray-400">Submission ID:</span>
                   <span className="font-medium text-gray-900 dark:text-white font-mono text-xs">
                     {submission.id}
                   </span>

apps/hackathon/src/app/winners/page.tsx

@@ -0,0 +1,318 @@
+import { FC, ReactElement } from 'react';
+import { useNavigate } from 'react-router';
+import { useWinners } from '@imphnen-frontend-service/service';
+
+const WinnerPage: FC = (): ReactElement => {
+  const navigate = useNavigate();
+  const { data, isLoading, error } = useWinners();
+
+  const winners = data?.data ?? [];
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <div className="text-gray-600 dark:text-gray-400">
+            Loading winners...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-6xl mb-4">⚠️</div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          Error Loading Winners
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          Unable to load winners at this time. Please try again later.
+        </p>
+      </div>
+    );
+  }
+
+  // Sort winners by rank
+  const sortedWinners = [...winners].sort((a, b) => a.rank - b.rank);
+
+  // Medal emojis for top 3
+  const getMedalEmoji = (rank: number) => {
+    switch (rank) {
+      case 1:
+        return '🥇';
+      case 2:
+        return '🥈';
+      case 3:
+        return '🥉';
+      default:
+        return '🏆';
+    }
+  };
+
+  // Get rank color
+  const getRankColor = (rank: number) => {
+    switch (rank) {
+      case 1:
+        return 'from-yellow-400 to-yellow-600';
+      case 2:
+        return 'from-gray-300 to-gray-500';
+      case 3:
+        return 'from-amber-600 to-amber-800';
+      default:
+        return 'from-blue-500 to-blue-700';
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="text-center">
+            <div className="text-6xl mb-4">🏆</div>
+            <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+              Hackathon Winners
+            </h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Congratulations to all the winning teams!
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Winners List */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {winners.length === 0 ? (
+          <div className="text-center py-16">
+            <div className="text-6xl mb-4">🎯</div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              No Winners Announced Yet
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              Winners will be announced here once the hackathon concludes.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {/* Top 3 Winners - Mobile View */}
+            <div className="md:hidden space-y-6">
+              {[1, 2, 3].map((position) => {
+                const winner = sortedWinners[position - 1];
+
+                if(!winner) return null;
+
+                return (
+                  <div
+                    key={winner.id}
+                    className={`bg-white dark:bg-gray-800 rounded-lg p-3 shadow-lg ${
+                      getRankColor(winner.rank).includes('yellow')
+                        ? 'border-4 border-yellow-400 dark:border-yellow-600'
+                        : getRankColor(winner.rank).includes('gray')
+                        ? 'border-4 border-gray-400 dark:border-gray-600'
+                        : 'border-4 border-amber-600 dark:border-amber-500'
+                    }}`}
+                  >
+                    <div className="flex items-center gap-4">
+                      <div
+                        className={`aspect-square p-1 rounded-full bg-linear-to-br ${getRankColor(
+                          winner.rank
+                        )} flex items-center justify-center text-white font-bold text-2xl`}
+                      >
+                        <div className="text-4xl">
+                          {getMedalEmoji(winner.rank)}
+                        </div>
+                      </div>
+
+                      {winner.team.logo && (
+                        <img
+                          src={winner.team.logo}
+                          alt={`${winner.team.name} logo`}
+                          className="w-20 h-20 rounded-full object-cover border-3 border-white dark:border-gray-700 shadow-lg"
+                        />
+                      )}
+
+                      <div className="flex-1">
+                        <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+                          {winner.team.name}
+                        </h2>
+                        <p className="text-sm text-gray-600 dark:text-gray-400">
+                          {winner.team.city}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Top 3 Winners - Tablet/Desktop Podium View */}
+            <div className="hidden md:flex gap-8 items-end justify-center w-full">
+              {[2, 1, 3].map((position) => {
+                const winner = sortedWinners[position - 1];
+                if(!winner) return null;
+                return (
+                  <div
+                    key={winner.id}
+                    className="w-full max-w-xs flex flex-col items-center space-y-4"
+                  >
+                    <div className="text-5xl">{getMedalEmoji(winner.rank)}</div>
+
+                    {/* Team Logo */}
+                    {winner.team.logo && (
+                      <img
+                        src={winner.team.logo}
+                        alt={`${winner.team.name} logo`}
+                        className="w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-lg"
+                      />
+                    )}
+
+                    <div className="text-center px-2">
+                      <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+                        {winner.team.name}
+                      </h2>
+                      <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        {winner.team.city}
+                      </p>
+                    </div>
+
+                    {/* Podium */}
+                    <div
+                      className={`${
+                        winner.rank === 1
+                          ? 'h-42 bg-yellow-500'
+                          : winner.rank === 2
+                          ? 'h-32 bg-gray-400'
+                          : 'h-16 bg-amber-600'
+                      } w-full flex items-end justify-center rounded-t-lg shadow-lg`}
+                    >
+                      <div className="text-white font-bold text-3xl pb-4">
+                        #{winner.rank}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Ranks 4-23: Prize Winners */}
+            {sortedWinners.filter((w) => w.rank >= 4 && w.rank <= 23).length >
+              0 && (
+              <div className="mt-12">
+                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
+                  Favorite
+                </h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {sortedWinners
+                    .filter((w) => w.rank >= 4 && w.rank <= 23)
+                    .map((winner) => (
+                      <div
+                        key={winner.id}
+                        className="bg-white dark:bg-gray-800 border-2 border-gray-400 dark:border-gray-600 rounded-lg p-4 hover:shadow-lg transition-shadow"
+                      >
+                        <div className="flex items-center gap-4">
+                          <div className="shrink-0">
+                            <div className="w-12 h-12 rounded-full bg-linear-to-br from-gray-400 to-gray-600 flex items-center justify-center text-white font-bold text-lg">
+                              #{winner.rank}
+                            </div>
+                          </div>
+
+                          {winner.team.logo && (
+                            <img
+                              src={winner.team.logo}
+                              alt={`${winner.team.name} logo`}
+                              className="w-16 h-16 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"
+                            />
+                          )}
+
+                          <div className="flex-1 min-w-0">
+                            <h3 className="font-bold text-gray-900 dark:text-white truncate">
+                              {winner.team.name}
+                            </h3>
+                            <p className="text-sm text-gray-600 dark:text-gray-400">
+                              {winner.team.city}
+                            </p>
+                            <div className="flex items-center gap-1 mt-1">
+                              <span className="text-xs bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 px-2 py-1 rounded-full">
+                                🎁 Prize Winner
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )}
+
+            {/* Rank 24+: Remaining Participants */}
+            {sortedWinners.filter((w) => w.rank >= 24).length > 0 && (
+              <div className="mt-12">
+                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
+                  All Participants
+                </h2>
+                <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                  <div className="divide-y divide-gray-200 dark:divide-gray-700">
+                    {sortedWinners
+                      .filter((w) => w.rank >= 24)
+                      .map((participant) => (
+                        <div
+                          key={participant.id}
+                          className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+                        >
+                          <div className="flex items-center gap-4">
+                            <div className="shrink-0 w-10 text-center">
+                              <span className="text-sm font-semibold text-gray-600 dark:text-gray-400">
+                                #{participant.rank}
+                              </span>
+                            </div>
+
+                            {participant.team.logo && (
+                              <img
+                                src={participant.team.logo}
+                                alt={`${participant.team.name} logo`}
+                                className="w-12 h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"
+                              />
+                            )}
+
+                            <div className="flex-1 min-w-0">
+                              <h3 className="font-semibold text-gray-900 dark:text-white">
+                                {participant.team.name}
+                              </h3>
+                              <p className="text-sm text-gray-600 dark:text-gray-400">
+                                {participant.team.city}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Footer Info */}
+      {winners.length > 0 && (
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
+            <h3 className="font-bold text-blue-900 dark:text-blue-100 mb-2">
+              Congratulations! 🎉
+            </h3>
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              Thank you to all participants for making this hackathon a success.
+              Every project and idea contributed to an incredible showcase of
+              innovation and creativity.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WinnerPage;

apps/hackathon/src/utils/aesclient.ts

@@ -0,0 +1,86 @@
+const enc = new TextEncoder();
+const dec = new TextDecoder();
+
+function randBytes(len: number): Uint8Array {
+  const b = new Uint8Array(len);
+  crypto.getRandomValues(b);
+  return b;
+}
+
+function bufToBase64(buf: ArrayBuffer): string {
+  const bytes = new Uint8Array(buf);
+  let s = '';
+  for (let i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+  return btoa(s);
+}
+
+function base64ToBuf(b64: string): ArrayBuffer {
+  const s = atob(b64);
+  const arr = new Uint8Array(s.length);
+  for (let i = 0; i < s.length; i++) arr[i] = s.charCodeAt(i);
+  return arr.buffer;
+}
+
+async function deriveKeyFromPassphrase(passphrase: string, salt: Uint8Array, iterations = 100_000) {
+  const passKey = await crypto.subtle.importKey(
+    'raw',
+    enc.encode(passphrase),
+    { name: 'PBKDF2' },
+    false,
+    ['deriveKey']
+  );
+
+  return crypto.subtle.deriveKey(
+    {
+      name: 'PBKDF2',
+      salt,
+      iterations,
+      hash: 'SHA-256'
+    },
+    passKey,
+    { name: 'AES-GCM', length: 256 },
+    false,
+    ['encrypt', 'decrypt']
+  );
+}
+
+/**
+ * Encrypts plaintext with passphrase -> returns base64(salt||iv||ciphertext)
+ */
+export async function encryptText(plaintext: string, passphrase: string) {
+  const salt = randBytes(16); // 128-bit salt
+  const iv = randBytes(12);   // 96-bit IV recommended for GCM
+  const key = await deriveKeyFromPassphrase(passphrase, salt);
+
+  const cipher = await crypto.subtle.encrypt(
+    { name: 'AES-GCM', iv },
+    key,
+    enc.encode(plaintext)
+  );
+
+  // concat salt + iv + ciphertext
+  const out = new Uint8Array(salt.length + iv.length + cipher.byteLength);
+  out.set(salt, 0);
+  out.set(iv, salt.length);
+  out.set(new Uint8Array(cipher), salt.length + iv.length);
+
+  return bufToBase64(out.buffer);
+}
+
+/**
+ * Decrypts base64(salt||iv||ciphertext) with passphrase -> plaintext
+ */
+export async function decryptText(b64combined: string, passphrase: string) {
+  const combined = new Uint8Array(base64ToBuf(b64combined));
+  const salt = combined.slice(0, 16);
+  const iv = combined.slice(16, 28);
+  const cipher = combined.slice(28);
+
+  const key = await deriveKeyFromPassphrase(passphrase, salt);
+  const plainBuf = await crypto.subtle.decrypt(
+    { name: 'AES-GCM', iv },
+    key,
+    cipher
+  );
+  return dec.decode(plainBuf);
+}

apps/hackathon/src/utils/certificate.ts

@@ -0,0 +1,41 @@
+import { decryptText, encryptText } from "./aesclient";
+
+const SECRET_KEY = 'imphnen-hackathon-2025';
+
+/**
+ * Encode teamId and submissionId into a certificate ID
+ * Uses base64 encoding for simple obfuscation
+ * @param teamId - The team ID
+ * @param submissionId - The submission ID
+ * @returns Encoded certificate ID
+ */
+export const encodeCertificateId = async (teamId: string, submissionId: string): Promise<string> => {
+  const combined = `${teamId}::${submissionId}`;
+  return encryptText(combined, SECRET_KEY);
+};
+
+/**
+ * Decode certificate ID back to teamId and submissionId
+ * @param certId - The encoded certificate ID
+ * @returns Object containing teamId and submissionId
+ */
+export const decodeCertificateId = async (certId: string): Promise<{ teamId: string; submissionId: string }> => {
+  try {
+    const decoded = await decryptText(certId, SECRET_KEY);
+    const [teamId, submissionId] = decoded.split('::');
+    return { teamId, submissionId };
+  } catch {
+    throw new Error('Invalid certificate ID');
+  }
+};
+
+/**
+ * For development: Create a certId using created_at timestamp
+ * @param teamId - The team ID
+ * @param createdAt - The creation timestamp
+ * @returns Encoded certificate ID
+ */
+export const encodeCertificateIdWithTimestamp = (teamId: string, createdAt: string): string => {
+  const combined = `${teamId}::${createdAt}`;
+  return Buffer.from(combined).toString('base64');
+};

libs/service/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './mentors';
 export * from './upload';
 export * from './teams';
 export * from './messages';
+export * from './winners';

libs/service/src/hooks/winners/index.ts

@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query';
+import { hackathonApi, HackathonApiResponse } from '../../api/hackathon';
+
+// Query keys
+export const winnerKeys = {
+  all: ['winners'] as const,
+  lists: () => [...winnerKeys.all, 'list'] as const,
+};
+
+// API response types
+interface Team {
+  id: string;
+  name: string;
+  description: string;
+  city: string;
+  visibility: string;
+  logo: string;
+  banner: string;
+  leader_id: string;
+  created_at: string;
+  updated_at: string;
+}
+
+interface Winner {
+  id: string;
+  team_id: string;
+  team: Team;
+  rank: number;
+  prize: string;
+  announced_at: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export const useWinners = () => {
+  return useQuery<HackathonApiResponse<Winner[]>>({
+    queryKey: winnerKeys.lists(),
+    queryFn: async () => {
+      const response = await hackathonApi.get('/winners');
+      return response.data;
+    },
+  });
+};