10up Sample Code

Next.js/React Example

For the React example, I wanted to show some work I did on All Places Dog. All Places Dog is a web application that I started as a personal project to share dog-friendly places and write blog posts about adventures people can go on with their dogs. The web application uses WordPress and MongoDB for the backend and Next.js/React for the frontend.

About the Build

WordPress is the source of truth for all content on the allplacesdog.com website, which includes data from pages, posts, taxonomy, as well as custom post types for adventures and locations. Where MongoDB comes in is for the complex search queries that at the time of the initial build, were too resource heavy for WordPress and resulted in slow performance. As a workaround to these performance limitations, I built a custom RESTful API using MongoDB, Express, and Node.

In order to sync the locations data from WordPress to the Mongo database, I run a custom script that queries the locations custom post type via the WordPress GraphQL API. The data is then formatted and imported into the Mongo database. Through this process, the data is imported error-free and immediately available in the RESTful API.

Frontend Example Code: State Detail Page

The state detail pages use data from both WordPress and the custom RESTful API. Content for these pages are dynamically generated and tailored to each state. Every state has a detail page, but I'll be using Maine for the example: https://www.allplacesdog.com/locations/us/maine

Data-Fetching

Elements on the state template using WordPress data are blog posts, seo meta, location types, states, and adventures. Elements that use the custom RESTful API are the locations list.

  • wpQueries.js - contains functions that query WordPress for blog posts, location types, states, and adventures.
  • index.js - contains functions that formats user input before requesting locations from the RESTful API. This file also contains code relating to user functions, handling redirects, and decoding JSON web tokens.

Components

  • pages/locations/[country]/[state]/index.js - the wildcard template that's responsible for rendering each state page.
  • SeoHead - takes the Yoast plugin seo data from WordPress and converts it to Next.js format.
  • Layout - a wrapper component for page content.
  • StateDetailPage - UI for the state detail page.
    • index.js
    • StateDetailPage.module.scss
    • Components
      • Legend - UI for the sidebar list of states
        • index.js
        • Legend.module.scss
      • SectionAdventures - UI for the adventure cards that are nearby to the state's location
        • index.js
        • SectionAdventures.module.scsss

Backend Example Code: Updating a User List

As previously mentioned, the backend of the locations search functionality is built using MongoDB, Express, and Node. User lists are currently disabled on the production site, but the below code shows how a user can save locations to their custom list. The lists are tested with Jest during development to minimize potential bugs from making their way to production.

  • User Lists (Update/PUT) - function that checks the user permission to update this list. If the user passes authentication, the list is updated.
    • lists.js - handles HTTP requests from the user
    • lists.test.js - tests the list update with Jest

Thank you for your consideration! Feel free to reach out with any questions!

- Rob