Martiniano Plugin - WordPress Plugin with Vue 2

A WordPress plugin that retrieves data from a remote API and displays it through an admin-only Vue.js application with tables, graphs, and settings.

About the Code Challenge

Access /docs folder files to find:

• PRD.md: This project was developed following a Product Requirements Document (PRD) that outlines the features, user stories, and technical specifications
• intro.md: chat history with the project introduction
• AI_chat_history.mp4: video with the complete chat history with AI

The functional plugin zip can be found in the martiniano-plugin/martiniano-plugin.zip to be installed on any wordpress website, or it can be rebuilded following the instructions below.

Features

• 📊 Data Table View - Display paginated data with customizable rows (1-5)
• 📈 Graph Visualization - Interactive line charts using vue-chartjs 3.5.1
• ⚙️ Settings Management - Configure date format and notification emails
• 🔒 Admin-Only Access - Requires manage_options capability
• 💾 Smart Caching - 1-hour server-side caching of external API data
• 🎨 Vue 2 SPA - Single-page application with tab navigation
• ♿ Accessible - WCAG 2.1 Level AA compliant
• 🌍 i18n Ready - Internationalization support

Tech Stack

• Backend: PHP 7.3+, WordPress 5.0+, WordPress REST API
• Frontend: Vue 2.7, Vuex 3.x, Vue Router 3.x, vue-chartjs 3.5.1, Chart.js 2.9.4
• Build: Webpack 5, Babel
• Development: Docker, Docker Compose

Prerequisites

• Docker

Quick Start with Docker

1. Start the Development Environment

# Start all services (WordPress, MySQL, Node.js)
docker-compose up -d

# Check service status
docker-compose ps

This will:

• Start WordPress on http://localhost:8080
• Start MySQL database
• Build the Vue application automatically

2. Initial WordPress Setup

1. Visit http://localhost:8080
2. Complete WordPress installation:
   • Site Title: Your choice
   • Username: admin
   • Password: (choose a strong password)
   • Email: your email
3. Click "Install WordPress"

3. Build and Install the Plugin

Build the Plugin ZIP

# Build the Vue assets and package the plugin
docker-compose up -d node && docker exec martiniano-node npm install && docker exec martiniano-node npm run zip

This creates martiniano-plugin.zip in the martiniano-plugin directory.

Install via WordPress Admin

