Temper

Inspiration

Alex is a day trader in ES futures who journals every New York session by hand, reviewing screenshots and notes after market close. Temper is the project he wished existed: an automated, game‑style review of his daily routine that QHacks practically invited us to build.

When Alex launched Quartz, a quant trading bot for ES futures, Vishnu got hooked on systematic trading and the idea of automating trader workflows. Collaborating on Temper was the perfect way for him to step into quant and finance while still flexing backend skills.

Seeing a prize sponsored by National Bank Capital Markets, plus a workshop from a market maker, made the idea click: automate trading psychology the same way quant automates execution, and wrap it in a playful experience we actually want to use.

Our tone and visuals borrow from chess.com (blunder / brilliant icons) for the move‑grade vocabulary and from Duolingo for the idea of a supportive, slightly chaotic mascot that celebrates disciplined days and calls out tilt with humor.

What it does

Temper is a trading psychology game review for day traders.

You export your trades (from a broker, prop firm, or CSV) and Temper reconstructs your session trade by trade. For each decision, it:

Labels the move as Brilliant, Best, Good, Inaccuracy, Mistake, Blunder, or Megablunder using deterministic rules based on your own plan, risk, and context.
Detects overtrading, revenge trading, FOMO, loss aversion, and under‑sizing by scanning sequences, cooldown violations, and risk patterns.
Builds an annotated P/L timeline and price chart with Lightweight Charts where every entry/exit is marked with chess‑style icons and Temper’s mascot reaction.
Computes a Temper Score (0–100) and a Decision Elo so you can track psychological performance independent of raw P/L.
Generates a coach view that walks you through your day like a chess.com Game Review: “Here’s the revenge sequence”, “Here’s the disciplined cut”, and “Here’s the missed win if you followed plan.”

Instead of just saying “you lost money,” Temper tells you how well you actually played your strategy, where you tilted, and what tomorrow’s single focus should be.

How we built it

We built Temper as a modern, full‑stack web app: a React/Next.js frontend that feels like a polished trading terminal and a FastAPI backend that runs deterministic psychology logic and integrates with LLMs for natural‑language coaching.

Trade data flows from CSV or API → FastAPI → rule engine → labelled events → Supabase → real‑time UI. The frontend subscribes via REST/queries, renders annotated charts, and lets traders drill from a day overview into individual trades and bias sequences.

On the backend, we define explicit rules for concepts like overtrading, revenge trading, and loss aversion (e.g., “X trades opened within N minutes after a −2R loss with increased size” becomes a Revenge Blunder). For explanations and summaries, we call OpenAI with our structured labels rather than letting an LLM guess from raw prices.

For narrative coaching, we also integrate Gemini on Google Cloud Vertex AI, using the Gemini API to read our structured trade annotations and generate session takeaways. This lets a generative model summarize what our deterministic rules have found, without touching the underlying rankings or bias detection.

Front‑to‑back, the system is designed to be transparent: every badge you see on the chart can be traced back to a concrete rule and underlying trade data.

Frontend tech stack

Next.js 16 (App Router, Turbopack) with React 19 and TypeScript for a typed, file‑system‑routed SPA/SSR hybrid.
Tailwind CSS 4 for utility‑first styling and a consistent dark fintech theme.
Framer Motion and GSAP for micro‑interactions (hover badges, panel transitions, mascot reactions).
Three.js + React Three Fiber + Drei for lightweight 3D accents (e.g., glowing gauge / depthy hero visuals).
Lightweight Charts (TradingView) for the main price + P/L charts, so Temper looks and behaves like a real trading terminal.
React Hook Form + Zod for validated trade import/config forms.
Zustand + React Query for local state and server data fetching/caching.
PapaParse / XLSX / date‑fns to parse broker exports and normalize timestamps across sessions.
Tooling: ESLint, Prettier, Vitest/JSDOM, and Testing Library to keep the codebase clean and testable.

Backend tech stack

