Build A TodoList with Laravel, PHP and Electron React

Install and use Docker and kool to set up a Laravel base project quickly. Start Docker services and configure kool for cross-project testing across Mac, Windows, and Linux.

Set up a Laravel project using docker, PHP 8, and Postgres, exploring docker compose configuration, Laravel presets, and pulling the repo to initialize the environment.

Configure the emv file for the Laravel app with the database host, port, and credentials, then run setup to pull Docker images and initialize the app, database, and cache.

Create a Laravel model and migration for a todo with title and completed fields, define fillable attributes, run migrations with artisan via cool, verify the table, and set up API.

Generate a Laravel api controller with artisan make:controller and name it api/todo controller. Configure api resource routes, import the todo controller, and verify the routes with artisan route:list.

Implement the Laravel API store method to create to-dos, return a JSON response with the new todo and a 200 status, and populate the database for testing.

Implement Laravel controller methods for API requests to fetch all todos using eloquent, fetch a single todo with find or fail, and return JSON responses with status 200.

Discover how to update todo items via a Laravel API using the request id and fillable properties, returning a JSON response with status 200 and automatic created and updated timestamps.

Delete a todo by its id via a Laravel API request, verify it no longer exists in the database, and confirm a 200 response.

Create an Electron desktop app by using Electron Builder and cloning the Electron React Boilerplate, install dependencies with npm install, and run npm start to build and launch the app.

Install Ant Design as the UI framework for the Electron React app, import its CSS, and start using the button component with various types while consulting the docs.

Create a todo service to connect to a restful API by defining a services folder, a todo interface, and fetch-based functions for retrieving, updating, and deleting todos.

Implement create, update, and delete actions for to-dos using fetch calls to a URL with JSON payloads, handling IDs and completion status in a Laravel, PHP and Electron React app.

Create a todo list component in a React Electron app, use state and effect to manage active and completed tasks, and wire create, delete, load, and update to the service.

Load todos from JSON and set active todos and completed todos, then implement a refresh flow with an async onRefresh callback and error handling.

Build a modular to-do list interface by creating tab components and a dedicated to-do item, with props for removal and toggle, using React and TypeScript.

Create a reusable to-do item component with props for the to-do, remove and toggle methods, and actions using a switch, tooltip, and pop confirm.

Add todo tabs to modify and view items, including marking complete, deleting, and submitting form data with a status toggle for due dates in Laravel PHP and Electron React app.

Add a functional todo form in a React Electron app, featuring a two-column layout, form validation, and submission to create new items.