Skip to content

Demonstration of React Todo App as WordPress plugin using WordPress components and packages

License

Notifications You must be signed in to change notification settings

dawidurbanski/wordpress-todoapp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Todo App as WordPress Plugin

This is a demo of WordPress plugin with cusom UI built in React.

Main features:

  • Includes adding, removing, editing, marking as complete and filtering todos.
  • Persists all todos as WordPress custom post type posts
  • Completed state stored in post metadata.
  • There is no custom REST endpoint registered. Everything is handled with native functions.

Screenshot:

CleanShot 2024-11-22 at 08 09 27@2x

It uses WordPress packages like @wordpress/components, @wordpress/core-data, @wordpress/data and @wordpress/icons.

The main purpose of this project is to showcase how to build such interfaces "the WordPress way".

There's not so much out there showing how it's done in practice so I made this little demo to help you get started.

Demo

Running locally

The only requirement is Node (recommended at least version 20).

  1. Clone this repository: git clone [email protected]:dawidurbanski/wordpress-todoapp.git
  2. Go to the folder: cd wordpress-todoapp
  3. Run: npm install & npm run build
  4. Run: npm run start
  5. Visit http://localhost:8881/wp-admin/admin.php?page=todoapp

Development

When you have your site running (with npm run start) you can run npm run dev to have assets build without running npm run build.

You can opt in for HMR (Hot Module Replacement) feature by running npm run dev -- --hot.

About

Demonstration of React Todo App as WordPress plugin using WordPress components and packages

Resources

License

Stars

Watchers

Forks

Packages

No packages published