Maniruzzaman-Frontend-Developer

WordPress Fullstack plugin developmennt - Gutenberg block, REST API, and so many...

---

Demo Video

https://youtu.be/h-BJczvJWLI

Demo Screenshots

Capsule List In Block Editor - Text label settings

Capsule List In Block Editor - Color settings

Frontend - Capsule List with filtering+pagination

Frontend - Capsule detail popup

Frontend - No capsuel found

Frontend - Mobile responsive view

Local development Setup Instruction

Requirements:

1. Composer >= v2
2. PHP >= 7.4
3. WordPress version >= 5.8

Clone repository

git clone https://github.com/ManiruzzamanAkash/Maniruzzaman-Frontend-Developer.git

Go to folder and install composer

cd Maniruzzaman-Frontend-Developer
composer install

Npm dependencies

npm i
npm start

Start plugin

Active the plugin from your /wp-admin/plugins.php.

Plugin Flow

1. Add a post from wp-admin/post-new.php.
2. Search Gutenberg block Spacex data..
3. Insert that block.
4. Give some setting value, like -
   • Search text label
   • Pagination Previous text label
   • Pagination Next text label
5. Change impact instantly on the editor. [For editor, set the limit to 2].
6. Visit the post details in frontend.
7. Check the filtering by status, type, mission.
8. Check the pagination.
9. Check the detail of capsule in a modal.

Testing

1. PHPCS
2. PHPUnit Testing
3. Jest Unit Testing
4. e2e Testing (Snapshot testing)

PHPCS

PHPCS Checking

composer run phpcs

Fix PHPCS

composer run phpcbf

PHP Unit test

PHPUnit test running

composer run test

PHPUnit test with PHPCS

composer run test:all

Jest Unit test

npm run test:unit

PHPUnit test result

PHPCS - Passed PHPUnit - 15 tests, 23 assertions - Passed

Jest Unit Test Result

Jest Unit Test - 15 tests - Passed

e2e Test

Requirements for e2e test

1. Need to install docker on local machine. I've used wp-env package to install WordPress docker setup. You can follow this - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/
2. Commands to start from here -

npm i -g @wordpress/env --save-dev
wp-env start

If everything is successfull, you'll see something like this -

WordPress development site started at http://localhost:8888/
WordPress test site started at http://localhost:8889/
MySQL is listening on port 59087
MySQL for automated testing is listening on port 59085

Start e2e testing

npm run test:e2e

e2e Test Result

Added in Video.

Plugin zip and release commands -

# Build plugin
npm run build

# Make i18n localization
npm run makepot

# Create plugin zip
npm run zip

# Release plugin = npm run build + makepot + zip
npm run release

Known issue

For fetching capsules, use this API - https://docs.spacexdata.com/#00ac651a-8ba2-4b4c-858a-4034dd1254fa.

Here, there is a property called limit which doesn't work as expected and so some inconsitance with Pagination coud be found. But it's totally depend on the Spacex server.