The journey of a piece of data
Once the data is modeled, the rest of the blog is transforming it layer by layer:
- The database stores the posts and comments and answers queries (for example: each post with its number of comments, ordered by date).
- The backend prepares that data: it generates slugs, paginates them and exposes them as
endpoints (
listPosts,loadPost). - The frontend paints them: a semantic markup for a post
(
<article>with<h1>,<time>and<p>) and a component that walks the array of posts to show the list.
Semantic HTML for a post
Not every <div> will do. A post is an <article>; its title, an <h1>; its
date, a <time> (the tag designed for dates); and its body, a <p>.
Semantic HTML improves accessibility and SEO at no extra cost.
Async: requesting a post by its slug
When the reader opens a post, the frontend requests that post by its slug from the
API. Since the network takes time, the function is asynchronous: await api(slug) waits
for the response and returns the post. In the following exercises you'll build each
of these pieces.