NextJS brings powerful server-side rendering tools

For Dirtbook, I wanted to use the latest popular React tools to create a demonstration project with a shorter deadline. I chose server-side-rendering (SSR) to create a photo album-like yearbook for dirt late model racing. Utilizing NextJS's SSR, I was able to load a large single-page application in seconds with smooth loading. NextJS also makes it easy to hook up to your backend data, and keep everything organized between the client and server. I also used Typescript, which has incredible support for all of the dependencies used in the project.

With Hasura and nHost, the backend is complete with PostgreSQL, Minio S3 file storage, and GraphQL

With my previous project, Teachery, I rolled out my own backend completely from scratch. Back then GraphQL was still a new thing, and tools to make GraphQL easier were scarce or early in development. With Dirtbook, I was able to use two up-and-coming backend tools combined in a backend as a service (BAAS) through nHost. nHost is an open source Firebase alternative with GraphQL. In non-marketing speak, it is Hasura, a PostgreSQL database, authentication and storage infrastructure. Hasura is a GraphQL tool that takes some of the pain points out of GraphQL, such as building a schema and converting an existing database to take advantage of GraphQL.

Nhost Console - Great backend products all under one host, and fully open source

UI designed for speed and simplicity using Chakra UI

Chakra UI shares a lot of similarities with Tailwinds, another CSS utility library. What's unique about Chakra is we use predefined components to more quickly build things such as forms, grids and buttons, instead of using classes within html elements. Chakra allows complete customization of the components, with parameters that Intellisense make easy to implement. That allows you to build your CSS faster, there isn't a need to memorize a ton of classes, and your UI won't look generic like you might see in Bootstrap and Material UI projects.

Search and filtering

Rapid search filtering and this project's future

Using React and the data, we can use search filtering with virtually no delay, which works incredibly well for an app such as Dirtbook. The search function includes filtering for drivers, promotions and numbers. All these features combined provide a lightning fast experience, easy on the eyes, and designed to scale for future updates. In the future, authentication and user-facing CRUD functionality will be implemented. The great thing about Hasura and nHost is the schema for inserting, updating and deleting is nearly ready out of the box, so development of these features will be much faster than if the schema was handwritten without a tool to read it, but still be able to scale for a production-ready app.

Full page screenshot shows NextJS in action by lazy loading images off the screen