← Projects

ISAAD

Rebuilt admissions site with map and search for 16 schools.

Summer 2023 · Web · Completed client project

ISAAD website rebuild overview — old dropdown-heavy School Search page beside the rebuilt filter panel, member-school card grid, Dallas locations map, and large ISAAD logo overlay
The rebuild at a glance — search, schools, map, and the ISAAD mark.

Stack

Stack: React · React Router · Tailwind · Mapbox · DreamHost

An existing WordPress site to rebuild, sixteen member schools' worth of logos and admissions data to keep straight, and a single URL the consortium could hand to parents.

Log

  1. First — the Lamplighter pitch

    Met with the admissions directors at Lamplighter. Sixteen accredited schools, one consortium, and a search experience centered on dropdowns. The brief was to make school discovery easier for families.

  2. Inventory — what was already up

    Reviewed the existing site before starting. Its navigation covered Home, About Us, School Search, Private School Preview, Events, FAQ, Resources, Testing, and Contact Us. The homepage paired a stock photo of children using tablets with an information panel. School Search was a separate gray page with dropdowns for student body, school type, religious affiliation, special focus, and grade; it did not include a map.

    Existing ISAAD WordPress landing page — oversized logo and top navigation, stock graduation photo carousel, dark blue information panel with centered consortium copy, and a large 'Find the Perfect School for You' call-to-action below
    The existing WordPress landing page.

  3. Tooling — React, then Tailwind

    Picked React because tutorials were plentiful and the resulting app could be served as HTML, CSS, and JavaScript. React Router handled the page routes, and Tailwind kept the styling close to each component. It was a practical stack for a short client project.

  4. Skeleton — react-router blockout

    Set up the React app, dropped react-router on top, blocked every route as a placeholder: Home, About Us, School Search, Private School Preview, Events, FAQ, Resources, Testing, Contact Us. Skeleton existed before any pixel did.

  5. Page by page — homepage first

    Worked through the existing navigation page by page. The homepage added a hero with four children, a 'Why Choose ISAAD Schools?' card grid, testimonials, and an Affiliations partner-logo strip. I rewrote the information panel in parent-focused language.

  6. School Search — dropdowns become filters

    Rebuilt the search around a left filter panel: green chips for student body, religious affiliation, and special focus; a grade dropdown; and a ZIP-code radius search. Results rendered immediately as clean school cards, with the locations map queued underneath.

    New ISAAD School Search page — left sidebar with green filter chips for Student Body, Religious Affiliation, and Special Focus, a Grades dropdown, and ZIP code search; main pane titled Filtered Schools with cards for the sixteen member schools and a School Locations heading below
    Filter panel, school cards, then the map below.

  7. Mapbox — sixteen pins on Dallas

    Bolted a Mapbox canvas under the search results with a blue pin per member: Alcuin, Cistercian, Dallas International, ESD, Good Shepherd, Greenhill, Hockaday, Lakehill, Lamplighter, Parish, Shelton, St. John's, St. Mark's, St. Philip's, Ursuline, Winston. Sixteen pins on a Dallas map instead of sixteen values in a dropdown.

    School Locations map on the ISAAD School Search page — Dallas-area street map with zoom controls and sixteen blue pins clustered around central Dallas, with additional pins toward Irving, Richardson, Garland, and Mesquite
    Sixteen schools, one canvas.

  8. Ship — dev → production

    Pushed the staging build to DreamHost at dev.dallasprivateschool.org for the admissions directors to review. After their sign-off, moved DNS to isaadallas.org and completed the paid client engagement.

Gallery

ISAAD Affiliations section — large Affiliations heading above a grid of partner organization logos including ISAS, NAIS, College Board, International Baccalaureate, MSA, AMS, IBSC, ALDS, NAES, SAES, TAPPS, SPC, CASE, and ISM
Affiliations — the trust marks parents expected to see.
ISAAD rebuild comparison overview — old dropdown-heavy School Search page beside the rebuilt filtered-schools card grid and Dallas locations map, with the ISAAD logo overlaid across the center
Old search form, rebuilt filters, school cards, and map.

Result

Paid client rebuild, 16 schools mapped

What I learned

A paid client engagement made the deadlines concrete: sixteen schools needed the new URL, so staging review and the production cutover had to land on time. Learning React for this rebuild meant testing each page with the admissions directors and responding to their feedback. The work focused on helping families find school information and compare locations in one place.

Related