FastAPI served by Uvicorn as an async API layer.
Supabase (Postgres) for storing users, sessions, trades, and labelled events.
Pydantic and pydantic‑settings to keep schemas/validation explicit.
Pandas for heavier trade‑sequence transformations and statistics.
OpenAI for turning structured bias detections into human‑readable coaching snippets.
Pytest for backend rule‑engine tests to ensure every label is deterministic and reproducible.

Production architecture summary

Layer	Technology
Frontend runtime	Next.js 16 (Node, Turbopack)
UI + language	React 19 + TypeScript
Styling	Tailwind CSS 4
Animations / 3D	Framer Motion, GSAP, Three.js, React Three Fiber
State & data	Zustand, React Query
Forms & validation	React Hook Form, Zod
Charts	Lightweight Charts, custom overlays
Backend runtime	FastAPI on Uvicorn
Database	Supabase (Postgres)
AI	Google Gemini for narrative coaching
Data processing	Pandas
Testing	Vitest (frontend), pytest (backend)

Challenges we ran into

Finding the right tone. We debated between a serious institutional UI and a playful one. Temper is about psychology, so we leaned into humor and borrowed the “brilliant / blunder” vocabulary from chess while still keeping the app visually clean.
Designing the dashboard. Balancing a rich trading dashboard with Devpost‑friendly clarity was hard. Too much chart noise and it’s unreadable; too little and it feels like a static landing page.
Rendering trades nicely. Getting Lightweight Charts + overlays + labeled markers to feel smooth required iteration on data transforms, pixel alignment, and performance tweaks.
Finance as a first. For Vishnu, this was a first real finance project, so learning trade semantics, risk, and bias definitions while also building APIs and rules was a steep but satisfying ramp.
Avoiding “just throw ML at it.” Our initial instinct was an ML classifier on trades. We realized deterministic rules gave more trust and explainability, so we had to re‑frame the problem around explicit conditions instead of opaque models.

Accomplishments that we’re proud of

Shipping a cohesive, polished frontend that looks like something traders would actually dock next to their charting platform.
Implementing a deterministic psychology engine that can explain every overtrading, revenge, or FOMO label in plain language.
Building a complete review loop in a weekend: import trades, see annotated charts, read a coach summary, and get a Temper Score.
Managing to do all this while still spending a meaningful chunk of QHacks networking, going to workshops, and not living entirely in a code cave.
Proving to ourselves that our past hackathon reps (and projects like Quartz) directly leveled us up to the point where a system like Temper was actually buildable.

What we learned

Communication beats assumptions. We had separate mental models for features (Elo system, mascots, iconography) and only discovered the mismatch late. Talking early would have saved integration stress.
Deterministic rules are underrated. For many trading‑psychology problems, clear rules (“X trades within Y minutes after −2R”) beat ML in transparency, trust, and ease of debugging.
Good tooling compounds. Having a familiar stack (Next.js, Tailwind, FastAPI) let us focus on UX and domain logic instead of fighting dev‑env friction.
Tone matters for adoption. Traders already stare at scary P/L numbers; adding a bit of playfulness and chess‑style feedback makes the emotional punch easier to digest.

What’s next for Temper

Broker and prop‑firm integrations. Plug directly into FX/CFD/prop dashboards so sessions auto‑import instead of relying on manual CSVs.
Deeper institutional workflows. Build views tailored for prop firms and banks (like National Bank), where mentors can review a cohort’s Temper Scores and bias patterns over time.
More practice modes. Extend the simulation environment so traders can replay their day candle‑by‑candle and choose alternative decisions, seeing hypothetical P/L if they had followed plan.
Scalability and UX polish. Harden Supabase schemas for larger datasets, refine performance on heavy days, and continue evolving the UI into something you’d be happy to run daily.
Community and sharing. Let traders share anonymized “game reviews” with coaches or friends, and build a gentle competitive layer around Decision Elo.

Temper – turn your trading day into a game you can finally learn from, not just a P/L number you regret.