Thuta Learning
Search
ProjectsWeb Developmentintermediate

Mini Project — Link Stash (Part 1): Setup and Core Structure

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

  • Apply Mini Project — Link Stash (Part 1): Setup and Core Structure in a real project
  • Write and run the code yourself
  • Build up a whole project step by step

Take a moment to think about this

In this mini project, we'll combine skills from across the whole tutorial into one single app. The idea is 'Link Stash' — a simple bookmark manager where users save links with a title, URL, and tags. In Part 1, we'll create a new project with create-next-app, organize the app/ directory following routing conventions, and set up the root layout and navigation. The home page will list a hardcoded bookmark array for now — we'll add the data layer in Part 2. The point of this stage is to get hands-on practice with the layout/page hierarchy and Link navigation.

Let's build it

Create a new project with npx create-next-app@latest link-stash, choosing TypeScript and App Router. In app/layout.tsx, add a header with the site title and a nav (Home, Add Bookmark, Tags). In app/page.tsx, define a bookmarks array (id, title, url, tags) as temporary data and render a card list with .map(). For each card, create the dynamic route app/bookmarks/[id]/page.tsx to show the bookmark's detail — look up the id with find() in the array. Add a bit of styling for the card layout with globals.css or a CSS module.

Code Example

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
In the browser, the Link Stash home page lists 2 bookmarks, and clicking one routes to its detail page.

5-Minute Try-It

Add one more item to the bookmarks array and check in the browser within 5 minutes whether a new card shows up on the home page.

A quick word of caution

Hardcoding the data in a file at this stage is intentional — it'll be replaced with a database layer in Part 2, so there's no need to worry about database setup right now.

Easy traps

  • Naming a folder app/bookmarks/id/page.tsx without the brackets instead of app/bookmarks/[id]/page.tsx — it stops being a dynamic segment
  • Using plain <a href> for nav links and missing out on next/link's client-side navigation benefits

Now Try It Yourself

Add one more item to the bookmarks array and check in the browser within 5 minutes whether a new card shows up on the home page.

You'll know it worked when: In the browser, the Link Stash home page lists 2 bookmarks, and clicking one routes to its detail page.

Mini Project — Link Stash (Part 1): Setup and Core Structure | Thuta Learning