⚡️ Flexprice Frontend

Usage-based metering & billing for developers

Build usage-based, credit-based, or hybrid pricing models with full control. Flexprice handles metering, pricing, and invoicing so you can focus on building, not billing.

Documentation • Demo • Website • LinkedIn

• 🏗️ Open Architecture
• 🚀 Quick Setup
• 🛠️ Manual Development Setup
• 🏗️ Project Structure
• 🌐 Self-Hosting Guide
• 📚 Available Scripts
• 🔧 Common Development Tasks
• 🔍 Troubleshooting
• 📚 Documentation
• 🚀 Latest Releases
• 👨🏻‍💻 Let's Build Together!
• 🤝 Contributing
• 🆘 Need Help?
• 🔒 Security
• 📝 Changelog
• 📄 License

The Flexprice core (metering, credits, pricing, billing) has an open and composable design.

Your application, whether it's running backend APIs, AI agents, or custom workflows, can send usage data to Flexprice. You can directly stream data from data warehouses or analytics pipelines as well.

At the core, Flexprice processes this data in real time. We handle everything that usually ends up as custom logic built by developers. Our platform calculates pricing based on the customer’s plan, applies any prepaid or promotional credits, enforces feature limits, and generates accurate invoices automatically. Whether you're using seat-based subscriptions, usage-based pricing, or prepaid credit bundles, you can set up and iterate on your pricing model without writing billing infrastructure from scratch.

After billing is computed, our platform connects to your existing tools for payments, CPQ, CRM, and accounting, ensuring billing information flows into the systems your business already uses. It can sync invoices to your payment processor, update customer data in your CRM, and push revenue numbers to your accounting tools.

With this architecture, you get full control over how billing works inside your product, while saving your team from the complexity of maintaining it all.

• 🎯 Usage Metering - Real-time tracking of custom usage events
• 💳 Credit Management - Prepaid and promotional credit systems
• 📊 Flexible Pricing - Support for usage-based, subscription, and hybrid models
• 🔧 Feature Management - Entitlements and usage limits per plan
• 📄 Automated Invoicing - Clear, accurate invoices with real-time data
• 🔌 Easy Integration - Simple SDKs for Go, Python, and JavaScript
• 🏗️ Self-Hostable - Open source with full control over your infrastructure
• 📈 Real-time Analytics - Comprehensive usage and billing insights

• Node.js 16+ and npm/yarn
• Git for version control
• VS Code (recommended) or any modern editor
• Docker (optional, for containerized development)

# Clone the flexprice frontend repository
git clone https://github.com/flexprice/flexprice-front
cd flexprice-front

# Run the automated setup script
./setup

# Download and install the latest release
curl -s https://api.github.com/repos/flexprice/flexprice-front/releases/latest | grep "browser_download_url.*tar.gz" | cut -d '"' -f 4 | wget -qi -
tar -xzf flexprice-front-*.tar.gz
cd flexprice-front-*
./setup

The setup script will automatically:

1. ✅ Set up environment variables
2. ✅ Install all dependencies
3. ✅ Build Docker image (if Docker is available)
4. ✅ Start the development server
5. ✅ Open your browser to http://localhost:3000

1. Clone & Install

git clone https://github.com/flexprice/flexprice-front
cd flexprice-front
npm install

1. Environment Setup

# Copy environment template
cp .env.example .env

# Configure these variables in .env.local:
VITE_SUPABASE_URL=your-supabase-utl

VITE_SUPABASE_ANON_KEY=your-supabse-anon-key

VITE_API_URL=http://localhost:8080/v1 or <your-backend-url>

VITE_ENVIRONMENT=development

1. Start Development

npm run dev

Visit http://localhost:3000 to see your app running!

src/
├── components/          # UI Components
│   ├── atoms/          # Basic UI elements
│   │   ├── Button/
│   │   ├── Input/
│   │   └── Card/
│   ├── molecules/      # Composite components
│   │   ├── Forms/
│   │   ├── Charts/
│   │   └── Tables/
│   └── organisms/      # Complex UI sections
│       ├── Dashboard/
│       ├── Billing/
│       └── Analytics/
├── pages/              # Route components
├── hooks/              # Custom React hooks
├── store/              # State management
├── utils/              # Helper functions
├── models/             # TypeScript types
└── core/              # Core business logic

1. Build the Docker image

docker build -t flexprice-frontend .

