“TASTEBUDS” Food Blog Site

Structured Content Management

In the MVP, blog content was stored as a front-end data array. While this worked for an early prototype, it required manual updates whenever a new post was added, which made content management less efficient as the project expanded.

This made the workflow easier to maintain and created a foundation that could later evolve into a CMS-like system.

1. 1
   1

   Design the post data structure

   Expand

   export type PostCard = {
     id: string;
     slug: string;
     title: string;
     excerpt: string | null;
     published_at: string | null;
     cover_image_path: string | null;
   };

2. 2
   2

   Retrieve posts from Supabase

   Expand

   export async function getAllPosts(): Promise<PostCard[]> {
     const { data, error } = await supabase
       .from("posts")
       .select("id, slug, title, excerpt, published_at, cover_image_path")
       .order("published_at", { ascending: false });
   
     if (error) {
       console.error("Failed to fetch posts", error);
       return [];
     }
   
     return data ?? [];
   }

Based on this structured data, UI components can dynamically generate blog cards and article pages.

Rendering Architecture

The UI was rebuilt using reusable React components. Post data is passed into card components to generate article cards, creating a structure that can easily scale as more content is added.

1. PatternA: Curated layout for the homepage

   To highlight the latest articles, the homepage selects specific posts from the dataset and displays them in a curated layout.

   {posts[0] && <CardL posts={posts[0]} />}
   {posts[1] && <CardM posts={posts[1]} />}
   {posts[2] && <CardM posts={posts[2]} />}
   {posts[3] && <CardM posts={posts[3]} />}

   

2. PatternB: Dynamic rendering for the blog archive

   On the blog page, filtered post data is mapped into card components to dynamically generate the article list.

   {filteredPosts.map((post) => (
     <CardM key={post.id} posts={post} />
   ))}

   

Dynamic Routing

Previous Problem: In the MVP, each article was managed as a separate page, making the structure difficult to scale as content grew.

Solution: I implemented Next.js Dynamic Routing using the /blog/[slug] route structure, allowing pages to be generated from a single shared template.

// Static pages (MVP)          // Dynamic routing
pages/                          app/
  └── posts/                     └── blog/
      ├── post-1/                    └── [slug]/
      │     └── index.html             └── page.tsx
      ├── post-2/                         
      │     └── index.html        
      ├── post-3/                                   
      │     └── index.html
      .
      .
      . 

Result: By fetching content based on the slug, new articles can be added without creating new pages, improving scalability and maintainability.

Reflection

Understanding the Limits of AI-Assisted Development

I also experimented with building admin and CMS-like features using AI. However, this experience made me realize that being able to implement functionality is not the same as fully understanding the underlying architecture. In parts of the CMS, multiple features ended up being combined into a single component, which made the structure harder to maintain and scale. This highlighted the importance of component design and separation of concerns.

Moving Forward

Moving forward, I aim to deepen my understanding of architecture while using AI more intentionally, with the goal of building more scalable and maintainable systems.