1. Log in to WordPress admin (http://localhost:8080/wp-admin)
2. Go to Plugins → Add New → Upload Plugin
3. Click Choose File and select martiniano-plugin/martiniano-plugin.zip
4. Click Install Now
5. Click Activate Plugin
6. Navigate to Martiniano Plugin in the admin menu

4. Development Workflow

Making Changes

After making code changes, rebuild and reinstall:

# Rebuild Vue assets
docker exec martiniano-node npm run zip

# Reinstall plugin via WordPress admin

Watch Mode for Active Development

# Start watch mode
docker exec martiniano-node npm run dev

# Or enter the Node container
docker exec -it martiniano-node sh
npm run dev  # Inside container

Note: Watch mode only works if the plugin folder is mounted as a volume. For testing deletion/uninstall, use the manual ZIP installation method.

Project Structure

monster/
├── docker-compose.yml          # Docker services configuration
├── docs/
│   └── PRD.md                  # Product Requirements Document
├── martiniano-plugin/
│   ├── martiniano-plugin.php   # Main plugin file
│   ├── uninstall.php           # Uninstall cleanup script
│   ├── readme.txt              # WordPress.org readme
│   ├── includes/               # PHP backend classes
│   │   ├── class-activation.php      # Plugin activation handler
│   │   ├── class-settings.php        # Settings CRUD operations
│   │   ├── class-rest-controller.php # REST API endpoints
│   │   └── helpers.php               # Utility functions
│   ├── src/                    # Vue source files
│   │   ├── main.js             # Vue app entry point
│   │   ├── App.vue             # Root Vue component
│   │   ├── i18n.js             # Vue i18n configuration
│   │   ├── router/
│   │   │   └── index.js        # Vue Router configuration
│   │   ├── store/
│   │   │   ├── index.js        # Vuex store root
│   │   │   └── modules/
│   │   │       ├── settings.js # Settings state management
│   │   │       └── pages.js    # Pages data state management
│   │   ├── views/
│   │   │   ├── TableView.vue   # Table tab component
│   │   │   ├── GraphView.vue   # Graph tab component
│   │   │   └── SettingsView.vue # Settings tab component
│   │   ├── components/
│   │   │   └── LineChart.vue   # Chart.js line chart wrapper
│   │   ├── services/
│   │   │   └── api.js          # Axios API client
│   │   └── locales/
│   │       ├── en.json         # English translations
│   │       └── pt_BR.json      # Portuguese (Brazil) translations
│   ├── dist/                   # Built Vue bundles (generated)
│   │   └── app.js              # Compiled Vue application
│   ├── languages/              # WordPress translation files
│   │   ├── martiniano.pot      # Translation template
│   │   └── pt_BR/
│   │       ├── martiniano-pt_BR.po  # Portuguese translations
│   │       └── martiniano-pt_BR.mo  # Compiled translations
│   ├── package.json            # Node.js dependencies
│   ├── webpack.config.js       # Webpack build configuration
│   ├── .babelrc                # Babel transpilation config
│   ├── .eslintrc.js            # ESLint configuration
│   ├── .gitignore              # Git ignore rules
│   └── create-zip.sh           # Plugin ZIP creation script
└── README.md                   # This file

REST API Endpoints

GET /wp-json/martiniano/v1/pages

Proxies external API and returns cached or fresh data.

Response:

{
  "graph": { ... },
  "table": { ... }
}

GET /wp-json/martiniano/v1/settings

Returns all saved settings.

Response:

{
  "rows": 5,
  "dateFormat": "human",
  "emails": ["admin@example.com"]
}

POST /wp-json/martiniano/v1/settings

Updates all settings in a single request (bulk update).

Request:

{
  "rows": 3,
  "dateFormat": "unix",
  "emails": ["admin@example.com", "user@example.com"]
}

Note: All fields are optional.

Response:

{
  "rows": 3,
  "dateFormat": "unix",
  "emails": ["admin@example.com", "user@example.com"]
}

Database

The plugin creates a custom table on activation:

CREATE TABLE wp_martiniano_settings (
  id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,
  setting_key VARCHAR(64) NOT NULL,
  setting_value VARCHAR(255) NOT NULL,
  updated_at DATETIME NOT NULL,
  PRIMARY KEY (id),
  UNIQUE KEY setting_key (setting_key)
);

Testing

Manual Testing Checklist

• Plugin installs and activates successfully
• Admin menu appears for administrators only
• Table tab displays data with correct columns
• Graph tab renders chart correctly
• Settings tab saves all three settings
• Row count changes reflect in table (1-5)
• Date format toggles between human/unix
• Email list allows add/remove (1-5 emails)
• Validation errors show for invalid inputs
• Tab persistence works across page refresh
• Cache expires after 1 hour
• Translations load correctly (english and portuguese implemented)

API Testing

# Get pages (requires authentication)
curl -H "X-WP-Nonce: YOUR_NONCE" http://localhost:8080/wp-json/martiniano/v1/pages

# Get settings
curl -H "X-WP-Nonce: YOUR_NONCE" http://localhost:8080/wp-json/martiniano/v1/settings

# Update settings (bulk)
curl -X POST \
  -H "Content-Type: application/json" \
  -H "X-WP-Nonce: YOUR_NONCE" \
  -d '{"rows":3,"dateFormat":"unix","emails":["admin@test.com"]}' \
  http://localhost:8080/wp-json/martiniano/v1/settings

Webpack build fails

• Remove node_modules: docker-compose exec node rm -rf node_modules
• Reinstall: docker-compose exec node npm install

Port 8080 already in use

Edit docker-compose.yml and change the WordPress port:

ports:
  - "8081:80"  # Changed from 8080

Built with ❤️ by Martiniano