CrackIt: Big Equations, Broken into Small Pieces (Built for My Brother)

Ch Yasaswini — Sat, 03 Oct 2026 08:42:04 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

💡 What I Built

My younger brother is a diploma student in petrochemical engineering. Every evening, he sits with thick textbooks filled with dry, heavy equations like the Ergun Equation, Bernoulli's Principle, and Raoult's Law.

Like many engineering students, he gets bored and overwhelmed by abstract derivations. When you're trying to understand how a packed catalyst bed in an oil hydrotreater works, looking at this:

\frac{Δ P}{L} = \frac{150 μ ( 1 - ϵ ) ^{2} v _{s}}{ϵ ^{3} d _{p 2}} + \frac{1.75 ρ ( 1 - ϵ ) v _{s 2}}{ϵ ^{3} d _{p}}

...feels completely disconnected from real plant operations.

So for the Hacktoberfest "Build for a Friend" Weekend Challenge, I built CrackIt: an engineering equation interpreter designed like a friendly senior explaining over a cup of chai.

CrackIt breaks heavy formulas into small, practical pieces:

🎯 What It's For: One clear sentence connecting the formula to real plant equipment (distillation towers, hydrotreaters, heat exchangers).
🔤 Crack the Symbols: Every symbol in plain words with its engineering units, plus an Interactive Focus picker.
✏️ Worked Example: Calculations broken into 3 to 5 clean steps with round numbers.
🧪 Try It Live (Interactive Calculator): A live numeric playground where students tweak parameters (flow rates, particle size, void fraction) and watch outputs recalculate in real time.
💡 What Happens If...?: Real plant intuition, e.g. "Smaller catalyst particles create a substantially higher pressure drop due to the $d_{p 2}$ term in the denominator."
🎯 Practice Challenge & AI Feedback: Practice problems with an answer checker powered by Google's open-weight Gemma 3 4B.

🌐 Live Demo & Code

Live Application (on Render): https://crackit-ch8e.onrender.com/

Yasaswini-ch / CrackIt

Big equations, broken into small pieces.

⚗️ CrackIt

Big equations, broken into small pieces.

Built for my brother, a diploma student in petrochemical engineering who finds heavy maths boring CrackIt takes an engineering equation and breaks it into small, friendly parts, with a petrochemical plant example every time, and lets you play with the numbers live.

🌐 Live Demo & Deployment

Live on Render: https://crackit-ch8e.onrender.com/
Repository: https://github.com/Yasaswini-ch/CrackIt

What it does

Type an equation name (or pick a quick card, or upload a photo of your notes) and CrackIt shows:

