Hello Dev.to community!
I've recently been working on a side project to solve a specific problem: pricing transparency in the home services market.
Most "cost calculators" online are just static forms that spit out a random range. I wanted to build an engineering-grade calculator that takes real variables into account—like trenching distance, load shedding, and local labor rates.
Here is how I built HomeGenGuide using Next.js 14 (App Router), TypeScript, and Tailwind CSS.
🛠️ The Tech Stack
Framework: Next.js 14 (App Router)
Language: TypeScript
Styling: Tailwind CSS
Deployment: Vercel
I chose the App Router specifically for its Server Components capabilities, which are crucial for the SEO architecture I planned (more on that below).
💡 Challenge 1: The Logic (It's not just A + B)
The core feature is the calculator. I moved away from simple arithmetic and implemented a logic layer that mimics how a contractor actually quotes a job.
I created a utility function calculateQuote that handles edge cases. For example, if the generator is too far from the gas meter, we need to account for trenching costs per foot.
Here is a snippet of the logic in lib/calculator.ts:
TypeScript
export function calculateQuote(inputs: CalculatorInputs, laborFactor: number = 1.0) {
// 1. Base Equipment Cost (MSRP)
let equipCost = inputs.size === 'large' ? 6500 : 4500;
// 2. Base Labor (Adjusted by local city factor)
let laborCost = 3500 * laborFactor;
// 3. Distance Correction (Trenching costs)
// If distance > 50ft, add $15/ft for digging
if (inputs.distance > 50) {
laborCost += (inputs.distance - 50) * 15;
}
// 4. Load Management
if (inputs.acUnits >= 2) equipCost += 350; // Needs load shedding module
const total = equipCost + laborCost;
return {
min: Math.floor(total * 0.95),
max: Math.ceil(total * 1.15),
};
}
By keeping this logic pure, I can easily test it and reuse it across different components.
🌍 Challenge 2: Scaling to 300+ Cities (Dynamic Routing)
One of my goals was to provide localized data (e.g., installation costs in Houston vs. New York are very different). Instead of manually creating pages, I leveraged Next.js Dynamic Routes.
I structured my data in a JSON file to act as a lightweight database:
TypeScript
// data/locations.json
type CityData = {
slug: string; // e.g., "houston"
stateSlug: string; // e.g., "texas"
laborFactor: number; // Used to adjust the calculator
climateRisk: string; // e.g., "Hurricanes"
};
Then, using the [state]/[city]/page.tsx structure, I can generate pages that are context-aware. The page knows that "Houston" has a higher risk of hurricanes and a specific labor rate, passing that laborFactor directly into the Calculator component.
TypeScript
// app/locations/[state]/[city]/page.tsx
export async function generateStaticParams() {
// Generates static paths for all 300+ cities at build time
return cities.map((city) => ({
state: city.stateSlug,
city: city.slug,
}));
}
This approach allows the site to be incredibly performant because most of the heavy lifting happens at build time on Vercel.
🎨 UI/UX: The "Wizard" Pattern
To avoid overwhelming users with complex engineering questions, I built the UI as a multi-step wizard.
I used local state to track progress and give real-time feedback. One thing I learned: always give immediate feedback. As soon as a user toggles "Propane" vs "Natural Gas," the estimated price range updates instantly without a page reload. It makes the tool feel "alive."
🚀 What's Next?
I'm currently working on refining the Schema Markup to ensure Google understands that this is a Service/Tool application. I'm also planning to add a "Compare" feature to visualize the difference between brands like Generac and Kohler.
🔗 Live Demo
This has been a fun project to practice the new Next.js 14 features. If you are interested in the code structure or want to see the calculator in action, check it out here:
👉 Live Site: https://www.home-generator-installation.com
I'd love to hear your feedback on the UX or the calculation logic!
Top comments (0)