L13: Module 4 Challenge

Time to test everything you've learned! Build three advanced routing features from scratch: search with URL parameters, favorites system, and breadcrumb navigation.

Challenge Overview

You'll build:

1. Search Page - Search listings with URL query parameters
2. Favorites System - Favorite listings with dedicated page
3. Breadcrumb Navigation - Show current location hierarchy

Estimated time: 2-3 hours

Difficulty: Intermediate

Requirements

Feature 1: Search Page

Route: /search?q={query}&location={location}

Requirements:

• Create SearchPage component
• Read query params from URL
• Filter listings based on search
• Update URL when filters change
• Show search results count
• Handle empty results

Example URLs:

/search?q=beach
/search?q=beach&location=california
/search?location=malibu

Feature 2: Favorites System

Routes:

• /favorites - View all favorite listings

Requirements:

• Create FavoritesPage component
• Add "favorite" button to listing cards
• Store favorites in localStorage
• Show count of favorites
• Remove from favorites
• Empty state when no favorites

Feature 3: Breadcrumb Navigation

Requirements:

• Create Breadcrumbs component
• Show on all pages except home
• Dynamic breadcrumbs based on route
• Clickable navigation
• Current page not clickable

Example breadcrumbs:

Home > Listings
Home > Listing > Beach House
Home > Search > Results
Home > Favorites

Setup

touch src/pages/SearchPage.jsx
touch src/pages/FavoritesPage.jsx
touch src/components/Breadcrumbs.jsx
touch src/hooks/useFavorites.js

Challenge Tasks

Bonus Challenges

Want to take it further? Try these:

Testing Checklist

Use this to verify your implementation:

Search Page

• Can access /search route
• Query param appears in URL
• Search updates URL in real-time
• Results filter correctly
• Shows result count
• Handles empty results
• Can bookmark search URLs

Favorites

• Can favorite/unfavorite from cards
• Heart icon updates correctly
• Favorites persist on refresh
• Can view all favorites at /favorites
• Can remove from favorites page
• Shows empty state when no favorites

Breadcrumbs

• Shows on all pages except home
• Builds correct path hierarchy
• All links navigate correctly
• Current page not clickable
• Responsive on mobile

Solution Hints

Success Criteria

Your challenge is complete when:

• ✅ All three features work correctly
• ✅ URLs update properly
• ✅ Data persists on refresh
• ✅ No console errors
• ✅ Professional UI/UX
• ✅ Code is clean and commented

What You've Accomplished

In this challenge, you've demonstrated:

• ✅ URL query parameter management
• ✅ localStorage persistence
• ✅ Dynamic component rendering
• ✅ Complex routing patterns
• ✅ Real-world feature implementation

Next Steps

With Module 4 complete, you're ready for Module 5: Hooks & Performance! You'll learn about custom hooks, useMemo, useCallback, and optimization techniques.

Keep building! 🚀