Co-Shares Frontend Application to CiviShares

Overview

A Vue 3 + TypeScript application that provides a user interface for CiviCRM Shares.

Prerequisites

npm or yarn
Access to Co-Shares WordPress backend

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test

Environment Setup

Your Wordpress site requires the following plugins:

JWT Authentication for WP REST API
CiviCRM JWT Generator and API
REST API Password Reset with Code
CiviCrm
CiviShares

Copy .env.example to .env:

cp .env.example .env

Configure required environment variables:

# Application
VITE_APP_TITLE = 'Co-Shares'
VITE_SITE_URL = 'https://your-wordpress-site.com' # Your Wordpress CiviCRM site URL
VITE_SHARES_TO_BUY_ENABLED = 'true' # Enable/disable share purchasing functionality

# Auth & API
VITE_BASIC_AUTH_BASE64 = '...' # Base64 encoded credentials if Basic Auth is required
VITE_WP_PASSWORD_RESET_URL = '/wp-json/bdpwr/v1/reset-password'
VITE_WP_SET_PASSWORD_URL = '/wp-json/bdpwr/v1/set-password'
VITE_WP_VALIDATE_CODE_URL = '/wp-json/bdpwr/v1/validate-code'

# Stripe Integration
VITE_STRIPE_KEY = 'test' # 'test' or 'live' - selects which payment processor ID to use from API

# Configuration
VITE_COUNTRIES_ARRAY='[...]' # JSON string of allowed countries

Project Structure

src/
├── components/
│   ├── auth/           # Authentication components
│   ├── forms/          # Form components and JSON Forms renderers
│   ├── shares/         # Share management components
│   └── common/         # Reusable components
├── services/           # API services
├── stores/             # Pinia stores
├── types/              # TypeScript definitions
└── views/              # Page components

Testing

Unit Tests

npm run test:unit

E2E Tests with Cypress

# Start Cypress
npm run test:e2e

# Run headless
npm run test:e2e:ci

Deployment

# Build production assets
npm run build

# Preview production build
npm run preview

Troubleshooting

Common issues and solutions:

Authentication Issues

Verify WordPress site URL in .env
Check JWT token configuration
Clear browser cache and local storage

Support

GitHub Issues: Report a bug
Documentation: Project Wiki
Email Support: coshares-support@pixellab.co.uk

License

MIT License

21 April 2026