Freelancer Project Estimator

A modern, beautifully-designed single-page application that helps freelancers estimate project costs with real-time architecture visualization.

Features

• Comprehensive Feature Catalog: 15 categories with 150+ prebuilt features
• Flexible Pricing: Switch between hourly and daily rates
• Real-Time Architecture Diagram: Visual representation of your project using ReactFlow
• Dark/Light Mode: Beautiful theme switching with system preference detection
• Local Storage: All data saved securely in your browser
• Export Options: Export estimates as JSON or text
• Modern UI: Clean, 2025 aesthetic with smooth animations
• Fully Responsive: Works flawlessly on all devices
• Reset Functionality: Clear all selections with one click
• Search & Filter: Quickly find features across all categories
• Error Handling: Robust error boundaries for production stability

Tech Stack

• Next.js 16 (App Router)
• TypeScript
• React 19
• TailwindCSS for styling
• Zustand for state management
• ReactFlow for architecture diagrams
• Framer Motion for animations
• Lucide Icons
• Bun as package manager/runtime

Getting Started

Prerequisites

• Bun installed on your system

Installation

# Install dependencies
bun install

# Run development server
bun run dev

# Build for production
bun run build

# Start production server
bun run start

The application will be available at http://localhost:3000 (or another port if 3000 is in use).

Usage

1. Set Your Rates: Configure your hourly and daily rates in the Rate Settings panel
2. Select Features: Browse through categories and select features for your project
3. View Estimate: See real-time cost calculations in the Summary Panel
4. Visualize Architecture: Watch the architecture diagram update as you select features
5. Export: Download your estimate as JSON or text

Feature Categories

• UI/UX Design
• Authentication & Authorization
• Social Features
• Content Management
• Analytics & Reporting
• Media & Storage
• Payments & Billing
• E-Commerce
• Forms & Workflows
• Third-Party Integrations
• Security & Compliance
• Mobile Features
• AI & Machine Learning
• Real-Time Features
• Infrastructure & DevOps

Project Structure

/app
  /components        # UI components
    top-bar.tsx
    rate-settings.tsx
    feature-selector.tsx
    feature-category.tsx
    feature-item.tsx
    summary-panel.tsx
    architecture-diagram.tsx
    export-dialog.tsx
  /lib              # Utilities and data
    feature-data.ts  # Feature catalog
    pricing.ts       # Pricing calculations
    local-storage.ts # LocalStorage helpers
    utils.ts         # Utility functions
  layout.tsx
  page.tsx
  globals.css
/store
  use-estimator-store.ts  # Zustand store

Customization

Adding Features

Edit app/lib/feature-data.ts to add new features or categories:

{
  id: "your-feature",
  name: "Your Feature Name",
  hours: 10,
  complexity: 1.5,
  architectureNodes: ["backend", "database"]
}

Modifying Rates

Default rates can be changed in app/lib/local-storage.ts:

export function loadHourlyRate(defaultRate: number = 50): number
export function loadDailyRate(defaultRate: number = 350): number

License

MIT

Author

Built with Next.js, TailwindCSS, Zustand, ReactFlow & Framer Motion