Mini Project — Link Stash (Part 1): Setup နှင့် Core Structure

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ mini project မှာ tutorial တစ်ခုလုံးထဲက skill တွေကို တစ်ခုတည်းသော app ထဲမှာ ပေါင်းစပ်သုံးသွားမှာဖြစ်ပါတယ်။ Project ရဲ့ idea က 'Link Stash' — user တွေက link တွေကို title, URL, tag နဲ့တကွ သိမ်းထားနိုင်တဲ့ ရိုးရှင်းတဲ့ bookmark manager ပါ။ Part 1 မှာတော့ create-next-app နဲ့ project အသစ်ဖန်တီးပြီး၊ app/ directory structure ကို routing convention အတိုင်း စီစဉ်ကာ၊ root layout နဲ့ navigation ကို ထည့်သွင်းပါမယ်။ Home page မှာတော့ ခဏတော့ hardcode လုပ်ထားတဲ့ bookmark array ကို list ပြပါမယ် — data layer ကို Part 2 မှာ ထည့်ပါမယ်။ ဒီအဆင့်ရဲ့ ရည်ရွယ်ချက်က layout/page hierarchy နဲ့ Link navigation ကို ကိုယ်တိုင်လက်တွေ့ ပြန်လုပ်ကြည့်ဖို့ပါ။

လက်တွေ့ ဆောက်ကြည့်မယ်

npx create-next-app@latest link-stash နဲ့ TypeScript, App Router ရွေးပြီး project အသစ်ဖန်တီးပါ။ app/layout.tsx မှာ site title ပါတဲ့ header နဲ့ nav (Home, Add Bookmark, Tags) ကို ထည့်ပါ။ app/page.tsx မှာ bookmarks array (id, title, url, tags) ကို temporary data အနေနဲ့ define လုပ်ပြီး .map() နဲ့ card list ပြပါ။ Card တစ်ခုချင်းစီအတွက် app/bookmarks/[id]/page.tsx dynamic route ဖန်တီးပြီး bookmark ရဲ့ detail ကို ပြပါ — id ကို array ထဲက find() နဲ့ ရှာပါ။ globals.css သို့မဟုတ် CSS module နဲ့ card layout ကို အနည်းငယ် style လုပ်ပါ။

create-next-app နဲ့ App Router project တည်ဆောက်ပြီး dev server run ခိုင်းနိုင်ပြီ
root layout ထဲမှာ nav links (Link component) အလုပ်လုပ်နေပြီ
home page က bookmark list ပြပြီး dynamic route [id] page ကိုနှိပ်လို့ ရောက်နိုင်ပြီ

Code နမူနာ

tsx

// app/layout.tsx
import Link from "next/link";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header className="site-header">
          <h1>Link Stash</h1>
          <nav>
            <Link href="/">Home</Link>
            <Link href="/bookmarks/new">Add Bookmark</Link>
          </nav>
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

// app/page.tsx
const bookmarks = [
  { id: "1", title: "Next.js Docs", url: "https://nextjs.org", tags: ["docs"] },
  { id: "2", title: "MDN Web Docs", url: "https://developer.mozilla.org", tags: ["docs", "reference"] },
];

export default function HomePage() {
  return (
    <ul className="bookmark-list">
      {bookmarks.map((b) => (
        <li key={b.id}>
          <a href={`/bookmarks/${b.id}`}>{b.title}</a>
          <span>{b.tags.join(", ")}</span>
        </li>
      ))}
    </ul>
  );
}

You should see

Browser မှာ Link Stash home page က bookmark 2 ခု list ပြနေပြီး၊ တစ်ခုချင်းစီကို click လုပ်ရင် detail page ကို routing ဖြစ်သွားပါလိမ့်မယ်။

၅ မိနစ် စမ်းကြည့်

bookmark array ထဲကို data တစ်ခုထပ်ထည့်ပြီး home page မှာ card အသစ်ပေါ်လာမလား browser ထဲမှာ 5 မိနစ်အတွင်း စမ်းကြည့်ပါ။

သတိလေးတစ်ချက်

ဒီအဆင့်မှာ data ကို file ထဲမှာ hardcode ချထားတာ ရည်ရွယ်ချက်ရှိတာပါ — Part 2 အတွက် database layer နဲ့ replace လုပ်မှာမို့ အခုအချိန်မှာ database setup နဲ့ စိတ်ပူစရာမလိုသေးပါဘူး။