Build A TodoList with ASP.NET and Electron React

Install the dot net core 6 release candidate framework using the correct mac or Windows installer for arm 64 or x 64, then verify with net --version in the terminal.

Install Visual Studio and SQL Server to complete the tutorial, using the community edition of Visual Studio and the free developer version of SQL Server.

Connect to SQL Server after installation using Windows authentication, then create a new database named to do app, which is initially empty and will host tables in future videos.

Create an ASP.NET Core API for a to-do app using Visual Studio 2022, ASP.NET Core Web API template with dotnet 6.0 and no authentication, then configure controllers and data access.

Install Entity Framework Core, Entity Framework Design, and Entity Framework Tools via the NuGet package manager to enable database connections for the todo app today.

Learn to configure a database connection by creating a connection string in appsettings.json, retrieving it via configuration, and wiring it into your ASP.NET and Electron React todo project.

Create a todo model with id, title, and completed; add a TodoContext with a DbSet<Todo>; configure services to use SQL Server.

Create a migration to mirror your to-do model in the database using the package manager console to add migration and update-database, then review the generated tables and columns.

Create an ASP.NET Core todos controller, inject the todo context, and implement delete, put, post, and get actions using Entity Framework to manage tasks.

Implement async endpoints to fetch all todos and a single todo by id using entity framework core, returning appropriate action results and not found handling.

Create an async post method that saves a todo to the database using the EF Core context and returns the created todo with its new id via CreatedAtAction.

Update a todo item using an async post/put flow with Entity Framework Core, validating id and handling concurrency exceptions to save changes and return the updated todo.

Implement an async delete method in Entity Framework Core to locate a todo, remove it, return not found if missing, and return no content, then test with Insomnia or Postman.

Run the ASP.NET Core RESTful API, test endpoints with insomnia, create, read, update, and delete todo items, and observe IDs, titles, and completion status stored in the database.

Learn to set up an Electron desktop app with Electron Builder and Electron React boilerplate, clone the repo, install dependencies with npm install, and start the app with npm start.

Install and integrate the Ant Design UI library into an electron react app, import its CSS, and implement a button with various types while reviewing component docs.

Create a todo service to connect to a RESTful API by adding a services folder, a base URL, a todo interface, and fetch-based methods for retrieving, updating, and deleting todos.

Create, update, and delete todo items via a base URL using application/json payloads and fetch responses, updating the title and completed fields by id, and deleting by id.

Create a to-do list component in a new components folder using react hooks, CSS, and ant design layout, wiring create, load, update, and delete services.

Explore how the to do list loads todos from JSON, updates active and completed states, and implements refresh with useCallback and useEffect in React.

Build a modular to-do app by creating separate components for tabs, a to-do item, and the list, with props for remove and toggle actions.

Create a to-do item component with props for the to-do, remove and toggle actions, using a list item with tooltip, switch, popconfirm, and color by completion.

Add features to modify and view to-do items by completing, deleting, and toggling status, with form submission handling for new to-dos and due dates.

Add a form component to the to-do app using React and TSX, with submit handling, default values, and validation, in a two-column layout with a 20 gutter.