From efadaa691845e39f0bb1229eb6990cbc7a98e251 Mon Sep 17 00:00:00 2001
From: Mohammad Hariri <moh.050196@gmail.com>
Date: Sun, 19 Apr 2026 12:57:03 +0200
Subject: [PATCH] fix: guard optional objectives/technologies fields at type
 and render layer

---
 src/data/loaders/portfolio.ts   | 6 +++++-
 src/routes/experience/$slug.tsx | 8 ++++----
 src/routes/index.tsx            | 8 ++++----
 src/types/strapi.ts             | 4 ++--
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/data/loaders/portfolio.ts b/src/data/loaders/portfolio.ts
index 0cf8ef3..7c0f8cc 100644
--- a/src/data/loaders/portfolio.ts
+++ b/src/data/loaders/portfolio.ts
@@ -17,7 +17,11 @@ export const fetchExperiences = createServerFn({ method: 'GET' }).handler(
       throw new Error(`Strapi request failed: ${res.status} ${res.url}`)
     const json = (await res.json()) as { data: TExperience[] }
     console.log(`[Strapi] ← GET ${url} (${json.data.length} items)`)
-    return json.data
+    return json.data.map((item) => ({
+      ...item,
+      objectives: item.objectives ?? [],
+      technologies: item.technologies ?? [],
+    }))
   },
 )
 
diff --git a/src/routes/experience/$slug.tsx b/src/routes/experience/$slug.tsx
index 88da3a4..2a92cd3 100644
--- a/src/routes/experience/$slug.tsx
+++ b/src/routes/experience/$slug.tsx
@@ -88,9 +88,9 @@ function ExperienceDetailPage() {
         </div>
 
         {/* Technologies */}
-        {exp.technologies.length > 0 && (
+        {(exp.technologies ?? []).length > 0 && (
           <div className="mt-5 flex flex-wrap gap-1.5">
-            {exp.technologies.map((tech) => (
+            {(exp.technologies ?? []).map((tech) => (
               <TechChip key={tech.id} label={tech.name} />
             ))}
           </div>
@@ -98,12 +98,12 @@ function ExperienceDetailPage() {
       </section>
 
       {/* ── Objectives ────────────────────────────────────── */}
-      {exp.objectives.length > 0 && (
+      {(exp.objectives ?? []).length > 0 && (
         <section className="mt-10">
           <h2 className="island-kicker mb-4">Responsibilities</h2>
           <div className="island-shell feature-card rounded-2xl p-6">
             <ul className="ml-0 list-none space-y-3 p-0">
-              {exp.objectives.map((obj) => (
+              {(exp.objectives ?? []).map((obj) => (
                 <li
                   key={obj.id}
                   className="flex gap-3 text-sm leading-relaxed text-[var(--sea-ink-soft)]"
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index f3773d7..503156b 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -153,9 +153,9 @@ function ExperienceCard({
           <span>{duration}</span>
         </div>
 
-        {exp.objectives.length > 0 && (
+        {(exp.objectives ?? []).length > 0 && (
           <ul className="mb-3 ml-0 list-none space-y-1.5 p-0">
-            {exp.objectives.map((obj) => (
+            {(exp.objectives ?? []).map((obj) => (
               <li
                 key={obj.id}
                 className="flex gap-2 text-sm text-[var(--sea-ink-soft)]"
@@ -167,9 +167,9 @@ function ExperienceCard({
           </ul>
         )}
 
-        {exp.technologies.length > 0 && (
+        {(exp.technologies ?? []).length > 0 && (
           <div className="flex flex-wrap gap-1.5">
-            {exp.technologies.map((tech) => (
+            {(exp.technologies ?? []).map((tech) => (
               <TechChip key={tech.id} label={tech.name} />
             ))}
           </div>
diff --git a/src/types/strapi.ts b/src/types/strapi.ts
index 2e4d5df..55d3ccf 100644
--- a/src/types/strapi.ts
+++ b/src/types/strapi.ts
@@ -132,8 +132,8 @@ export type TExperience = {
   readonly endDate: string | null
   readonly type: 'full-time' | 'part-time' | null
   readonly locale?: string
-  readonly objectives: readonly TObjective[]
-  readonly technologies: readonly TTechnology[]
+  readonly objectives?: readonly TObjective[]
+  readonly technologies?: readonly TTechnology[]
 }
 
 export type TEducation = {