Repository for a simple Todo List Application (With bugs and tasks to be completed!!)

• When a user typed in the text input in dashboard, they can just press enter button on their keyboard to submit the task to the server. But nothing happened currently. The function to execute this action is enterPressedOnNewTask(). Resolve this.
• There is nothing happened when user clicked on the Completed Tasks tab menu button in the dashboard. It should switched between a list of available task and a list of completed tasks.
• User cannot mark their task as completed. Completed task should be removed from current Available Tasks list and available in the Completed Tasks list when user marked the task checkbox. No error returned from the server. I wonder why..?
• User cannot delete their task. The system return error status Call to a member function delete() on string.
• Other user can delete other user task! Please fix this!

• In the dashboard.vue file. There are repeated codes in line 99-110 and 133-140. Would it be better if we can extract this code as a vue component, so that it will be reusable later on?
• Update all controller methods in TaskController to use Laravel Implicit Route Model Binding, so that we don't need to manualy resolving the required Task model.

• When a new task is created, the task will be added at the bottom of the list. Is it possible to make it so that all new task will pushed at the top of the list? (Sort by creation date descendingly).
• Can user know when they completed their task? Maybe add date and time record to the task when user mark it as completed?

• Add a deadline feature. So user can select a date and time during task creation.
• Can our user categorize task? Maybe a task list for shopping items. A task list for personal items? Or work items. The user can create new/edit/delete categories. And assign task to a category during task creation.

• Ensure Docker is installed and running on your development pc.
• If you are using Windows OS, make sure to setup your docker installation properly. Docker Desktop For WSL 2
• Clone repository to your workspace folder

  IMPORTANT! For Windows OS, clone the repository in your WSL environment folder, not in Windows environment folder.

• Open terminal (or WSL terminal in Windows OS), navigate to application directory.
• Install the application's dependencies by executing the following command (Just ignore if there are errors about redis in the end - it will be resolved once we run the actual container).

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v $(pwd):/opt \
    -w /opt \
    laravelsail/php82-composer:latest \
    composer install --ignore-platform-reqs

• Copy environment keys.

cp .env.example .env

• Configure bash alias for sail application

alias sail='bash vendor/bin/sail'

• Run this command to initialize all service containers required in docker.

sail up -d

• Generate application key.

sail artisan key:generate

• Migrate and seed database.

sail artisan migrate:fresh --seed

• Read more details on Laravel Sail.

• Run this command to install application front-end dependencies

sail npm install

• Run this command to generate assets and starting up Vite development server.

sail npm run dev

• Application is available at http://localhost
• Read more details on Vite - Asset Bundling.

Laravel Pint is an opinionated PHP code style fixer. Pint is built on top of PHP-CS-Fixer and makes it simple to ensure that your code style stays clean and consistent. Running this command will automatically fixed our codes to adhere with opinionated coding style of Laravel. More details on Laravel Pint.

sail pint

If your IDE for development is Visual Studio Code. Please install these extensions:

• ESLint
• Volar for Vue 3
• Prettier code formatter

Run the command below to automatically format our codes to adhere with opinionated style of Prettier.

sail npm format

Run the command below to automatically fixed some fixable issues. Unfixable issue will be listed in the output and will require manual intervention. Volar and ESLint will provide hints on any issue they detected automatically when you are writing the codes.

sail npm lint

Telescope provides insight into the requests coming into your application, exceptions, log entries, database queries, queued jobs, mail, notifications, cache operations, scheduled tasks, variable dumps, and more. Publish telescope assets and it will be available at http://localhost/telescope.

sail artisan telescope:publish

• Docker (Containerization)
• MySQL (Database management system)
• Php (PHP Language)
• Redis (Cache, Queue and Message Broker)

• Laravel Framework (Version 10)
• Laravel Ignition (A beautiful error page for Laravel)
• Laravel Jetstream (Laravel starter kit)
• Laravel Sail (Light-weight CLI for interacting with with Laravel's default Docker dev ent)
• Laravel Sanctum (Laravel authentication system)
• Laravel Telescope (Laravel debug assistant)
• Ziggy (Javascript named route helper for Laravel)

• Inertia.js (Modern Monolith System)
• Tailwind CSS (Utility-first CSS framework)
• Vue.js (Version 3 with Composition API)
• Luxon (Wrapper for JavaScript dates and times)