Resource routes for APIs in Remix - Mini Project: Build & Apply

Resource routes for APIs

📖 Scenario: You are building a simple API for a blog application using Remix Framework. The API will manage blog posts with standard resource routes.

🎯 Goal: Create resource routes for the blog posts API using Remix conventions. You will set up the data, configure a route parameter, implement the main loader function to fetch a post by ID.

📋 What You'll Learn

Create a list of blog posts with exact IDs and titles

Add a route parameter variable called postId

Write a loader function that finds a post by postId

💡 Why This Matters

🌍 Real World

APIs with resource routes are common in web apps to fetch, create, update, or delete data items like blog posts, users, or products.

💼 Career

Understanding resource routes and loader functions in Remix is essential for building modern web applications with server-side data loading.

1

Create the blog posts data

Create a constant array called posts with these exact objects: { id: '1', title: 'First Post' }, { id: '2', title: 'Second Post' }, and { id: '3', title: 'Third Post' }.

Remix

// Create the posts array with three posts
// Your code here

Hint

Use const posts = [ ... ] with objects inside the array.

2

Add the route parameter variable

Create a constant called postId and assign it the value from params.postId inside the loader function parameter.

Remix

const posts = [
  { id: '1', title: 'First Post' },
  { id: '2', title: 'Second Post' },
  { id: '3', title: 'Third Post' }
];

export async function loader({ params }) {
  // Create postId from params.postId
  // Your code here
}

Hint

Inside the loader function, write const postId = params.postId;.

3

Implement the loader function to find the post

Inside the loader function, find the post in posts where post.id equals postId and assign it to a constant called post. Then return the post object.

Remix

const posts = [
  { id: '1', title: 'First Post' },
  { id: '2', title: 'Second Post' },
  { id: '3', title: 'Third Post' }
];

export async function loader({ params }) {
  const postId = params.postId;
  // Find the post with id === postId
  // Return the post
  // Your code here
}

Hint

Use posts.find(post => post.id === postId) to get the post.