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.
Before you can run this application, please make sure you have the following software installed on your development machine:
To get started with Memo test game, follow these steps:
-
Clone this repository to your local machine:
git clone https://github.com/emiliogrv/memo-game-example.git
-
Navigate to the project directory:
cd memo-game-example
-
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
-
Install dependencies:
cd backend && composer install && cd .. cd frontend && npm install && cd ..
-
Generate Laravel key:
cd backend/ && php artisan key:generate && cd ..
-
Build and run the Docker containers: This command will start the Laravel backend, Next.js frontend, and PostgreSQL database containers.
docker-compose up --build
-
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
-
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
-
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 endphp artisan test --coverage
-
Frontend
cd frontend && npm run test && cd ..
Coverage test can be done using
cd frontend && npm run test:ci && cd ..
- 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).
- 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) - Frontend tests where made thinking as a user and with a positive approach in most scenarios.
- Backend needs more testing.
- You can use Laravel Sail to control the backend if you want to.