Feed and Detail

Goal

This snapshot advances Saltmarsh Daily by teaching you to build a database-backed feed and post detail.

Every numbered folder is a complete app. Run this stage independently, then compare it with the previous folder.

Prerequisites

Use Deno 2+ and a code editor. No Docker is required — each snapshot uses its own SQLite file.

Port 8003 must be free. Copy .env.example before starting database stages.

• Deno runtime
• A code editor and terminal

Concepts

List and detail are separate reads.

Keep handlers thin: routes present data, server logic enforces rules, and Fresh escapes JSX output by default.

Walkthrough

Link titles to a detail route and return 404 when missing.

Read the example, then open the matching snapshot. The repository includes the surrounding setup and error handling.

const post = db.prepare('SELECT * FROM posts WHERE id = ?').get(id);
if (!post) return new Response('Not found', { status: 404 });

Run and verify

Enter 05-Feed-And-Detail, install deps, copy .env.example, and start Fresh on port 8003.

Open http://127.0.0.1:8003. Watch the terminal for validation and database errors.

git clone https://github.com/michaeldunga1/fcc-fresh-blog.git
cd fcc-fresh-blog/05-Feed-And-Detail
deno install
cp .env.example .env
deno task start

Troubleshooting

Missing rows should 404 cleanly.

For SQLite failures, confirm DATABASE_PATH and write permissions. Never commit .env or the .db file.

• Read the first error first
• Restart after environment changes
• Never commit secrets

Try this

Show the created timestamp on detail.

Test a happy path and one invalid or unauthorized request.

• Make one small change
• Test it in the browser
• Compare with the next snapshot only after it works