Structural Analysis Studio

Interactive Theory of Structures & Indeterminate Beam Laboratory — analyze propped cantilevers, fixed beams, and continuous beams using the direct stiffness method, with live 3D visualization, shear/moment diagrams, and theory reference pages.

Features

• Indeterminate beam solver — matrix stiffness method (structuralEngine.ts) assembles global stiffness matrices, applies boundary conditions (fixed / pinned / roller / free supports), and solves for nodal displacements, reactions, and internal forces.
• Multiple beam modules — Propped Cantilever, Fixed Beam, and Continuous Beams, switchable via routed workspace URLs (/workspace/:module).
• Live 3D beam visualization — deflected shape and load rendering built with React Three Fiber / drei / three.js (Beam3D.tsx).
• Shear Force & Bending Moment Diagrams — plotted with Recharts (Diagrams.tsx).
• Theory reference pages — worked equations rendered with KaTeX (Theory.tsx).
• Gemini AI integration — server-side Gemini API access (@google/genai) for AI-assisted explanations.

Tech Stack

Layer	Technology
Frontend framework	React 19 + TypeScript
Build tool / dev server	Vite 6
Routing	React Router v7
3D visualization	Three.js, @react-three/fiber, @react-three/drei
Charts (SFD/BMD)	Recharts
Math rendering	KaTeX + react-katex
Styling	Tailwind CSS v4
Animation	Motion (Framer Motion)
Backend	Express.js
AI	Google Gemini API (@google/genai)
Utilities	clsx, tailwind-merge
Package manager	Bun (bun.lock) / npm

System Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         Browser (Client)                        │
│                                                                   │
│   App.tsx (BrowserRouter)                                        │
│     └── Layout.tsx  (nav shell, Outlet)                          │
│           ├── Workspace.tsx   /workspace/:module                 │
│           │     ├── Beam3D.tsx      → 3D scene (R3F + three.js)  │
│           │     ├── Diagrams.tsx    → SFD / BMD (Recharts)       │
│           │     └── uses:                                        │
│           │           lib/structuralEngine.ts (analyzeBeam)      │
│           │                 └── lib/matrix.ts (stiffness solve)  │
│           │                                                      │
│           └── Theory.tsx      /theory/:module                    │
│                 └── KaTeX-rendered derivations                   │
│                                                                   │
│   types.ts — shared domain types (Node, Span, Load,               │
│               AnalysisResults, SupportType)                       │
└───────────────────────────┬───────────────────────────────────────┘
                            │  HTTPS
                            ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Express Server (Node.js)                      │
│   Serves the built Vite bundle and proxies/handles                │
│   server-side Gemini API calls via @google/genai                  │
│   (keeps GEMINI_API_KEY off the client)                           │
└───────────────────────────┬───────────────────────────────────────┘
                            │
                            ▼
                   Google Gemini API

Data flow (analysis pipeline)

1. User defines the beam model in the Workspace: nodes (with support type), spans (length, E, I), and loads (point / UDL).
2. analyzeBeam(nodes, spans, loads) in structuralEngine.ts:
   • Assembles the global stiffness matrix K and load vector P span-by-span.
   • Applies boundary conditions based on each node's SupportType.
   • Solves the reduced system via matrix.ts (Matrix.solve).
   • Back-computes reactions and internal forces (shear V, moment M, deflection v) along each span.
3. Results (AnalysisResults) flow into:
   • Beam3D.tsx for the deflected-shape 3D render.
   • Diagrams.tsx for SFD/BMD charts.

Project Structure

Structural-Analysis-Studio/
├── src/
│   ├── components/
│   │   ├── Beam3D.tsx        # 3D beam + deflection visualization
│   │   ├── Diagrams.tsx       # SFD / BMD charts
│   │   └── Layout.tsx         # Nav shell + routed Outlet
│   ├── lib/
│   │   ├── matrix.ts          # Matrix ops & linear solver
│   │   ├── structuralEngine.ts# Stiffness-method beam analysis
│   │   └── utils.ts
│   ├── pages/
│   │   ├── Workspace.tsx      # Interactive model builder + results
│   │   └── Theory.tsx         # KaTeX theory reference
│   ├── types.ts               # Node, Span, Load, AnalysisResults
│   ├── App.tsx                # Route definitions
│   ├── main.tsx                # Entry point
│   └── index.css
├── index.html
├── metadata.json
├── package.json
├── vite.config.ts
├── tsconfig.json
└── .env.example

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• A Gemini API key (Google AI Studio)

Installation

git clone https://github.com/nitbig/Structural-Analysis-Studio.git
cd Structural-Analysis-Studio
npm install

Environment Setup

Copy .env.example to .env.local and set your key:

cp .env.example .env.local

GEMINI_API_KEY="your_gemini_api_key"
APP_URL="http://localhost:3000"

Run Locally

npm run dev

App runs at http://localhost:3000.

Build

npm run build
npm run preview

License

Apache-2.0