Database query optimization in Remix - Mini Project: Build & Apply

Database Query Optimization with Remix Framework

📖 Scenario: You are building a simple web app using Remix Framework that shows a list of books from a database. The database has many books, but you want to show only the books published after the year 2000 to keep the page fast and clean.

🎯 Goal: Build a Remix loader function that fetches only books published after 2000 from the database, and display their titles on the page.

📋 What You'll Learn

Create a mock database array called books with book objects containing id, title, and year.

Add a variable called yearThreshold set to 2000 to filter books.

Use a filter method to select books published after yearThreshold.

Complete the Remix loader function to return the filtered books and display their titles in the component.

💡 Why This Matters

🌍 Real World

Filtering data before sending it to the client helps keep web pages fast and responsive, especially when working with large databases.

💼 Career

Understanding how to optimize database queries and use Remix loaders is important for building efficient full-stack web applications.

1

Create the initial book data

Create a constant array called books with these exact objects: { id: 1, title: 'The Hobbit', year: 1937 }, { id: 2, title: 'Harry Potter', year: 1997 }, { id: 3, title: 'The Da Vinci Code', year: 2003 }, { id: 4, title: 'The Martian', year: 2011 }.

Remix

# Create the books array with the given book objects
# Your code here

Hint

Use const books = [ ... ] with the exact book objects inside.

2

Add the year threshold variable

Add a constant called yearThreshold and set it to 2000.

Remix

const books = [
  { id: 1, title: 'The Hobbit', year: 1937 },
  { id: 2, title: 'Harry Potter', year: 1997 },
  { id: 3, title: 'The Da Vinci Code', year: 2003 },
  { id: 4, title: 'The Martian', year: 2011 }
];

# Add yearThreshold variable here
# Your code here

Hint

Use const yearThreshold = 2000; exactly.

3

Filter books published after the threshold

Create a constant called filteredBooks that uses books.filter to keep only books where book.year > yearThreshold.

Remix

const books = [
  { id: 1, title: 'The Hobbit', year: 1937 },
  { id: 2, title: 'Harry Potter', year: 1997 },
  { id: 3, title: 'The Da Vinci Code', year: 2003 },
  { id: 4, title: 'The Martian', year: 2011 }
];

const yearThreshold = 2000;

# Filter books published after yearThreshold
# Your code here

Hint

Use books.filter(book => book.year > yearThreshold) to create filteredBooks.

4

Complete the Remix loader and display titles

Write a Remix loader function that returns filteredBooks as JSON. Then create a default export React component that uses useLoaderData to get the books and renders an unordered list <ul> with each book's title inside a <li>.

Remix

const books = [
  { id: 1, title: 'The Hobbit', year: 1937 },
  { id: 2, title: 'Harry Potter', year: 1997 },
  { id: 3, title: 'The Da Vinci Code', year: 2003 },
  { id: 4, title: 'The Martian', year: 2011 }
];

const yearThreshold = 2000;

const filteredBooks = books.filter(book => book.year > yearThreshold);

# Add Remix loader and React component below
# Your code here

Hint

Use export const loader = () => json(filteredBooks); and a React component that calls useLoaderData to get the books and render them in a list.