Hearing Eye

Hearing Eye

Originally built as a WordPress custom theme, this site features an extensive database with a many-to-many architecture, handling relationships between authors, editors, translators, and books using Custom Post Types. The site was later reworked into a Headless CMS setup, utilising GraphQL for the API and Next.js for the front-end.

I took great pleasure in re-purposing the existing database architecture, creating GraphQL query endpoints, and defining relationships. The front-end leverages cutting-edge technology and practices, elevating the single-page application (SPA) experience. This project involved considerable learning of server/client terminology and processes, resulting in a fully semantic, searchable metadata website.

The Node.js development and build-deploy flow process ensures system bugs are addressed before production. The application features component-based web pages - partial page rendering for enhanced page load performance. It includes static builds and on-demand page regeneration to prevent delays caused by heavy external resources and facilitates instant interaction with static components. Dynamic client-side features, such as forms with dynamically generated content, ensure a responsive user experience.

WordPress Webhooks were provided to communicate via cURL to front-end API endpoints, allowing for new content updates and triggering incremental static regeneration (ISR) page content.

api
  1. GraphQL
cms
  1. Headless WP
languages
  1. PHP
  2. HTML5
  3. CSS3
  4. JavaScript
technologies
  1. JSON
  2. cURL
  3. NodeMailer
stack
  1. JAMstack
  2. NextJS
libraries
  1. TailwindCSS
  2. React