This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev

Open https://localhost:3000 with your browser to see the result.

This project uses Apollo Client to fetch the data from this API. The Apollo Configuration is in apollo.config.tsx at the root of the project.

Also, it uses Graphql Codegen to generate types from the API Schema. the configuration is in codegen.ts, and the output is under the generated directory.

This script will run codegen and generate the types.

npm run codegen

With the latest version of Nextjs and the introduction of the app directory, now all the components are Server Components by default. For the purpose of this implementation, I needed to interact with React Context, that's why I use the directive "use client" in the majority of the components.

The Global Context I created has four values, these are the ones I will need to reuse in more than one page.

    cards: CharactersParam;
	setCards: Dispatch<CharactersParam>;
	turnsContext: number;
	setTurnsContext: Dispatch<SetStateAction<number>>;

cards: Are the characters data formatted to show it on the grid game. This is used in the main view and the play view.

turns: The number of turns the user played. This is used in the play view and the final view.

I have used Tailwind CSS for styling, I'm very familiar with this tool, and I consider it a great option for a small project. Also, Nextjs provides a simple way to install it with their CLI.

I created only three components that I consider essential and global across the app.

I'm using the routing structure from Nextjs, that now is under the app directory.

For testing purposes I'm using Testing Library, and I'm testing the principal components.