Mumble by The FF (Football Fanatics) Team

This project is a collaborative effort between:

• Bladimir Ardiles Cruz bladicito
• Patrick Lehmann Paeddy

undertaken as part of our final team project for the Certificate of Advanced Studies in Advanced Frontend Engineering at the University of Applied Sciences of Eastern Switzerland (OST).

Core

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

More about NextJs

Next.js Documentation - learn about Next.js features and API.

Pre Requisites

You need to have a .env.local file in the root of the project with the following variables:

In case a new environment is needed (exp. staging), please add the domain of the same to the allowed domains in the zitadel configuration (config/index.ts).

Zod validation

The environment variables undergo validation by Zod in config/env.ts. If you need to introduce new environment variables, append them to this file. Otherwise, no validation will be performed for those variables.

Additionally, don't forget to update the GitHub Actions files and include them in the variables and secrets on GitHub.

Authentication

This project uses Zitadel. Make sure that you have an Organization in Zitadel and that you have the client id and the issuer url. The return URL must be configured in the Zitadel configuration. As an example, the return URL for the dev environment our configuration includes the following url:

• https://main.dpejyjo5wbo0b.amplifyapp.com/api/auth/callback/zitadel
• https://dev.cusconews.com/api/auth/callback/zitadel
• http://localhost:3000

The Zitadel configuration is located in the app/api/auth/[...nextauth]/auth.ts file.

Development

First, run the development server:

npm run dev

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

Build

npm run build

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

Linting, Formatting, Type checking

Run linter:

npm run lint

Check prettier format:

npm run format:check

Fix prettier format:

npm run format:fix

Run type checking:

npm run type-check

Run linter, prettier and type checking:

npm run code:fix

Testing

setup

Tests are located in the /tests directory. They come in two flavors: those within /auth require a signed-in user, while the ones in the root test folder are login-independent. The authentication tests' setup is handled in /tests/auth/setup/index.ts. Furthermore, we've set up a GitHub Action in .github\workflows\playwright.yml to automatically run these tests whenever code is pushed to the main branch or a pull request is opened.

commands

Run all playwright tests

npm run test

Open playwright's ui mode to run the tests there:

npm run test:ui

Deployments/Rollouts

Our Project uses AWS Amplify for deployment. This allows us to deploy the whole application based on commits to main and production branches.

Amplify configuration

The Amplify configuration is located in the amplify.yml file. Make sure that you include all environment variables in the amplify console and also in the amplify.yml file. Amplify does not add the environment variables automatically to the build process. you need to do it manually (see amplify.yml).

env | grep -e NEXTAUTH_URL -e NEXTAUTH_SECRET -e ZITADEL_CLIENT_ID -e ZITADEL_ISSUER -e MUMBLE_API_URL -e ENVIRONMENT  >> .env

Dev Deployment

The dev deployment is triggered by a commit to the main branch. Directs commits or pull requests merged into the main branch will trigger a deployment to the dev environment.

Production Deployment

The production deployment is triggered by a commit to the production branch. The strategy is to merge the main branch into the production branch accordingly.