Project Structure

Understanding how KiviCare is organized will help you navigate the codebase efficiently and know exactly where to make changes.

Directory Overview

React Dashboard (app/dashboard/)

👉 This is the main development area for frontend features.

Location: app/dashboard/main.jsx
When to edit: Rarely — only for global configuration changes.

vite.config.js — Build Configuration

Configures the Vite build tool.

export default {
  plugins: [react(), v4wp()],
  server: { port: 8080 },
  resolve: { alias: {...} }
}

Location: Root directory
When to edit: When adjusting build settings, aliases, or plugins.

package.json — Node Dependencies

Defines JavaScript dependencies and scripts.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^19.2.0"
  }
}

Location: Root directory
When to edit: When adding or updating npm packages.

composer.json — PHP Dependencies

Defines PHP dependencies and autoloading.

{
  "autoload": {
    "psr-4": {
      "App\\": "./app"
    }
  }
}

Location: Root directory
When to edit: When adding PHP libraries.

Where to Add Custom Code

Custom React Component

Create in:
app/dashboard/components/custom/MyComponent.jsx

import React from 'react';

export const MyComponent = () => {
  return <div>My Custom Component</div>;
};

Custom Page

Create in:
app/dashboard/views/custom/MyPage.jsx

Register the route in:
app/dashboard/router/indexRouter.js

Custom API Service

Create in:
app/dashboard/api/myService.js

import { useQuery } from '@tanstack/react-query';

export const useMyData = () => {
  return useQuery({...});
};

Custom Styles

Edit:
app/dashboard/assets/scss/custom.scss

.my-custom-class {
  background: #7016d0;
  padding: 1rem;
}

Custom PHP Controller

Create in:
app/controllers/api/MyController.php

<?php
namespace App\controllers\api;

class MyController extends WP_REST_Controller {
  // Your controller logic
}

Build Output (dist/)

These files are generated automatically — do not edit them.

Generated when:

• npm run dev (development)
• npm run build (production)

PHP Backend (app/)

Work here when building backend logic, database features, or REST API endpoints.

Configuration Files

• vite.config.js — Build tool configuration
• .eslintrc.json (if present) — JavaScript linting rules
• composer.json — PHP autoloading and dependencies

Important Paths

Path Aliases

Use aliases instead of long relative paths.

// ❌ Avoid
import { Button } from '../../../components/atoms/Button';

// ✅ Recommended
import { Button } from '@components/atoms/Button';

Available aliases (defined in vite.config.js):

• @app → app/dashboard
• @api → app/dashboard/api
• @components → app/dashboard/components
• @shortcodes → app/shortcodes
• @elementor → app/elementor/widgets

Next Steps

Ready to customize?

→ Continue to First Customization

Quick Reference