Full Stack Quiz Game with NextJS — My Journey

Intro

After being a ReactJS developer for a couple of years now (only on the client-side), I started to feel the need to discover and understand which fullstack solutions are currently available.

  • Demo — application in production

What is NextJS

NextJS is an opinionated framework made by Vercel built on the top of NodeJS, Webpack, Babel, and ReactJS.

Quiz Game

The idea for this app/game has come up after encountering the Open Trivia API available here. In my mind, I began to see a small application divided into the following sections:

  • Authentication pages for Login and Register;
  • Game page;
  • Account page will display players statistics and game settings;
  • About page will display the parsing result of the README.md file.

Project Setup

1 — Project creation

npx create-next-app quiz-game
# or
yarn create next-app quiz-game

Backend

1 — API routes

The server logic of the application is mainly based on the API routes feature of NextJS.

JWT_SECRET={your_secret}
  • preferences/[userid].js — Dynamic endpoint to fetch the previous preferences saved by the user.
  • preferences/index.js — Endpoint to store preferences saved by the user.
  • login — Endpoint to sign in to an existing user.
  • register — Already described above.
  • score — Endpoint to store the player score at the end of each game.
MONGODB_URI=mongodb+srv://{your_connection_string}?retryWrites=true
MONGODB_DB={your_db_name}

Pages

The application is segmented into the following pages:

  • account — User’s account area.
  • game — The entry point for the new game and final score.
  • register — Registration for new users that choose not to use a social network authentication.
  • signin— Login form and social networks authentication.
  • index.js — Home page with Top 10 players.

Deploy to Vercel

After all the development phases, surprisingly the easiest task was the app deployment through Vercel (also the company’s name behind NextJs). For the sake of brevity, that guide can be consulted here. In this platform, you can check the build/function logs and also some cool features such as the recent addition of Analytics (limited for free accounts).

Lighthouse

One of the major promised benefits of using NextJS is its performance and SEO optimization. These were the results of lighthouse accomplished with the live app in Vercel:

Conclusion

There is no doubt that NextJS is a great framework to create a full-stack application from the scratch. Everything will be already configured and optimized in terms of code splitting and bundling for production. There is a lot of things that you don’t need to bother about. But that doesn’t mean we cannot easily extend for a more tailored solution. For those with a background in React, the learning curve is minimal.
Development with this framework is fast and refreshing. I strongly recommend at least to try it.

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