Full Stack Quiz Game with NextJS — Part II

Intro

In my last post, I describe an easy way of using the NextJS framework to build a full-stack application from the scratch (here). The example application was a simple quiz game, nothing too fancy.

Due to, not only but also, the pandemic period we’re living I spent my last weekends building a personal NextJS boilerplate with everything that I think must be included in a modern JS project infrastructure. Along the way, I’ve been collecting some improvements that I decided to apply to the quiz game. In this post, I’m looking to describe some of the more relevant improvements.

TL;DR:

  • Github — project source code

Disclaimer Note for previous users

All the database information was wiped out. The main interest here is not to collect real email addresses. So one of the main changes was the removal of the Next-Auth lib and the need for an email to signup. Now you can enter the game with only a pair name/password. If you still don’t want to add a new player you can use the abc/123 (I really don’t know how it will work with multiple concurrent uses of that account 🤞).

Typescript

Although this is not a mandatory tool, my opinion is that it brings more benefits than disadvantages in the middle or long term. So I decided to include it. Typescript adds static type definitions and allows a gradual adoption of an existing codebase.

For me, the outstanding feature of TS is the ability to always points out the compilation errors at the time of development. Because of this, in the run-time, the chance of getting errors is lower than using the normal JS. One of the main drawbacks can be a little too verbose sometimes.

In order to enable TS in the project, we only need to add the typescript.json file to the root of the project.

typescript.json

After that change, we can start to create or change our source code files to *.ts or *.tsx and Babel will deal with TypeScript transformation to JavaScript.

Dark Mode

One of the most required current trends is the possibility of choosing a darker theme for the application, one use case, for example, is adapting the theme to the current time of the day (daylight/night).

The easiest way to implement this is use-dark-mode hook. It provides the current state of the option and functions to change it (enable, disable and toggle). The first thing to do was create a functional component responsible to change the state independently of all application:

DarkModeToggle component

Next, I isolate all the App providers in a new Providers component:

Providers

This component wraps the page component passed out to the NextJS App component. Basically, I defined several style properties in 2 objects, LIGHT_THEME and DARK_THEME. Once we retrieve the value from useDarkMode hook (if true means dark mode), we pass the right theme to the ThemeProvider of Emotion. That’s only what it takes to be able to get these style properties in any Emotion component inside the application.

The dark mode can be used inside JSX or styled-components with Emotion. Examples:

Dark mode being used in JSX
Dark mode applied to an Emotion styled component

In the following image you can compare the 2 different versions for the homepage:

Comparison between light and dark mode

Commit Conventions

Another cross-cutting concern added was the integration of tools that proclaims a standard way to define the validation of project commits. This is usually more indicated for larger teams.

3 tools were used:

  • commitlint : commitlint checks if your commit messages meet the conventional commit format.

Game Feedback

Regarding the game, a few improvements were also added.

  • The total amount of points available in the game agains the current score;
Game feedback improvements

Conclusion

Despite this App is not considered a real-world application it was a lot of fun to use as a case study for new JS tools for frontend development. It’s have been a fascinating experience.

I just hope that this post brings something new to you.

Thanks for reading and let me hear if you have different hints or tips about frontend tools.

Sharing thoughts regarding Software Development for Web #javascript, #reactjs