Beam Analyser

Check it out here!

A modern, interactive web app for visualizing and analyzing beams under various loads and supports. Built with Svelte, Vite, Plotly.js, p5.js, and Tailwind CSS.

Features

• 🏗️ Beam Modeling: Define beam length, add point loads, distributed loads, and supports.
• 📊 Interactive Visualization: View real-time beam diagrams, Shear Force Diagrams (SFD), and Bending Moment Diagrams (BMD).
• 🎨 Custom loads: Support for user-defined load functions like 2x + 5sin(3x).
• 📱 Responsive Design: Works great on desktop and mobile, with adaptive layout.
• 🧮 Robust Validation: Input validation and error highlighting for reliable results.
• 🔗 Open Source: MIT licensed and available on GitHub.

Acknowledgement

This is a project given by our ME101 (Engineering Mechanics) Instructor, Professor Tapan Krishnakumar Mankodi. I am grateful to him for giving me a chance to utilise and apply the concepts he taught in class in a real, hands-on project.

Development Process

Prerequisites

• Node.js (v18+ recommended)
• pnpm (or use npm/yarn)

Installation

pnpm install

Development

pnpm dev

Open your browser to http://localhost:5173 to use the app.

Build for Production

pnpm build

Project Structure

• src/lib/ — Svelte components, beam logic, and assets
• src/routes/ — Main app layout and routing
• static/ — Static files (robots.txt, favicon, etc.)

Technologies Used

• Svelte
• Vite
• Tailwind CSS
• Plotly.js
• p5.js