An Animal Crossing: New Horizons (ACNH) themed to-do list as a WordPress plugin! Todos are stored in your Wordpress MySQL datastore for persistence. Styled fully in LESS and CSS-modules and React.
distPublicPath: '/<YOUR_WORDPRESS_NAME>/wp-content/plugins/acnh-todo-app/dist/',
If other settings in wpackio.server.js are not accurate for your deployment, update them as well.
You can alternatively run delete wpackio.server.js and run npm run bootstrap to automatically generate the file.
export const todosRoute = "http://<SERVER_ADDRESS>/<YOUR_WORDPRESS_NAME>/?rest_route=/acnh-todo-app/v1/todos";
Update the todosRoute constant in src/api/apiRoutes.js to ensure that the widget can sends HTTP requests to the correct route.
(E.g. http://localhost:8888/acnh_todos/?rest_route=/acnh-todo-app/v1/todos )
In the plugins/acnh-todo-app folder, run the following command:
npm install
This will likely take a minute or two. ☕
In the plugins/acnh-todo-app folder, run the following command:
npm run build
This will generate a dist/ folder that contains the minified resources for the app.
Using the block editor, add a Shortcode block where you want the todo app to live on your WP site. Add the following HTML code into the block.
<div id="acnh-todo"></div>
To break down the src folder structure further:
api/ # Route for WP REST API
assets/ # Static FontAwesome SVGs
components/ # Stateless Components - UI logic
containers/ # Stateful Components - Presentation logic
React Components are split into components and containers, according to stateful containers and "contained" stateless components. This architecture of containers and components allow for easy extensibility down the line as complex UI components can just be grouped and contained entirely within containers.
The file provisioning the REST API on the server layer is acnh-todo-app.php, which describes the following routes:
- 'acnh-todo-app/v1/todos'
GET- Returns all the tasks currently stored.POST- Creates a new task.
- 'acnh-todo-app/v1/todos/update/<id>'
POST- Updates a task with that id.
- 'acnh-todo-app/v1/todos/delete/<id>'
POST- Deletes a task with that id.
- 'acnh-todo-app/v1/todos/clear'
POST- Clears all tasks in the datastore.
The plugin creates a table called <YOUR-WP-PREFIX>acnh_todos in your WordPress deployment's database. (Not making a custom WordPress Post type.) The schema is as follows:
| todo_id | todo_text | todo_complete |
|---|---|---|
Autoincrementing tinyint(3) for identification |
To-do varchar(255) description |
Boolean for status |
- Slow Load of todos due to REST API calls:
- Understandably the UI has a noticeable delay as the state change is not visible until the API is called and data is fetched back from the server.
- Possible Mitigations: Optimistic UI - UI can change optimistically first before data is fetched to respond to the user first for user delight.
- Synchronous Representation of Data:
- The plugin can be accessed from multiple browsers, and the data is not updated when one client makes changes to the datastore when another is viewing.
- Possible Mitigations: PubSub or Polling. I think with tighter data coupling, synchronous data representation would likely be easier.
Note: This plugin was an exercise for my personal API and WP development skills. If I had to (and I think I might!) rebuild the application with whatever stack I wanted, I would simply use the React FrontEnd with a localStorage data store (like redux-persist) instead of a full MAMP stack. I think that would have huge performance benefits and would be easier to maintain + fits the application better.
MIT