Frontend Integration & Future Backend Plans

Frontend Integration & Future Backend Plans

Completed Frontend Integration (Phase 1)

We have successfully replaced the placeholder homepage with a modern, responsive marketing site using Tailwind CSS v4 and Stimulus.

Key Components

• Homepage: app/views/pages/home.html.erb (Hero, Features, Testimonials, Calculator UI).
• Layout: app/views/layouts/application.html.erb with conditional _navbar and _footer partials.
• Styles: app/assets/stylesheets/application.tailwind.css using “Action Green” theme.
• Interactivity:
  • navbar_controller.js: Mobile menu toggle.
  • carousel_controller.js: Testimonial slider.
  • calculator_controller.js: Frontend-only pricing logic (mocked).

---

Future Plan: Calculator Backend Connection (Phase 2)

Goal: Connect the calling rates calculator to the real backend database instead of using hardcoded mock logic.

1. Data Service

Create app/services/rates_service.rb to handle rate lookups.

class RatesService
  def self.get_rate(country_code)
    # TODO: Fetch from Rate model or external provider (e.g., Twilio)
    # mock return for now:
    case country_code
    when 'US' then 0.02
    when 'GB' then 0.03
    else 0.05
    end
  end
end

2. API Endpoint

Create app/controllers/api/rates_controller.rb to expose the data.

module Api
  class RatesController < ApplicationController
    def index
      # Return all supported countries and their rates
      render json: RatesService.all_rates
    end

    def show
      rate = RatesService.get_rate(params[:id])
      render json: { rate: rate }
    end
  end
end

3. Update Frontend Controller

Modify app/javascript/controllers/calculator_controller.js to fetch from the API.

// ...
connect() {
  this.fetchRates()
}

async fetchRates() {
  const response = await fetch('/api/rates')
  this.rates = await response.json()
  // Update UI with real rates...
}
// ...