Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.flexprice.io/llms.txt

Use this file to discover all available pages before exploring further.

This guide will help you set up the Flexprice frontend development environment and get you ready to contribute to the dashboard and user interface components.

​
Getting Started

​
Prerequisites

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

​
One-Click Setup Script

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

# Run the automated setup script
./setup

​
Alternative: Install Latest Release

# 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: ✅ Set up environment variables
✅ Install all dependencies
✅ Build Docker image (if Docker is available)
✅ Start the development server
✅ Open your browser to http://localhost:3000

​
Manual Development Setup

​
Clone & Install

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

​
Environment Setup

# Copy environment template
cp .env.example .env

# Configure these variables in .env.local:
VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
VITE_API_URL=http://localhost:8080/v1 # or <your-backend-url>
VITE_ENVIRONMENT=development

​
Start Development

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

​
Project Structure

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

​
Self-Hosting Guide

​
Docker Deployment

# Build the Docker image
docker build -t flexprice-frontend .

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

​
Manual Deployment

# Build the application
npm run build

# 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

​
Available Scripts

# 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

​
Common Development Tasks

​
Adding New Features

  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 />
}

​
Styling Components

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>
);

​
Troubleshooting

​
Common Issues

​
Build Failures

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

​
Stale Development Server

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