I built a "Single Source of Truth" for OpenClaw: Docs, Troubleshooting, and a Skills Leaderboard

vanxxx — Tue, 10 Feb 2026 15:47:16 +0000

If you’ve ever tried to onboard a tool from scattered docs, random issues, and community snippets, you know how much time gets lost.

I built OpenClaw Guide to solve that pain for OpenClaw users:

👉 https://open-claw.online

What I built

The site currently includes:

Step-by-step setup docs (Windows + VPS)
Channel integration guides (Telegram / WhatsApp / Feishu)
Troubleshooting playbooks
A skills leaderboard with periodic data refresh
Multilingual support (EN + ZH)

Why I made it

I wanted one place that is practical, searchable, and operations-focused — not just feature descriptions.

The goal is simple: reduce setup friction and make debugging faster for real users.

What I’d love feedback on

Which missing guides would help most?
What parts are unclear or too long?
What would make troubleshooting pages more actionable?

If you have 2 minutes, I’d really appreciate your feedback:

I built a home generator cost calculator with Next.js 14 and Dynamic Routing

vanxxx — Sat, 24 Jan 2026 13:07:12 +0000

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!

Forem: vanxxx

I built a "Single Source of Truth" for OpenClaw: Docs, Troubleshooting, and a Skills Leaderboard

What I built

Why I made it

What I’d love feedback on

I built a home generator cost calculator with Next.js 14 and Dynamic Routing