Build A TodoList with Laravel, PHP and Electron Vue

Build the basis of a Laravel application using Docker and Cool. Install Docker Desktop, start the Docker service, and install Cool on Linux, macOS, or Windows.

Create a Laravel project by pulling docker images, selecting PHP and Postgres, and reviewing the Docker Compose YAML with Nginx, cache, and related configurations in VS Code.

Update the .env for Postgres in a Laravel docker image, run the initial setup to create app, database, and cache, and manage on port 80 with docker-compose.

Create a Laravel model and a corresponding migration to build a todo list, defining title and completed fields, running migrations, and verifying the database schema for api development.

Create a Laravel API controller with Artisan make:controller for a todo resource, define index, store, show, update, and destroy, and expose them via an API resource route for todos.

Implement the store method to save todos in the Laravel api endpoint, return a json response with status 200, and verify creation by populating and viewing database entries.

Implement Laravel API methods to fetch all todos with eloquent and get a single todo by id with find or fail, returning JSON responses and testing the endpoints.

Update todo items via Laravel API by id, using find or fail, and fillable properties for safe updates; return a JSON response with 200 status and automatic created_at and updated_at.

Make a delete api request in Laravel for a todo by its id, verify the record is removed from the database, and confirm a 200 success response.

Install electron vue to start the project, using Vue.js with the Electron V8 builder, scaffold the electron app with npm or yarn, and run and modify main and renderer code.

Explore ui frameworks and install Element Plus for Vue.js via npm install to add a primary button, then run dev for hot module reloading and prepare Axios integration.

Learn to add create and read actions for a to-do list by building a to-do list component in TypeScript, loading items, and creating new entries with axios.

Develop add, update, and delete actions for todos, use IDs, handle delete confirmations and cancellations, and begin building the UI to display the list.

Import the todo list component into the app file, adjust the row and column layout with an offset to center the UI, and prepare to render and load todos.

Create a todo list table in Laravel, PHP and Electron Vue, with title and operations columns, using a template and scope to update rows on click; no data yet.

Configure a security policy to allow http and https traffic by setting the metadata tag in index.html. Debug the load of todos in the local browser and Electron app.

Add a delete button for todos with a confirm dialog and danger, info icon; confirm title 'Are you sure you want to delete this?', then perform delete and refresh.

Create a reactive to-do form component in a Vue-based Electron app, define props, submit a to-do with title and completed status, and label the input with placeholder 'Enter to do'.

Build a functional to-do list in a Laravel, PHP, and Electron Vue app by wiring up props to submit todos, plus delete and edit items for a complete task manager.