Progressive enhancement in Remix - Mini Project: Build & Apply

Progressive Enhancement with Remix Framework

📖 Scenario: You are building a simple web page using Remix Framework. The page should show a list of products with their prices. You want to start with a basic HTML list that works without JavaScript, then enhance it by adding a filter input that lets users filter products by name using JavaScript.

🎯 Goal: Create a Remix component that first renders a static list of products. Then add a filter input that progressively enhances the page by filtering the list on the client side without breaking the basic HTML functionality.

📋 What You'll Learn

Create a products array with exact product names and prices

Add a filter state variable to hold the user's input

Use a filter function to show only products matching the filter text

Add an input element with proper accessibility attributes for filtering

💡 Why This Matters

🌍 Real World

Progressive enhancement ensures your web pages work for everyone, even if JavaScript is disabled or slow. This approach improves accessibility and user experience.

💼 Career

Understanding progressive enhancement and React state management is essential for frontend developers building resilient and accessible web applications with Remix or similar frameworks.

1

Create the products data array

Create a constant array called products with these exact objects: { name: 'Apple', price: 1 }, { name: 'Banana', price: 0.5 }, and { name: 'Cherry', price: 2 }.

Remix

// Create the products array with exact objects
// Your code here

Hint

Use const products = [ ... ] with objects inside.

2

Add a filter state variable

Add a React state variable called filter initialized to an empty string using useState.

Remix

const products = [
  { name: 'Apple', price: 1 },
  { name: 'Banana', price: 0.5 },
  { name: 'Cherry', price: 2 }
];

// Add useState for filter
// Your code here

Hint

Import useState and create const [filter, setFilter] = useState('').

3

Filter the products list based on filter state

Create a constant called filteredProducts that filters products to include only those where product.name.toLowerCase() includes filter.toLowerCase().

Remix

import { useState } from 'react';

const products = [
  { name: 'Apple', price: 1 },
  { name: 'Banana', price: 0.5 },
  { name: 'Cherry', price: 2 }
];

const [filter, setFilter] = useState('');

// Create filteredProducts using filter and toLowerCase
// Your code here

Hint

Use products.filter(product => product.name.toLowerCase().includes(filter.toLowerCase())).

4

Add an accessible filter input and render filtered list

Add an <input> element with aria-label="Filter products", value={filter}, and onChange={e => setFilter(e.target.value)}. Then render filteredProducts as a list of <li> showing product.name and product.price inside a <ul>.

Remix

import { useState } from 'react';

const products = [
  { name: 'Apple', price: 1 },
  { name: 'Banana', price: 0.5 },
  { name: 'Cherry', price: 2 }
];

const [filter, setFilter] = useState('');

const filteredProducts = products.filter(product =>
  product.name.toLowerCase().includes(filter.toLowerCase())
);

// Add input with aria-label and render filteredProducts in a 
// Your code here

Hint

Use an input with aria-label, bind value and onChange. Render filteredProducts inside a ul with li items.