{"id":23380983,"url":"https://github.com/ubul86/task_webapp","last_synced_at":"2026-04-11T03:31:12.605Z","repository":{"id":262786786,"uuid":"888000978","full_name":"ubul86/task_webapp","owner":"ubul86","description":"A task management application built with Laravel 10 for the backend and Vue 3 for the frontend, based on the CSIHA Zrt. test assignment and further enhanced. It features task creation, modification, filtering, time tracking, and completion management. The app is fully containerized with Docker and includes services for Nginx, PHP, MySQL, PHPMyAdmin","archived":false,"fork":false,"pushed_at":"2024-12-04T09:43:10.000Z","size":756,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-25T17:45:03.826Z","etag":null,"topics":["docker","docker-compose","dusk","laravel10","php8","phpunit","vue3","vuetify3"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ubul86.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-13T16:36:43.000Z","updated_at":"2024-12-10T07:57:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"f0df33df-ba68-475a-be85-4e96e27b8214","html_url":"https://github.com/ubul86/task_webapp","commit_stats":null,"previous_names":["ubul86/task_webapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ubul86/task_webapp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubul86%2Ftask_webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubul86%2Ftask_webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubul86%2Ftask_webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubul86%2Ftask_webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ubul86","download_url":"https://codeload.github.com/ubul86/task_webapp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubul86%2Ftask_webapp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31668046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","docker-compose","dusk","laravel10","php8","phpunit","vue3","vuetify3"],"created_at":"2024-12-21T20:37:02.028Z","updated_at":"2026-04-11T03:31:12.579Z","avatar_url":"https://github.com/ubul86.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Task Example WebApp\n\n![Task App](documentations/task_app.png)\n\n# Table of Contents\n\n- [Overview](#overview)\n- [Features](#features)\n- [Minimum Requirements](#minimum-requirements)\n- [Docker Services](#docker-services)\n- [Installation With Docker](#installation-with-docker)\n- [Installation Without Docker](#installation-without-docker)\n- [Testing and Analysis Tools](#testing-and-analysis-tools)      \n- [Running Tests](#running-tests)    \n- [Docker Installation](#docker-installation)    \n- [Docker Compose Installation](#docker-compose-installation)    \n- [Example Images](#example-images)    \n\n## Overview\n\nThis is a task management application built with Laravel 10 for the backend and Vue 3 for the frontend, featuring Pinia for state management and Vuetify for UI components.\n\n## Features\n\n- Task Creation and Modification: Users can create new tasks and modify existing ones.\n- Task Filtering and Sorting: Tasks can be filtered and sorted based on various criteria.\n- Time Tracking:\n  - Each task includes two time fields:\n    - Task Estimation Time: The estimated time to complete the task.\n    - Task Used Time: The time spent working on the task.\n  - Used Time: Users can add used time to existing tasks, and the time is added to the current Used Time field.\n- Task Completion: Tasks can be marked as \"completed\" and reverted back to \"in progress\" if needed.\n\n## Minimum Requirements\n\n- **Docker and Docker Compose**\n- **PHP**: 8.1 or higher\n- **Composer**: 2.0 or higher\n- **MySQL**: 5.7 or higher\n- **Laravel**: 10.x\n- **Node.js 20** or higher\n\n## Docker Services\n\nThis project uses Docker to containerize the different components of the application. Below is a description of each service defined in the `docker-compose.yml` file:\n\n- **nginx**: The Nginx service serves as a reverse proxy for the application, routing HTTP requests to the appropriate backend services.\n\n- **php**: This service runs the PHP application (Laravel) using PHP 8.1. It is the core backend service that handles HTTP requests, interacts with the database, and manages the application logic. The service shares the application codebase with the host machine to enable hot-reloading during development.\n\n- **mysql**: This service runs the MySQL database server, which stores the application's data. The database is configured with persistent storage to retain data across container restarts. The database credentials and other environment variables are defined in the `.env` file.\n\n- **phpmyadmin**: A web-based interface for managing MySQL databases. It allows developers to interact with the database, run queries, and manage tables via a user-friendly UI. The service is accessible via a browser on port 80 (or a custom port defined in the `.env` file).\n\n- **node**: This service is responsible for building and serving the Vue.js frontend application. It runs the Node.js server, compiles assets, and serves the frontend during development.\n- \n- **selenium**: This service runs Selenium with a Chrome browser in a container to allow automated browser testing. It listens on port 4444 and is used for running Dusk tests.\n\n\n## Installation With Docker\n\nFirst, need a fresh installation of Docker and Docker Compose\n\n### 1. Clone the Project\n\nClone the repository to your local machine:\n\n```bash\ngit clone https://github.com/ubul86/task_webapp.git\ncd task_webapp\n```\n \n### 2. Copy Environment File\n\nCopy the .env.example file to .env\n\n```bash\ncp .env.example .env\n```\n\nCopy the .env.testing.example file to .env.testing\n```bash\ncp .env.testing.example .env.testing\n```\n\n### 3. Set Environment Variables\nIn the .env file, you need to set the DB connections and some Host.\nHere is an example configuration:\n\n```env\nDB_CONNECTION=mysql\nDB_HOST=mysql82\nDB_PORT=3306\nDB_DATABASE=your_database_name\nDB_USERNAME=your_database_username\nDB_PASSWORD=your_database_password\nDB_ROOT_PASSWORD=your_database_root_password\n\nNGINX_PORT=8080\nPHPMYADMIN_PORT=45678\nVITE_API_URL=/api/\n\n```\n\nThe DB_HOST needs to be mysql82 service name.\n\n### 4. Build The Containers\n\nGo to the project root directory, where is the docker-compose.yml file and add the following command:\n\n```bash\ndocker-compose up -d --build\n```\n\n### 5. Install Dependencies:\n\nInstall PHP dependencies using Composer:\n\n```bash\ndocker exec -it {php_fpm_container_name} composer install\n```\n\nor\n```bash\ndocker exec -it {php_fpm_container_name} bash\ncomposer install\n```\n\n### 6. Generate Application Key\n\n```bash\ndocker exec -it {php_fpm_container_name} php artisan key:generate\n```\n\nor\n```bash\ndocker exec -it {php_fpm_container_name} bash\nphp artisan key:generate\n```\n\n\n### 7. Run Migrations\n\nRun the database migrations with seed:\n\n```bash\ndocker exec -it {php_fpm_container_name} php artisan migrate:fresh --seed\n```\n\nor\n\n```bash\ndocker exec -it {php_fpm_container_name} bash\nphp artisan migrate:fresh --seed\n```\n\n### 8. Install Npm Packages\n\n\n```bash\ndocker exec -it {node_container_name} npm install\n```\n\nor\n\n```bash\ndocker exec -it {node_container_name} npm install\n```\n\n### 9. Build or Watch the frontend\n\n```bash\ndocker exec -it {node_container_name} npm run build\n```\n\nor\n\n```bash\ndocker exec -it {node_container_name} npm run watch\n```\n\n### 10. Change User and Group in php container\n\nIt is necessary to change the user and group inside the PHP container. This is currently an issue using the application with Docker, unfortunately.\n\n```bash\ndocker exec -it {php_container} chown -R www-data:www-data *\n```\n\n## Installation Without Docker\n\n### 1. Clone the Project\n\nClone the repository to your local machine:\n\n```bash\ngit clone https://github.com/yourusername/your-repository.git\ncd your-repository\n```\n\n### 2. Install Dependencies\n\nInstall PHP dependencies using Composer:\n\n```bash\ncomposer install\n```\n\n### 3. Copy Environments File\n\nCopy the .env.example file to .env\n\n```bash\ncp .env.example .env\n```\n\nCopy the .env.testing.example file to .env.testing\n\n```bash\ncp .env.testing.example .env.testing\n```\n\n### 5. Configure the Database\n\nCreate a new database for the project and set the database connection in the .env file. Update the following lines in your .env file. There is an example setting:\n\n```env\nDB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=your_database_name\nDB_USERNAME=your_database_username\nDB_PASSWORD=your_database_password\n```\n\n### 6. Run Migrations\n\nRun the database migrations:\n\n```bash\nphp artisan migrate\n```\n\n### 7. Seed the Database\n\nSeed the database with initial data:\n\n```bash\nphp artisan db:seed\n```\n\n### 8. Start the Development Server\n\nRun the Laravel development server:\n\n```bash\nphp artisan serve\n```\n\nThe application should now be accessible at http://localhost:8000.\n\n### 9. Install Npm Packages\n\n```bash\nnpm install\n```\n\n### 10. Build or Watch the Frontend With Vite\n\n```bash\nnpm run build\n```\n\nor\n\n```bash\nnpm run watch\n```\n\n## Testing and Analysis Tools\n\n### PHP CodeSniffer (PHPCS)\n\nPHPCS is used to check coding standards and style violations.\n\n```bash\ncomposer lint\n```\n\nor\n\n```bash\ndocker exec -it {php_fpm_container} composer lint\n```\n\n### PHPStan\n\nPHPStan is used for static code analysis to find bugs and improve code quality.\n\nRun PHPStan:\n\n```bash\ncomposer analyse\n```\n\nor \n\n```bash\ndocker exec -it {php_fpm_container} composer analyse\n```\n\nNote: You might need to update your phpstan.neon configuration if you encounter issues or deprecations.\n\n## Running Tests\n\n### PHPUnit\n\nUnit tests are written using PHPUnit. To run tests, first configure SQLite in-memory database in phpunit.xml or .env.testing file. This setup allows you to run tests without affecting your actual database. The database is created and discarded during each test run, ensuring a clean state.\n\n- Open phpunit.xml and set up the SQLite in-memory database configuration:\n```xml\n\u003cphpunit bootstrap=\"vendor/autoload.php\" colors=\"true\"\u003e\n    \u003cphp\u003e\n        \u003cenv name=\"DB_CONNECTION\" value=\"sqlite\"/\u003e\n        \u003cenv name=\"DB_DATABASE\" value=\":memory:\"/\u003e\n    \u003c/php\u003e\n\u003c/phpunit\u003e\n```\n\n- Run the tests:\n```bash\nphp artisan test\n```\n\nor\n\n```bash\ndocker exec -it {php_fpm_container} php artisan test\n```\n\nThis will execute all tests in the tests directory and provide a summary of test results.\n\n### Dusk Testing\n\nIn addition to unit testing with PHPUnit, this project supports end-to-end testing using Laravel Dusk. To run Dusk tests, the following steps are required:\n\n#### 1. Install the necessary dependencies: Ensure that the necessary environment variables are configured in the .env.sample or .env file.\n\nAdd the following lines to the .env.sample file:\n\n```env\nDUSK_DRIVER=chrome\nDUSK_DRIVER_URL=http://selenium:4444/wd/hub\nAPP_URL=http://nginx  # Set the correct URL for your app when using Docker\n```\n\n#### 2. Set up Selenium: Ensure that the selenium service is included in your docker-compose.yml file (as shown above).\n\n#### 3. Install Chromium: If you're running Dusk tests inside a Docker container, ensure that Chromium is installed and accessible. This can be added to the Dockerfile for the PHP service or a separate service if necessary.\n\n#### 4. Run the Dusk tests: Once the environment is configured, run the Dusk tests with the following command:\n\n```bash\ndocker-compose exec php php artisan dusk\n```\n\nThis will execute all the Dusk tests in the tests/Browser directory. The tests will run using Selenium with the Chrome browser.\n\nBy following these updated instructions, you can now run both PHPUnit unit tests and Laravel Dusk browser tests within the Dockerized environment.\n\n\n## Docker Installation\n\n### Linux\n\n- Ubuntu: https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-20-04\n- For Linux Mint: https://computingforgeeks.com/install-docker-and-docker-compose-on-linux-mint-19/\n\n### Windows\n\n- https://docs.docker.com/desktop/windows/install/\n\n## Docker Compose Installation\n\n### Linux\n\nhttps://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-compose-on-ubuntu-20-04\n\n### Windows\n- Docker automatically installs Docker Compose.\n\n## Example Images\n\n![Task App Overview](documentations/task_example_image_1.png )\n![New Task](documentations/task_example_image_2.png )\n![Filtering Tasks with Completion And Show Estimated and Used Times](documentations/task_example_image_3.png )\n![Increase Used Time of Selected Task](documentations/task_example_image_4.png )\n![Filtering Tasks by User](documentations/task_example_image_5.png )\n![Toggle Visibility of the Database Header Columns](documentations/task_example_image_6.png )\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fubul86%2Ftask_webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fubul86%2Ftask_webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fubul86%2Ftask_webapp/lists"}