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.
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 🤞).
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.
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:
Next, I isolate all the App providers in a new Providers component:
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:
In the following image you can compare the 2 different versions for the homepage:
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.
- husky: You can use it to lint your commit messages, run tests, lint code, etc… when you commit or push. Husky supports all Git hooks.
- lint-stage: Run linters against staged git files and don’t let 💩 slip into your codebase!
Regarding the game, a few improvements were also added.
- The total amount of points available in the game agains the current score;
- The number of points available per question, based on difficulty (1 easy, 2 medium, and 3 for hard);
- Decorating the answer with red or green color if the player selects the wrong or the correct answer.
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.