The formula, rendered properly (Ergun's viscous and inertial terms are colour-labelled)
What it's for, with a real plant example
Crack the Symbols, a table of every symbol, its meaning and its unit, plus an Interactive Focus picker for any one symbol
Worked example, small round numbers, one step per line
Try it live, a calculator pre-filled with the worked-example values. Change a…

View on GitHub

📸 Screenshots & Walkthrough

1. The Equation Dashboard

Midnight Navy and Off-White interface with Inter and STIX Two Math typography.

Students can:

Type in any equation name (e.g. "Ergun equation", "Q = mCpΔT", or "Bernoulli").
Upload textbook photos to have the vision model identify the formula.
Click any of the 10 quick-start cards spanning fluid dynamics, heat transfer, kinetics, and thermodynamics.

2. The Learning Workspace

Semantic color highlights: viscous contribution in Soft Blue (#EAF3FF) vs. inertial contribution in Soft Violet (#F1ECFF).

3. Step-by-Step Breakdown, Symbols & Worked Example

Every variable cataloged with physical units, followed by sequential numeric walkthroughs.

🛠️ How I Built It

CrackIt is built around two principles: deterministic physical accuracy and open-weight AI guidance. The numbers always come from plain Python, and the AI only explains and checks.

┌─────────────────────────────────────────────────────────────────┐
│                      Browser UI: Gradio 6                       │
│      (Inter Typography + STIX Two Math + KaTeX Rendering)       │
└────────────────────────────────┬────────────────────────────────┘
                                 │
                ┌────────────────┴────────────────┐
                ▼                                 ▼
┌───────────────────────────────┐ ┌───────────────────────────────┐
│      Deterministic Core       │ │     Open-Weight AI Tutor      │
│    (Pure Python / Offline)    │ │    (Gemma 3 4B via Ollama)    │
├───────────────────────────────┤ ├───────────────────────────────┤
│ • 10 Petrochemical Formulas   │ │ • AI Practice Answer Checker  │
│ • Step-by-Step Walkthroughs   │ │ • Multimodal Vision Reader    │
│ • Real-time Live Calculator   │ │ • Cloud Fallback (Backboard)  │
└───────────────────────────────┘ └───────────────────────────────┘

1. The Open-Weight AI Core: Gemma 3 4B & Ollama

On local laptops, CrackIt runs fully offline via Ollama using Google's gemma3:4b:

Why open-weight AI? Students often study with limited bandwidth or in offline libraries. Gemma runs privately on consumer laptop hardware with zero API fees.
Multimodal equation recognition: Gemma's vision encoder reads textbook snapshots and identifies formulas directly.
Pedagogical tutor mode: Gemma checks student practice answers, explaining math or unit mistakes in at most two friendly sentences.

2. Live Cloud Deployment on Render

The application is deployed on Render as a Python web service using a render.yaml blueprint with automated port binding and dynamic environment handling.

3. Cloud Fallback & Prompt Evaluation via Backboard

So the live Render demo stays responsive for judges even without a local Ollama daemon, I integrated Backboard as a cloud inference gateway, evaluating prompts across open-weight models (google/gemma-2-9b-it).

4. Industrial Design System

Instead of generic AI gradients, CrackIt uses an engineering palette:

90% Baseline: Midnight Navy (#14263D), Deep Navy (#172B45), and Off-White (#F8FAFC).
Semantic Accents: Viscous laminar contribution in Engineering Blue (#2F80ED / #EAF3FF) and turbulent inertial contribution in Violet (#7C5CDB / #F1ECFF).
Typography: Inter for clean UI paired with STIX Two Math for proper mathematical typesetting.

🌍 Why Does Open Innovation Matter?

Engineering education shouldn't be locked behind expensive proprietary cloud subscriptions that track student data.

Open-weight models like Gemma show that a compact 4-billion-parameter model on a modest laptop can work as a personal chemical engineering tutor. When AI is open and runs locally:

Students with limited connectivity can still use AI study tools.
Plant engineers can run proprietary calculations without data leaving their laptops.
Learners are not dependent on closed API providers.

🤖 My Agent Session

CrackIt was built with the help of an autonomous AI pair-programmer. From resolving Windows Hyper-V port exclusion conflicts, to refactoring Gradio 6 lifecycle hooks, to implementing the deterministic calculation engine and custom CSS design tokens, the agent and I worked through it together. You can explore the full commit history in the GitHub Repository.

🏆 Prize Categories Entered

Overall Winner: Theme: Build for a Friend (built for my brother studying petrochemical engineering)
Featured Partner: Render: Deployed live on Render Web Services
Featured Partner: Gemma: Powered by Google's open-weight Gemma models (gemma3:4b locally, Gemma cloud via Backboard)
Partner Category: Backboard: Open-weight inference routing and prompt benchmarking
Partner Category: Entire: Agent-assisted pairing session and documented build trajectory

🧑‍🎓 The Verdict From My Brother

After testing it, my brother gave his ultimate engineering stamp of approval:

"I'm satisfied, but the pen and paper stays!"

That is exactly the right answer. CrackIt doesn't replace the notebook. It makes the math inside it actually make sense.

Built with ❤️ for my brother and engineering diploma students everywhere.

DEV Community: Ch Yasaswini