1. Run the container

docker run -p 80:80 \
  -e VITE_API_URL=your-api-url \
  -e VITE_AUTH_DOMAIN=your-auth-domain \
  flexprice-frontend

1. Build the application

npm run build

1. Serve the static files

# Using nginx
cp nginx.conf /etc/nginx/conf.d/flexprice.conf
nginx -s reload

# Or using serve
npx serve -s dist

# Development
npm run dev           # Start development server
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint        # Run ESLint
npm run lint:fix    # Fix ESLint errors
npm run format      # Format with Prettier

1. Create a feature branch:

git checkout -b feat/new-feature

1. Create component structure:

mkdir -p src/components/organisms/NewFeature
touch src/components/organisms/NewFeature/index.tsx
touch src/components/organisms/NewFeature/NewFeature.test.tsx

1. Add route (if needed):

// src/core/routes/Routes.tsx
import NewFeature from '@/components/organisms/NewFeature'

// Add to routes array
{
  path: '/new-feature',
  element: <NewFeature />
}

We use Tailwind CSS with custom configurations:

// Example component with Tailwind
const Button = ({ children }) => <button className='px-4 py-2 bg-primary hover:bg-primary-dark rounded-md'>{children}</button>;

1. Build Failures

# Clear dependencies and cache
rm -rf node_modules
rm -rf .vite
npm install

1. Stale Development Server

# Reset development server
rm -rf node_modules
rm -rf .vite
npm install
npm run dev

Our comprehensive documentation covers all aspects of the FlexPrice frontend:

• Getting Started Guide - Quick setup and first steps
• Project Structure - Understanding the codebase organization
• Conventions - Coding standards and best practices

• Component Guidelines - Building and maintaining UI components
• State Management - Managing application state with Zustand and Context
• API Integration - Working with the backend API
• Onboarding Guide - New developer onboarding process

• Flexprice Docs - Documenttation for Flexprice sdk and Apis
• Contributing Guide - How to contribute to the project

# Download the latest release
curl -s https://api.github.com/repos/flexprice/flexprice-front/releases/latest | grep "browser_download_url.*tar.gz" | cut -d '"' -f 4 | wget -qi -

# Or clone the latest release
git clone --depth 1 --branch $(curl -s https://api.github.com/repos/flexprice/flexprice-front/releases/latest | grep "tag_name" | cut -d '"' -f 4) https://github.com/flexprice/flexprice-front.git

Whether you're a newbie coder or a wizard 🧙‍♀️, your perspective is golden. Take a peek at our:

📜 Contribution Guidelines

🏗️ Local Development Setup

❤️ Code of Conduct

We welcome contributions from the community! Here's how you can help:

1. Fork the repository
2. Clone your fork: git clone https://github.com/flexprice/flexprice-front.git
3. Create a feature branch: git checkout -b feat/amazing-feature
4. Make your changes
5. Commit with a clear message: git commit -m "Add amazing feature"
6. Push to your branch: git push origin feat/amazing-feature
7. Open a Pull Request

• 🐛 Bug fixes - Help us squash bugs
• ✨ New features - Add functionality that others can use
• 📚 Documentation - Improve our docs and guides
• 🎨 UI/UX improvements - Make the interface better
• ⚡ Performance - Optimize code and improve speed
• 🧪 Tests - Add or improve test coverage

• Check existing issues and discussions
• Read our Contributing Guide for detailed guidelines
• Follow our Code of Conduct
• Ensure your code follows our coding standards

• 💬 Join our Discussions
• 📧 Email us at dev@flexprice.io
• 🐛 Report issues via GitHub Issues

• 📧 Email: support@flexprice.io
• 🐛 Report Issues
• 💬 Discussions

We take security seriously. If you discover a security vulnerability, please follow these steps:

1. Do not open a public issue
2. Email us at security@flexprice.io
3. Include a detailed description of the vulnerability
4. We'll respond within 48 hours

For more information, see our Security Policy.

We maintain a detailed changelog of all notable changes to this project. See our CHANGELOG.md for the complete history.

# Get latest release info
curl -s https://api.github.com/repos/flexprice/flexprice-front/releases/latest | jq '.tag_name, .published_at, .body'

This project is licensed under the AGPLv3 License - see the LICENSE file for details.

Flexprice follows an "Open Core" model where the core technology is fully open source, while some enterprise features may require a commercial license.