Skip to main content
Unit 23 • Native Business Directory

Build a Native Business
Directory Website

Design a full directory site showcasing Indigenous-owned businesses in your community. You will build search, filters, and business cards — and learn the JavaScript search pattern behind nearly every directory on the web.

7 StagesDesign to Deploy
New JSLive Search + Filter
Design SystemPine, Sage, Amber
ContextNative Entrepreneurship

What You'll Build

A Real Business Directory in 7 Stages

🏛️

Foundation & Typography

Set up the design system: DM Serif Display + DM Sans, custom properties, and a hero that looks like a real publication.

🗂️

Category Filter Bar

Build a horizontal filter bar where users click a category button to see only that type of business. Pure CSS first, then JS.

🔍

Live Search

Add a search input that filters the business cards in real time as the user types — the core pattern behind every search bar.

🌱

Business Cards & Detail

Design business cards with category badges, contact info, and an about blurb. Style and data working together.

Course Path

Seven Stages to a Live Directory

Stage 1
14.3%
Foundation
Design system, fonts, hero section
Stage 2
28.6%
Business Cards
Grid layout, card design with data-category
Stage 3
42.9%
Category Filter
JS filter buttons, classList, data attributes
Stage 4
57.1%
Live Search
input event, textContent, toLowerCase()
Stage 5
71.4%
Featured Section
Full-width spotlight card, flex layout
Stage 6
85.7%
About & Footer
Two-column grid, contact info, footer
Stage 7
100%
Combined Filter + Search
Search + filter working together, no-results state

Sources & Resources

Research & Reference

Native Entrepreneurship

NCAI — Economic Development & Commerce
Minority Business Development Agency — Native American Programs
SBA — Resources for Native American–Owned Businesses
First Nations Development Institute

Research & Data

Dewees, Sarah, and Benjamin Marks. "Twice Invisible: Understanding Rural Native America." First Nations Development Institute, 2017.
U.S. Census Bureau — Nonemployer Statistics
Native Nations Institute — University of Arizona

Web Design References

MDN — getAttribute()
MDN — HTMLElement.dataset
Google Fonts — DM Serif Display
Google Fonts — DM Sans

Standards Alignment

What This Unit Covers

  • 2-AP-12 — Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals
  • 2-AP-13 — Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs
  • 2-DA-07 — Represent data using multiple encoding schemes
  • 3A-AP-17 — Decompose problems into smaller components through systematic analysis
  • 1d — Innovative Designer: Students exhibit a tolerance for ambiguity, perseverance and the capacity to work with open-ended problems
  • 5c — Computational Thinker: Students break problems into component parts, extract key information and develop descriptive models
  • 6d — Creative Communicator: Students publish or present content that customizes the message for their intended audience

This unit centers the economic sovereignty and entrepreneurial history of Native Tribes and communities. Students design a platform that amplifies Native-owned businesses — connecting contemporary economic development to Tribal self-determination principles. The directory structure reflects real tools used by Tribes to support their own economies.