“This is where the idea became real — line by line.”

---

1. From Idea to Code

When the idea of WakaranEng began to take form in code,
I took the role of source integrator and headless CMS developer.
My task was to build a foundation that could grow stably —
so every team member could contribute, make pull requests, and commit safely
without breaking the flow of the project.

From the very beginning, we knew this site had to serve two sides:

1. Humans — readers and content creators.
2. Machines — search engines and AI crawlers.

That meant Server-Side Rendering (SSR) was essential.
Not just for performance, but to guarantee stable SEO and accurate indexing.
Every article, every video page needed to be rendered server-side
so that search engines could correctly interpret its structure
without relying on client-side JavaScript.

We also wanted to separate content from presentation.
A headless CMS was the natural direction —
write content in one place, and render it flexibly on another.
So we used WordPress REST API as our backend
and built a custom integration layer for Next.js.

But the architecture wasn’t the only challenge —
workflow mattered just as much.
We wanted every member to make PRs without breaking the layout,
and each commit to move in one direction.
So we standardized commit naming, review flow,
and relied on Copilot Agent to maintain consistency across the codebase.

“Code wasn’t the hard part — alignment was.”

---

2. Choosing the Stack

“We chose what we understood — not what was trendy.”

Our core stack included:

• Next.js (App Router) – for SSR and clean routing.
• TypeScript – for self-documenting code and runtime safety.
• TailwindCSS + shadcn/ui – for consistent, responsive design.
• Vercel – for global CDN and effortless deployment.
• WordPress Headless API – for flexible content management.

This setup gave us the best of both worlds:
creative control through WordPress,
and modern SSR performance through Next.js.

Our design principles were simple:

• Light color palette with contrast above 4.5.
• No unnecessary animation.
• Clean sans-serif typography with generous line height.
• Responsive layout, no endless scrolling.
• Markdown-based blog structure (H1–H3, quote, image).
• All images include multilingual alt attributes for accessibility.

Then came the first real obstacle:
our CMS API was hosted on a non-SSL domain,
so all client-side requests were blocked by browsers.
Our initial plan — fetching via client components — completely failed.
We had to move all data fetching to server components.
That migration introduced new complexity in blog rendering,
but restored stability and full SEO compatibility.

Because the blog wasn’t rendered directly inside WordPress,
we also needed to rebuild the entire blog UI from scratch in Next.js,
mirroring WordPress’s structure while keeping performance and readability intact.

Thankfully, Copilot Agent made this process surprisingly smooth.
It helped us detect rendering mismatches, redundant props,
and repetitive layout issues during the conversion.

“Copilot wasn’t just an assistant — it was a collaborator.”

---

3. Design Philosophy & Layout

“Good design is when the reader no longer notices it.”

From day one, our goal wasn’t to make a flashy website —
but a calm, readable one.
WakaranEng was designed to feel light and honest,
so readers could focus on the content, not the interface.

Every UI decision came from one simple question:

“Can the reader stay focused on the words?”

We used light backgrounds and strong contrast (>4.5),
clean typography, balanced spacing, and minimal layout shifts.
Each quote, image, and heading had breathing space,
and all markdown was standardized across the CMS.

The layout followed a single-column approach —
centered, responsive, and short in scroll depth.
We didn’t want users to “navigate” — we wanted them to “flow”.

“When design disappears, content begins to speak.”

---

4. Accessibility, Performance & SEO for AI

“A website about language must be readable — by humans and machines.”

Our Lighthouse scores started in the yellow zone:
Performance around 70–80, Accessibility above 90.
The main slowdown came from YouTube embed scripts,
which load multiple heavy analytics resources.
Since YouTube is our primary content platform,
it was a necessary compromise — but it clearly affected performance.

We began optimizing step by step:

• Replaced YouTube iframes with lazy-loaded previews.
• Added loading="lazy" and deferred non-critical scripts.
• Reduced analytics dependencies.
• Cached thumbnails and metadata server-side.

On the bright side, our multilingual implementation scored 94/100,
thanks to clean hreflang markup and structured metadata.
Initially, we made a locale mistake — using en instead of en-US —
which caused SEO warnings in both URL and <html lang> tags.
Fixing that tiny code detail immediately improved our international indexing.

“Sometimes one character in your code decides whether your site is seen or not.”

We’re now focusing on Lighthouse optimization
while also preparing for AI-oriented SEO.
The goal is to make WakaranEng easily readable not just for Google,
but for AI search engines — Bing Copilot, Perplexity, or ChatGPT Search —
that parse semantic context and authorship directly.

Our AI-friendly approach includes:

• Clean OpenGraph and JSON-LD schema.
• Consistent alt and caption metadata.
• Structured summaries in the first 500 characters of each article.
• Logical flow: title → author → theme → intent.

At this point, we’re no longer just designing for browsers —
we’re designing for comprehension itself.

“When AI reads your page and understands it correctly,
that’s when humans will too.”

---

5. Multilingual Architecture

“We wanted everyone in our team to be able to write in their own language.”

WakaranEng supports four languages:
English, Japanese, Vietnamese, and Chinese.
However, the blog section remains English-only —
a shared space for collective learning and consistent communication.

Language routing follows /en, /ja, /vi, /zh,
with auto-detection based on browser locale.

But this isn’t a “perfect” multilingual system.
It’s a space that accepts imperfection.
No one needs perfect English or a flawless accent —
what matters is making meaning together.

“WakaranEng isn’t about mastering English —
it’s about creating meaning together.”

---

6. Reflection — Learning by Coding

Looking back, WakaranEng is more than a website.
It’s a record of learning itself.
Every commit, every broken build, every locale fix,
was a small step toward understanding —
of code, of language, and of teamwork.

“We didn’t just build a website.
We built a reason to keep learning —
in English, in code, and through curiosity.”

---

✳️ End

For us, WakaranEng isn’t a finished product.
It’s a continuous learning state —
where everything improves little by little:
from imperfect sentences to imperfect code.

No need for perfection.
Just a bit more understanding — every day.

“Because understanding is built — one word, one line, one try at a time.”