# Quizell WordPress Plugin - Vue.js Conversion

This WordPress plugin has been converted from traditional PHP views to a modern Vue.js single-page application with Tailwind CSS and ShadCN UI components.

## 🚀 Setup Instructions

### Prerequisites
- Node.js (version 16 or higher)
- npm or yarn
- WordPress installation

### 1. Install Dependencies

Navigate to the plugin directory and install the required npm packages:

```powershell
cd c:\laragon\www\wp\wp-content\plugins\app-quizell-2
npm install
```

### 2. Development Mode

For development with hot reload:

```powershell
npm run dev
```

This will start the Vite development server on `http://localhost:5173`. The WordPress plugin will automatically detect the dev server and load assets from it.

### 3. Production Build

To build the application for production:

```powershell
npm run build
```

This creates optimized files in the `dist/` directory that the WordPress plugin will serve in production.

## 🏗️ Architecture

### Frontend (Vue.js)
- **Vue 3** with Composition API
- **Vue Router** for client-side routing
- **Tailwind CSS** for styling
- **ShadCN UI** components for consistent design
- **Vite** for development and building

### Backend (WordPress/PHP)
- **AJAX endpoints** for API communication
- **WordPress nonces** for security
- **Session management** for authentication
- **Original API integration** maintained

## 📁 Project Structure

```
app-quizell-2/
├── src/                          # Vue.js source files
│   ├── components/              
│   │   ├── ui/                  # ShadCN UI components
│   │   │   ├── Button.vue
│   │   │   ├── Input.vue
│   │   │   └── Card.vue
│   │   ├── LoginPage.vue        # Login page component
│   │   ├── SignupPage.vue       # Signup page component
│   │   ├── DashboardPage.vue    # Dashboard component
│   │   ├── VerifyOtpPage.vue    # OTP verification component
│   │   └── ConnectForm.vue      # Store connection component
│   ├── lib/
│   │   └── utils.js             # Utility functions
│   ├── App.vue                  # Main app component
│   ├── main.js                  # App entry point
│   └── style.css                # Global styles with Tailwind
├── includes/
│   ├── vue-root-page.php        # Updated root page for Vue
│   └── [other original files]   # Original PHP files (kept for reference)
├── ajax-handlers.php            # New AJAX endpoints for Vue
├── plugin.php                   # Updated main plugin file
├── package.json                 # npm dependencies
├── vite.config.js               # Vite configuration
├── tailwind.config.js           # Tailwind configuration
├── postcss.config.js            # PostCSS configuration
└── index.html                   # Entry HTML file
```

## 🔧 Features Converted

### ✅ Completed
1. **Login System** - Modern login form with validation
2. **Signup System** - Registration with password strength indicator
3. **OTP Verification** - 6-digit OTP input with auto-focus and paste support
4. **Dashboard** - Statistics cards and quick actions
5. **Store Connection** - Form to connect external stores
6. **Responsive Design** - Mobile-first design with Tailwind
7. **Loading States** - Spinner animations during API calls
8. **Error Handling** - User-friendly error messages
9. **Security** - WordPress nonces and AJAX endpoints

### 🎨 UI Improvements
- Modern, clean design with Tailwind CSS
- Consistent component library (ShadCN UI)
- Responsive layout for all screen sizes
- Loading states and smooth transitions
- Better form validation and user feedback
- Professional color scheme and typography

### 🔒 Security Features
- WordPress nonce verification
- Input sanitization
- CSRF protection
- Proper authentication checks

## 🚀 Usage

1. **Development**: Run `npm run dev` and work with hot reload
2. **Production**: Run `npm run build` to create optimized build
3. **WordPress**: The plugin automatically detects build files and serves accordingly

## 🔄 API Endpoints

The following AJAX endpoints are available for the Vue frontend:

- `quizell_login` - User authentication
- `quizell_signup` - User registration  
- `quizell_verify_otp` - OTP verification
- `quizell_resend_otp` - Resend OTP code
- `quizell_logout` - User logout
- `quizell_get_dashboard_data` - Dashboard statistics
- `quizell_connect_store` - Connect external store

## 📱 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 🛠️ Troubleshooting

### Development Server Issues
If the dev server doesn't load:
1. Check that port 5173 is available
2. Ensure Node.js is installed
3. Run `npm install` to ensure dependencies are installed

### Build Issues
If production build fails:
1. Check Node.js version (16+)
2. Clear node_modules and run `npm install`
3. Check for TypeScript errors in console

### WordPress Integration Issues
1. Ensure WordPress debug mode is enabled
2. Check browser console for JavaScript errors
3. Verify AJAX endpoints are responding (check Network tab)

## 🚀 Next Steps

1. Run the development server with `npm run dev`
2. Test all functionality in WordPress admin
3. Build for production with `npm run build`
4. Deploy the updated plugin

The conversion maintains all original functionality while providing a modern, responsive user interface with improved user experience.