Something I created for the Syde (Inpsyde) take-home coding test. Didn't get the job but this was fun!
The "Users Table" WordPress plugin dynamically displays a table of users fetched from an external API (https://jsonplaceholder.typicode.com/users) on the WordPress frontend. This table showcases user details such as ID, name, and username. Users can click on these details to view more information about each user without reloading the page, thanks to AJAX calls.
- Custom Endpoint: The plugin introduces a custom endpoint (/users-table/) to WordPress, displaying the users' table.
- AJAX-Enabled Detail View: Clicking on a user detail fetches and displays additional information asynchronously.
- Caching: Implements caching for API responses using WordPress Transients API, enhancing performance and reducing API call frequency.
- Extensible and Customisable: Offers hooks for further customization and extension by developers.
- PHP 8.0 or higher: Utilizes modern PHP features for improved performance and security.
- WordPress 5.7 or higher: Ensures compatibility with recent WordPress features and improvements.
- Composer: For managing PHP dependencies.
- PHPUnit: Version 8.5.37 for unit tests ensuring code quality and reliability.
- WP Mock: For mocking WordPress functions in unit tests (Thanks to the 10up team!)
- Node.js (v19 or higher): Required for compiling JavaScript assets.
- NPM: For managing Node.js packages
NOTE: Please flush permalinks if custom endpoint (/users-table/) is not working.
-
Install Composer: Make sure Composer is installed on your system. If not, follow the official Composer installation guide.
-
Install PHPUnit and WP Mock: After installing Composer, run the following commands to install PHPUnit and WP Mock globally on your system:
composer global require phpunit/phpunit composer global require 10up/wp_mock:dev-master
-
Install Node.js (v19 or higher): Download and install Node.js from the official site. Ensure you're installing version 19 or above.
-
Download the Plugin: Clone this repository into your WordPress plugins directory:
cd wp-content/plugins git clone https://github.com/baberparweez/users-table -
Install PHP Dependencies: Navigate to the plugin directory and run Composer to install PHP dependencies:
cd users-table composer install -
Install JavaScript Dependencies: Install the required Node.js packages:
npm install
-
Activate the Plugin: Log into your WordPress admin dashboard, go to Plugins, and activate "Users Table."
To compile JavaScript and SCSS files (assuming you have a build script defined in your package.json):
npm run buildThis command should compile your SCSS and JavaScript files, typically outputting to a dist directory within your plugin folder.
To run the PHPUnit tests, navigate to this plugin's directory and execute:
./vendor/bin/phpunitTo run the PHP Codesniffer test, navigate to this plugin's directory and execute:
./vendor/bin/phpcsMake sure you have the phpunit.xml.dist and phpcs.xml.dist configuration files in your plugin directory that defines the test suites.
-
I opted to not use any JS library like React or Vue. This was to intially save time and for a task this size, including additional libraries or frameworks would be an overkill. For a plugin that would grow over time, I would opt to use latest techniques and adopt React with Vite for this particular plugin.
-
I included my assets for SCSS and JS within an index.js file. To improve, I would have split this further and included all SCSS in one parent file—with the same being done for all JS. In this plugin, I kept it simple as it worked and I applied minimal styles and JS.
-
I would have created more accurate unit tests that I understand better but I used WP Mock for the very first time so it was challenging and intriguing.
Contributions are welcome! Please feel free to submit pull requests or open issues to discuss proposed changes or enhancements.
This project is open-sourced under the MIT License