Build A TodoList with NestJS, TypeORM and Electron Vue

Install the NestJS CLI globally, verify Node, then create a new NestJS project named 'to do' using npm, and review its Angular-like structure in Visual Studio Code.

Install NestJS Typekit to connect NestJS with a Postgres database using the Typekit ORM and a Postgres driver. Verify package.json shows type postgres and NestJS Typekit to confirm the setup.

Generate NestJS resources quickly with the CLI to create a CRUD REST API, including module, controller, service, and entities, and learn how to switch the port from 3000 to 8000.

Create a TypeORM entity for to-do with id, title, and completed fields using PrimaryGeneratedColumn and Column, then register it with TypeOrmModule.forFeature and configure a Postgres connection with synchronize for testing.

Create the initial NestJS data service by defining a todo DTO with title and completed, using database-generated IDs, and wiring dependency injection with an injectable repository for Todo.

Make NestJS get and create todo services async, and implement create todo with the todo repository save, while find all returns the full collection when no options are given.

Add update and delete todo services in the NestJS app by using repository methods, handling errors with try-catch, updating by id, and removing by id to return a delete result.

Demonstrate adding NestJS todo controller methods by leveraging the to dos service, exposing create, read, update (put or patch), and delete operations through a RESTful API.

Install and configure Electron with Vue.js to scaffold and run an app, using Vue.js with the Electron V8 builder, npm or yarn, and TypeScript, then inspect main.ts, preload, and renderer.

Install and configure Element Plus for Vue, enable hot module reloading, and use a primary button; set up Axios for http requests as you build more UI components.

Create a to-do list component in TypeScript, implement read by loading todos on mount, and create by posting new items with axios to a backend at port 8000.

Create add, update, and delete actions for todos using id references, with delete confirmations, and start building the user interface as the next video covers listing the todos.

Build a todo list UI by importing the to-do list component into app file and arranging a row and column layout with span and offset, then run dev to preview.

Build a todo table showing tasks with a title and label, set width around 350, add an operations column with a template and a switch to update the row format.

Set up a security policy to block unwanted traffic, configure http and https rules in the index.html metadata, then refresh to see your to dos load in the browser.

Add a delete button with a confirm dialog, using danger styling and an info icon, prompting the user to confirm deletion of the todo before removing it, and enabling toggling.

Create a reactive to-do form component with props and a submit handler that passes a title and completed status, validates title length, and resets the form title after submission.

Fix and wire the to-do submission in a Vue component, using submit as a prop to enable adding, deleting, and editing todos in a NestJS, TypeORM, and Electron Vue app.