-
- To get started, edit the page.js file.
-
-
- Looking for a starting point or more instructions? Head over to{" "}
-
- Templates
- {" "}
- or the{" "}
-
- Learning
- {" "}
- center.
-
+
+ {/* Title */}
+
RC Compatibility Explorer
+
+ {/* Search Field */}
+
+
+ {/* Skeleton Loader */}
+ {loading && (
+
+ {Array.from({ length: 6 }).map((_, i) => (
+
+ ))}
-
-
+ )}
+
+ {/* Results */}
+ {!loading && results?.length > 0 && (
+ <>
+
Search Results
+
+ {results.map((item) => (
+
+ ))}
+
+
+ )}
+
+ {/* No Results */}
+ {!loading && results?.length === 0 && (
+
No matching models or parts found.
+ )}
);
}
diff --git a/src/app/part/[partId]/page.js b/src/app/part/[partId]/page.js
new file mode 100644
index 0000000..5bff0c5
--- /dev/null
+++ b/src/app/part/[partId]/page.js
@@ -0,0 +1,44 @@
+import { getPart, getCompatibleModels } from "@/lib/ui/api";
+
+export default async function PartDetailPage({ params }) {
+ const { partId } = await params;
+
+ const part = await getPart(partId);
+ const models = await getCompatibleModels(partId);
+
+ if (!part) return
Part not found
;
+
+ return (
+
+
+
{part.name}
+
Part ID: {part.id}
+
+ {part.universalFit && (
+
+ Universal Fit
+
+ )}
+
+ {part.upgrade && (
+
+ Upgrade Part
+
+ )}
+
+
+
Compatible Models
+
+ {Array.isArray(models) && models.length ? (
+ models.map((item) => (
+
+ ))
+ ) : (
+
No compatible models found.
+ )}
+
+
+ );
+}
diff --git a/src/app/styles/components/model-card.scss b/src/app/styles/components/model-card.scss
new file mode 100644
index 0000000..3ec3120
--- /dev/null
+++ b/src/app/styles/components/model-card.scss
@@ -0,0 +1,6 @@
+@use "../variables" as *;
+
+.model-card {
+ @apply border rounded p-4 shadow;
+ background: $card-bg;
+}
\ No newline at end of file
diff --git a/src/app/styles/components/navbar.scss b/src/app/styles/components/navbar.scss
new file mode 100644
index 0000000..375fa12
--- /dev/null
+++ b/src/app/styles/components/navbar.scss
@@ -0,0 +1,7 @@
+@use "../variables" as *;
+@reference "tailwindcss";
+
+.navbar {
+ @apply flex gap-4 p-4 border-b;
+ background: $nav-bg;
+}
\ No newline at end of file
diff --git a/src/app/styles/components/part-card.scss b/src/app/styles/components/part-card.scss
new file mode 100644
index 0000000..271c95d
--- /dev/null
+++ b/src/app/styles/components/part-card.scss
@@ -0,0 +1,6 @@
+@use "../variables" as *;
+
+.part-card {
+ @apply border rounded p-4 shadow;
+ background: $card-bg;
+}
\ No newline at end of file
diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css
new file mode 100644
index 0000000..bc199ac
--- /dev/null
+++ b/src/app/styles/globals.css
@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+}
diff --git a/src/app/styles/globals.scss b/src/app/styles/globals.scss
new file mode 100644
index 0000000..e0d6ecf
--- /dev/null
+++ b/src/app/styles/globals.scss
@@ -0,0 +1,11 @@
+@use "./variables" as *;
+@use "tailwindcss";
+
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+ background: $background;
+ color: $text-color;
+}
\ No newline at end of file
diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss
new file mode 100644
index 0000000..23e841c
--- /dev/null
+++ b/src/app/styles/variables.scss
@@ -0,0 +1,13 @@
+$background: #ffffff;
+$text-color: #111111;
+
+$primary: #0070f3;
+$secondary: #7928ca;
+
+$card-bg: #f8f8f8;
+$nav-bg: #fafafa;
+
+:root {
+ --color-primary: #0070f3;
+ --color-secondary: #7928ca;
+}
diff --git a/src/lib/compatibility/engine.js b/src/lib/compatibility/engine.js
new file mode 100644
index 0000000..e079efd
--- /dev/null
+++ b/src/lib/compatibility/engine.js
@@ -0,0 +1,75 @@
+import { MODELS } from "../data/models";
+import { PARTS } from "../data/parts";
+import { getModel, getPart } from "./utils";
+import { scoreCompatibility } from "./scoring";
+
+// Check model-to-part compatibility
+export function isCompatible(modelId, partId) {
+ const model = getModel(modelId, MODELS);
+ const part = getPart(partId, PARTS);
+
+ if (!model || !part) {
+ return { compatible: false, reason: "Unknown model or part" };
+ }
+
+ const directFit = part.fitsModels.includes(modelId);
+ const sameBrand = model.brand && part.brand && part.brand === model.brand;
+ const sameCategory = model.categories.includes(part.category);
+ const universal = !!part.universalFit;
+
+ const generationMatch = part.generation
+ ? part.generation === model.generation
+ : false;
+
+ const score = scoreCompatibility({
+ directFit,
+ sameBrand,
+ sameCategory,
+ universal,
+ generationMatch
+ });
+
+ return {
+ compatible: score > 0,
+ score,
+ details: {
+ directFit,
+ sameBrand,
+ sameCategory,
+ universal,
+ generationMatch
+ }
+ };
+}
+
+// Get all compatible parts for a model
+export function getCompatibleParts(modelId) {
+ return PARTS
+ .map(part => ({
+ part,
+ result: isCompatible(modelId, part.id)
+ }))
+ .filter(item => item.result.compatible)
+ .sort((a, b) => b.result.score - a.result.score);
+}
+
+// Get models that fit a part
+export function getCrossCompatibleModels(partId) {
+ return MODELS
+ .map(model => ({
+ model,
+ result: isCompatible(model.id, partId)
+ }))
+ .filter(item => item.result.compatible)
+ .sort((a, b) => b.result.score - a.result.score);
+}
+
+// Suggest alternative parts in same category
+export function suggestAlternatives(partId) {
+ const part = getPart(partId, PARTS);
+ if (!part) return [];
+
+ return PARTS.filter(p =>
+ p.category === part.category && p.id !== partId
+ );
+}
diff --git a/src/lib/compatibility/scoring.js b/src/lib/compatibility/scoring.js
new file mode 100644
index 0000000..7824788
--- /dev/null
+++ b/src/lib/compatibility/scoring.js
@@ -0,0 +1,11 @@
+export function scoreCompatibility({ directFit, sameBrand, sameCategory, universal, generationMatch }) {
+ let score = 0;
+
+ if (directFit) score += 100;
+ if (sameBrand) score += 20;
+ if (sameCategory) score += 15;
+ if (generationMatch) score += 10;
+ if (universal) score += 5;
+
+ return Math.min(score, 100);
+}
diff --git a/src/lib/compatibility/utils.js b/src/lib/compatibility/utils.js
new file mode 100644
index 0000000..e20e77f
--- /dev/null
+++ b/src/lib/compatibility/utils.js
@@ -0,0 +1,7 @@
+export function getModel(modelId, models) {
+ return models.find(m => m.id === modelId) || null;
+}
+
+export function getPart(partId, parts) {
+ return parts.find(p => p.id === partId) || null;
+}
diff --git a/src/lib/data/categories.js b/src/lib/data/categories.js
new file mode 100644
index 0000000..622b085
--- /dev/null
+++ b/src/lib/data/categories.js
@@ -0,0 +1,11 @@
+export const CATEGORIES = [
+ "drivetrain",
+ "suspension",
+ "chassis",
+ "shocks",
+ "electronics",
+ "steering",
+ "wheels",
+ "tires",
+ "body"
+];
diff --git a/src/lib/data/models.js b/src/lib/data/models.js
new file mode 100644
index 0000000..30eed97
--- /dev/null
+++ b/src/lib/data/models.js
@@ -0,0 +1,29 @@
+export const MODELS = [
+ {
+ id: "tamiya-hotshot",
+ brand: "Tamiya",
+ name: "Hotshot",
+ scale: "1/10",
+ year: 1985,
+ categories: ["drivetrain", "suspension", "chassis", "shocks"],
+ generation: 1,
+ },
+ {
+ id: "tamiya-supershot",
+ brand: "Tamiya",
+ name: "Super Shot",
+ scale: "1/10",
+ year: 1986,
+ categories: ["drivetrain", "suspension", "chassis", "shocks"],
+ generation: 1,
+ },
+ {
+ id: "traxxas-rustler-4x4",
+ brand: "Traxxas",
+ name: "Rustler 4x4",
+ scale: "1/10",
+ year: 2018,
+ categories: ["drivetrain", "suspension", "electronics", "steering"],
+ generation: 2,
+ }
+];
diff --git a/src/lib/data/parts.js b/src/lib/data/parts.js
new file mode 100644
index 0000000..faf86cf
--- /dev/null
+++ b/src/lib/data/parts.js
@@ -0,0 +1,29 @@
+export const PARTS = [
+ {
+ id: "TAM-198055",
+ name: "Hotshot Front Gearbox",
+ category: "drivetrain",
+ fitsModels: ["tamiya-hotshot", "tamiya-supershot"],
+ notes: "Original vintage fit.",
+ },
+ {
+ id: "TAM-430512",
+ name: "Super Shot Steering Knuckle",
+ category: "steering",
+ fitsModels: ["tamiya-supershot"],
+ },
+ {
+ id: "TRA-6755X",
+ name: "Traxxas Steel Driveshaft Upgrade",
+ category: "drivetrain",
+ fitsModels: ["traxxas-rustler-4x4"],
+ upgrade: true,
+ },
+ {
+ id: "GEN-UNIV-55MM",
+ name: "Generic 55mm Shock Set",
+ category: "shocks",
+ fitsModels: ["tamiya-hotshot", "tamiya-supershot"],
+ universalFit: true,
+ },
+];
diff --git a/src/lib/data/schema.js b/src/lib/data/schema.js
new file mode 100644
index 0000000..d3f7e73
--- /dev/null
+++ b/src/lib/data/schema.js
@@ -0,0 +1,21 @@
+export function validateModel(model) {
+ if (!model.id) throw new Error("Model missing id");
+ if (!model.name) console.warn(`Model ${model.id} missing name`);
+ if (!Array.isArray(model.categories))
+ throw new Error(`Model ${model.id} categories must be an array`);
+}
+
+export function validatePart(part) {
+ if (!part.id) throw new Error("Part missing id");
+ if (!part.name) throw new Error(`Part ${part.id} missing name`);
+ if (typeof part.category !== "string")
+ throw new Error(`Part ${part.id} must have a category`);
+ if (
+ !Array.isArray(part.compatibleModels) &&
+ !Array.isArray(part.fitsModels)
+ ) {
+ throw new Error(
+ `Part ${part.id} must include 'compatibleModels' or 'fitsModels'`
+ );
+ }
+}
diff --git a/src/lib/search/search.js b/src/lib/search/search.js
new file mode 100644
index 0000000..77dff70
--- /dev/null
+++ b/src/lib/search/search.js
@@ -0,0 +1,18 @@
+import { MODELS } from "../data/models";
+import { PARTS } from "../data/parts";
+
+export function searchModels(query) {
+ const q = query.toLowerCase();
+ return MODELS.filter(m =>
+ m.name.toLowerCase().includes(q) ||
+ m.brand.toLowerCase().includes(q)
+ );
+}
+
+export function searchParts(query) {
+ const q = query.toLowerCase();
+ return PARTS.filter(p =>
+ p.name.toLowerCase().includes(q) ||
+ p.id.toLowerCase().includes(q)
+ );
+}
diff --git a/src/lib/ui/api.js b/src/lib/ui/api.js
new file mode 100644
index 0000000..798a05d
--- /dev/null
+++ b/src/lib/ui/api.js
@@ -0,0 +1,27 @@
+import { fetchJSON, BASE_URL } from "./fetch";
+
+export function getModel(id) {
+ return fetchJSON(`/api/models/${id}`);
+}
+
+export function getPart(id) {
+ return fetchJSON(`/api/parts/${id}`);
+}
+
+export function getCompatibleParts(modelId) {
+ return fetchJSON(`/api/compatibility/model/${modelId}`);
+}
+
+export function getCompatibleModels(partId) {
+ return fetchJSON(`/api/compatibility/part/${partId}`);
+}
+
+export async function getPartsByModel(modelId) {
+ return fetchJSON(`/api/compatibility/model/${modelId}`);
+}
+
+export async function getPartsByCategory(modelId, categoryName) {
+ return fetchJSON(
+ `/api/compatibility/model/${modelId}?category=${categoryName}`
+ );
+}
diff --git a/src/lib/ui/fetch.js b/src/lib/ui/fetch.js
new file mode 100644
index 0000000..17a309d
--- /dev/null
+++ b/src/lib/ui/fetch.js
@@ -0,0 +1,18 @@
+const port = process.env.PORT || 3000;
+
+// BASE_URL resolved for server & browser
+export const BASE_URL =
+ typeof window === "undefined"
+ ? process.env.API_ROOT || `http://localhost:${port}`
+ : "";
+
+// Universal JSON fetcher
+export async function fetchJSON(path) {
+ const url = BASE_URL + path;
+
+ const res = await fetch(url, { cache: "no-store" });
+
+ if (!res.ok) return null;
+
+ return res.json();
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..038881d
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ theme: {
+ extend: {
+ colors: {
+ primary: "var(--color-primary)",
+ secondary: "var(--color-secondary)"
+ }
+ }
+ }
+};