#!/bin/zsh
echo "🚀 Setting up RC Compatibility App (Next.js + Tailwind v4 + Sass)..."
BASE="src/app"
#############################################
# 1️⃣ CREATE DIRECTORY STRUCTURE
#############################################
mkdir -p "$BASE"
mkdir -p "$BASE/model/[modelId]"
mkdir -p "$BASE/category/[modelId]/[categoryName]"
mkdir -p "$BASE/part/[partId]"
mkdir -p "$BASE/compatibility"
mkdir -p "$BASE/garage"
mkdir -p "$BASE/components"
mkdir -p "$BASE/styles/components"
#############################################
# 2️⃣ WRITE ROOT LAYOUT + MAIN PAGES
#############################################
cat > "$BASE/layout.js" << 'EOF'
import "./styles/globals.scss";
export const metadata = {
title: "RC Compatibility Explorer",
description: "Find compatibility across RC models and parts",
};
export default function RootLayout({ children }) {
return (
{children}
);
}
EOF
cat > "$BASE/page.js" << 'EOF'
export default function HomePage() {
return (
RC Compatibility Explorer
Search for RC models, parts, and compare compatibility.
);
}
EOF
#############################################
# 3️⃣ MODEL PAGE
#############################################
cat > "$BASE/model/[modelId]/page.js" << 'EOF'
export default function ModelPage({ params }) {
const { modelId } = params;
return (
Model: {modelId}
Details and component categories for this RC model.
);
}
EOF
#############################################
# 4️⃣ CATEGORY PAGE
#############################################
cat > "$BASE/category/[modelId]/[categoryName]/page.js" << 'EOF'
export default function CategoryPage({ params }) {
const { modelId, categoryName } = params;
return (
{categoryName} for {modelId}
List of compatible parts for this category.
);
}
EOF
#############################################
# 5️⃣ PART DETAIL PAGE
#############################################
cat > "$BASE/part/[partId]/page.js" << 'EOF'
export default function PartDetailPage({ params }) {
const { partId } = params;
return (
Part Detail: {partId}
Specifications and compatibility info.
);
}
EOF
#############################################
# 6️⃣ COMPATIBILITY EXPLORER
#############################################
cat > "$BASE/compatibility/page.js" << 'EOF'
export default function CompatibilityPage() {
return (
Compatibility Explorer
Compare RC models and parts side-by-side.
);
}
EOF
#############################################
# 7️⃣ GARAGE
#############################################
cat > "$BASE/garage/page.js" << 'EOF'
export default function GaragePage() {
return (
Your Garage
Save your RC models and parts here.
);
}
EOF
#############################################
# 8️⃣ COMPONENTS
#############################################
cat > "$BASE/components/SearchBar.js" << 'EOF'
export default function SearchBar() {
return (
);
}
EOF
cat > "$BASE/components/ModelCard.js" << 'EOF'
export default function ModelCard({ model }) {
return (
{model.name}
{model.scale} Scale
);
}
EOF
cat > "$BASE/styles/components/model-card.scss" << 'EOF'
.model-card {
@apply border rounded p-4 shadow;
background: $card-bg;
}
EOF
cat > "$BASE/components/PartCard.js" << 'EOF'
export default function PartCard({ part }) {
return (
{part.name}
ID: {part.id}
);
}
EOF
cat > "$BASE/styles/components/part-card.scss" << 'EOF'
.part-card {
@apply border rounded p-4 shadow;
background: $card-bg;
}
EOF
cat > "$BASE/components/NavBar.js" << 'EOF'
import Link from "next/link";
import "../styles/components/navbar.scss";
export default function NavBar() {
return (
);
}
EOF
cat > "$BASE/styles/components/navbar.scss" << 'EOF'
.navbar {
@apply flex gap-4 p-4 border-b;
background: $nav-bg;
}
EOF
#############################################
# 9️⃣ INSTALL TAILWIND v4 + SASS
#############################################
echo "📦 Installing Tailwind v4 & Sass..."
npm install -D tailwindcss@latest sass
#############################################
# 🔟 GLOBAL STYLES + VARIABLES
#############################################
cat > "$BASE/styles/variables.scss" << 'EOF'
$background: #ffffff;
$text-color: #111111;
$primary: #0070f3;
$secondary: #7928ca;
$card-bg: #f8f8f8;
$nav-bg: #fafafa;
:root {
--color-primary: #0070f3;
--color-secondary: #7928ca;
}
EOF
cat > "$BASE/styles/globals.scss" << 'EOF'
@import "tailwindcss";
@import "./variables";
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: $background;
color: $text-color;
}
EOF
#############################################
# 1️⃣1️⃣ OPTIONAL: TAILWIND CONFIG (THEME COLORS)
#############################################
cat > tailwind.config.js << 'EOF'
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
primary: "var(--color-primary)",
secondary: "var(--color-secondary)"
}
}
}
};
EOF
echo "🎉 RC Compatibility App fully set up with Next.js + Tailwind v4 + Sass!"