Challenge stack 2023 IW4

The goal of this challenge is to create a web card game. The game is a simplified version of heartstone game.

Production

https://cardgame.bliblablou.day/

Notable features

Dockerized project with healthchecks:
- The postgres database, with docker healthcheck that will check if the database is up and ready to accept connections.
- The backend is a node.js application, with a healthcheck endpoint that is used by the docker healthcheck.
  
  The healthcheck endpoint is available at /healthcheck. It will return a 200 status code if the application is connected to the database, and a 500 status code otherwise.
  
  The container will wait for the database to be ready (based on the postgres container healthcheck) before launching the application.
- The frontend is a vue3 application.
  
  The container will wait for the backend to be ready (based on the backend container healthcheck) before launching the application.
Automatic data replication to mongodb database without any code duplication. The project use a postgres database for the main data, and a mongodb database for the search & statistics features.

The sequelize models automatically create the mongodb schema from the his sequelize schema. The data is replicated in realtime to the mongodb database using a hooks. You can find the replication code in the backend/src/db/syncMongo.js file.
Backend unit tests, running in github action with jest test suite (see the Launch the tests section for more details). Also include a code sanity check with eslint.

The game.spec.js include socket io tests.

You can find the backend github action here.
Frontend tests include a code sanity check with eslint and a build runner for ensuring that the build is working.

You can find the frontend github action here
The project use web socket for the realtime communication between the frontend and the backend.

Launch the project locally for development

Prerequisites

Docker
node >= 20.0.0 (for the node test suite). You can use nvm to manage your node versions easily.
eslint extension for VSCode (for the code sanity)

Set the project ready for development

Clone the project and go to the project directory

git clone git@github.com:ESGI-69/challenge-node-vue.git
cd challenge-node-vue

Copy the .env.example file to .env and fill the variables that are not already filled (see the environment variables section for more details)
```
cp .env.example .env
```
Launch the docker developement containers (databases)
```
docker compose -f docker-compose.yaml -f docker-compose.dev.yaml up --remove-orphans --build
```
What does this command do ?
- -f docker-compose.yaml -f docker-compose.dev.yaml : use both docker-compose files to launch the containers. The docker-compose.dev.yaml file is used to expose the databases ports to the host, only in development mode.
- --remove-orphans : remove the containers that are not in the docker-compose.yaml file
- --build : build the images before launching the containers for ensuring that the latest version of the images are used
Install the backend dependencies
```
cd backend
npm install
```
Migrate the database
```
npm run migrate
```
You can also use the npm run migrate:force to force the migration. This command is useful if you want to reset the database. ⚠️ Be careful, this command will drop all the tables of the database. ⚠️. This command will not migrate using the migration files that us have written, so don't use it to test if your migrations are correct.
Seed the database
```
npm run seed
```
This command will create a 3 users with the following credentials:
- email: johndoe@example.com, password: 123456
- email: janedoe@example.com, password: 123456
- email: admin@example.com, password: 123456 (this user has the ADMIN role)
Launch the backend
```
npm run dev
```
In a new terminal, install the frontend dependencies
```
cd frontend
npm install
```
Launch the frontend
```
npm run dev
```
You can now access the frontend on http://localhost:8080 and the backend on http://localhost:3000 🎉
If you want to reset the database, you can use the npm run db:reset command. This command will drop all the tables of the database, and then migrate and seed the database. ⚠️ Be careful, this command will drop all the tables of the database. ⚠️

View the mongodb database content

You can access the mongodb database with the credential defined in the .env file. (see the environment variables section for more details

For viewing the database content, you have 2 options:

Using mongo-express. This is a web interface for viewing the database content. It is available at http://localhost:8085. It is already included in the docker-compose.dev.yaml file, so you don't need to do anything to use it.
Using a GUI like MongoDB Compass

Launch the tests

Theses tests are launched in the CI/CD pipeline, but you can launch them locally for ensuring that your code is clean.

Before launching the tests, you need to install the dependencies of the project (see the Set the project ready for development section for more details). You also need to launch the docker containers (see the Set the project ready for development section for more details) and have a migrated and seeded database.

When you launching test ensure that no frontend page is open. This may interfere with the socket io tests.

There is mocks for the mailer and the payment , so you don't have to set the SENDINBLUE_KEY neither the STRIPE_SECRET environments variables for launching the tests.

You can launch the tests with
```
cd backend
npm test
```
You can verify the code sanity (for frontend & backend) with
```
cd backend # or cd frontend
npm run lint
```
You can build the frontend with
```
cd frontend
npm run build
```

Launch the project localy as in production (not recommended for development)

Clone the project

git clone git@github.com:ESGI-69/challenge-node-vue.git

Launch the docker containers
```
docker compose -f docker-compose.yaml -f docker-compose.prod.yaml up --remove-orphans --build
```
What does this command do ?
- -f docker-compose.yaml -f docker-compose.prod.yaml : use both docker-compose files to launch the containers. The docker-compose.prod.yaml file is used to add the backend & the frontend container to the docker-compose.yaml file that contains only the databases containers.
- --remove-orphans : remove the containers that are not in the docker-compose.yaml file
- --build : build the images before launching the containers for ensuring that the latest version of the images are used
You can now access the frontend on http://localhost:8080 and the backend on http://localhost:3000 🎉

Environment variables

Environment variables are used to configure the application. You can find the list of the environment variables used in the project below. You can set them in the .env file at the root of the project.

Variable name	service	Description	Default value
`NODE_ENV`	frontend backend	The environment of the application	`development`
`POSTGRES_USER`	backend	The username of the postgres database	`root`
`POSTGRES_PASSWORD`	backend	The password of the postgres database	`password`
`POSTGRES_DB`	backend	The name of the postgres database	`app`
`MONGO_ROOT_USER`	backend	The username of the mongodb database	`root`
`MONGO_ROOT_PASSWORD`	backend	The password of the mongodb database	`password`
`MONGO_DB`	backend	The name of the mongodb database	`app`
`JWT_SECRET`	backend	The secret use for the JWT generation (please genereate a random >32 letter string)
`VITE_API`	frontend	The url that match the proxy in the frontend. For avoiding CORS issues	`/api`
`VITE_API_TIMEOUT`	frontend	The timeout of the api calls, in milliseconds	`30000`
`VITE_COOKIE_TOKEN_NAME`	frontend	The name of the cookie that contains the JWT token	`challenge-token`
`FRONTEND_URL`	backend	The url of the frontend	`http://localhost:8080`
`SENDINBLUE_KEY`	backend	The API key of the sendinblue (brevo) account for the mailer
`SENDINBLUE_EMAIL`	backend	The email of the sender for the mailer
`SENDINBLUE_NAME`	backend	The name of the sender for the mailer
`STRIPE_SECRET`	backend	The secret key of stripe, example : 'sk_test_abcde' for dev and 'sk_live_abcde' for prod