Next 13 SPA Sample App

Technologies and Concepts Utilized in This Project:

• Next 13 + React 18 + Typescript + Tailwind
• i18n With react-intl
• Jest + React Testing Library Tests
• Continuous Integration - Github Actions
• Branch Preview With Vercel Configured
• SWR Cache Strategy
• MSW Server Mocking Strategy

General App Strategy

This app is a sample application of a Single Page Application (SPA) using Next.js, as recommended by react.dev, for initiating a new project. The project aims to utilize only React features and not Next.js features, with the intent of focusing on front-end skills.

The app uses an immutable API called POKE API, and for caching requests and optimizing website performance, I have chosen to adopt the SWR cache strategy.

Navigation

In this app, I am using the react-router-dom library to handle routes and layouts. All the existing routes can be observed in the App.tsx file.

Internationalization

For internationalization, I am utilizing react-intl along with automatic language detection, provided in the LocaleContext file.

State Management

For state management, I am using the React Context API with custom hooks to be used inside my components. The only things necessary for global state management are the intl and locale.

Folder Structure

📂.github // Github Actions workflows are defined here
📂src 
 ┣ 📂__mocks__ // All the mocks necessary for the test environment
 ┣ 📂__tests__ // All Jest tests are managed here
 ┣ 📂app // All the SPA components logic are defined here
  ┣ 📂components // All components are defined here, categorized into general components at the root of the folder, and specific page components for each application page
  ┣ 📂config // Configuration files, including constants, are defined here
  ┣ 📂context // React Context Providers are defined here 
  ┣ 📂hooks // React custom hooks are defined here 
  ┣ 📂models // Typescript types are defined here
  ┗ 📂services // The layer responsible for fetching and processing external data is defined here
 ┣ 📂pages // The initial page for the next configuration purpose is defined here
 ┗ 📂lang // Internationalization (react-intl) strings for each language are defined here

Testing strategy

In all of my Front End projects (SPAs), I prefer to follow the testing trophy strategy, which prioritizes integrated tests over unit tests.

All test cases are behaviorally oriented, following the principles of Behavior-Driven Development (BDD), with a focus on capturing user interactions with the system.

Coverage

As can be seen in the report below, the Testing Trophy strategy does not significantly affect testing coverage. This approach results in more readable and fewer tests, along with a reduction in the number of mocks when compared to the Testing Pyramid strategy.

------------------------------------|---------|----------|---------|---------|
File                                | % Stmts | % Branch | % Funcs | % Lines |
------------------------------------|---------|----------|---------|---------|
All files                           |   97.46 |    92.94 |   96.74 |   97.65 |

Development

Install the dependencies

npm install
# or
yarn install

Run the development server

npm run dev
# or
yarn dev

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