emiliogrv / memo-game-example

Memo test game

Introduction

Welcome to Memo test game! This is a full-stack web application built with Laravel for the backend and Next.js for the frontend. The application uses Docker Compose to simplify the development environment setup and utilizes a PostgreSQL database.

Prerequisites

Before you can run this application, please make sure you have the following software installed on your development machine:

• Docker
• Docker Compose
• Composer
• Node.js

Getting Started

To get started with Memo test game, follow these steps:

1. Clone this repository to your local machine:

   git clone https://github.com/emiliogrv/memo-game-example.git

2. Navigate to the project directory:

   cd memo-game-example

3. Set up environment variables:

   Create a .env file in the backend directory for Laravel environment variables. You can use the .env.example file as a template.

   cp backend/.env.example backend/.env
   cp frontend/.env.example frontend/.env

4. Install dependencies:

   cd backend && composer install && cd ..
   cd frontend && npm install && cd ..

5. Generate Laravel key:

   cd backend/ && php artisan key:generate && cd ..

6. Build and run the Docker containers: This command will start the Laravel backend, Next.js frontend, and PostgreSQL database containers.

   docker-compose up --build

7. Running the Application

   Once the Docker containers are running and the dependencies are installed, you can access the application:

   - Laravel Backend: http://localhost
   // NOTE: there is a GraphQL UI available to try in http://localhost/graphiql
   
   - Next.js Frontend: http://localhost:3000
   

8. Migrating database

   backend/vendor/bin/sail artisan migrate:fresh --seed
   // NOTE: you can use the sail alias if you configured it before. See point 5 below.

   or you can connect to the laravel container and run:

   php artisan migrate:fresh --seed

9. Testing

• Backend

  backend/vendor/bin/sail artisan test
  // NOTE: you can use the sail alias if you configured it before. See point 5 below.

  or you can connect to the laravel container and run:

  php artisan test

  Coverage can be done adding the flag --coverage at the end

  php artisan test --coverage

• Frontend

  cd frontend && npm run test && cd ..

  Coverage test can be done using

  cd frontend && npm run test:ci && cd ..

Good to know

1. I used the latest stable Next.js version. I used the experimental feature Server Actions which they'll start to recommend soon (check the well to know section).
2. These Server Actions are good to keep the secrets keys away from the browser, but is still soon to get it to production and have some testing issues that was able to solved in my end. (more info in vercel/next.js#47448 and vercel/next.js#54757)
3. Frontend tests where made thinking as a user and with a positive approach in most scenarios.
4. Backend needs more testing.
5. You can use Laravel Sail to control the backend if you want to.