Tendr

💡 Inspiration

Learning to invest is terrifying for beginners. They are paralyzed by complex stock charts, confusing financial jargon, and the genuine fear of losing their hard-earned money. Learning by making mistakes in the real stock market is simply too expensive. We realized that to teach beginners effectively, we needed to remove the risk, strip away the overly complex UI, and use a mechanic that Gen Z already intuitively understands: swiping.

We built Tendr to be a "financial time machine," allowing users to swipe through real historical market events to learn market dynamics, risk management, and the brutal reality of opportunity cost—all without risking a single real dollar.

⚙️ What it does

Tendr is a risk-free educational platform. Users start with 10,000 "Risk Points" (RP) and act as the portfolio manager.

The Core Loop: Users are presented with a stack of cards representing real historical assets (Stocks, ETFs). Each card displays the 30-day trailing price, trend, and annualized volatility.
Swipe to Learn: Click "Invest" to invest. Click Left to pass.
The Time Jump: Once the deck is complete, the "Game Master" instantly jumps exactly 7 days into the future.
The Hindsight Engine: Users receive a Weekly Report breaking down their profits and losses. More importantly, it calculates a Hindsight Score—showing them exactly how much money they missed out on by swiping left on profitable assets.

We also integrated FinCoach, a custom AI chatbot that sits right next to the simulator to answer financial definitions, explain volatility, and guide users through market turbulence.

🛠 How we built it

We architected a robust, full-stack application with a strict separation of concerns to handle the intense data requirements:

Frontend (The Visuals): Built with Next.js (App Router) and TypeScript. We used Tailwind CSS and Shadcn UI for the dark-mode, glassmorphic aesthetic. The swipe physics were built using react-tinder-card and framer-motion, while the smooth gradient charts are powered by recharts.
Backend (The Data Broker): We built a lightning-fast Python FastAPI server. Instead of storing massive databases, our API uses yfinance and pandas to fetch real historical data on the fly. It calculates trailing volatility, formats the chart arrays, and secretly peeks 7 days into the future to send the "Future Trend" data to the frontend.
Database & Auth (The Memory): We utilized Firebase Authentication for secure login and Firestore (NoSQL) to save the user's progress. Every time a week is completed, the React frontend pushes an entire JSON ledger of the user's swipes to their Firestore document.

🚧 Challenges we ran into

The "Time Machine" Data Leakage: We had to ensure our API accurately served 30 days of past data for the UI chart without accidentally showing the user the future data that determines their score. Getting the Pandas datetime logic perfectly aligned across different timezones was a massive headache.
Complex State Management: Keeping the React state synchronized across the swipe deck, the user's Risk Point balance, the hidden future trend math, and the Firebase ledger required highly precise useEffect hooks and prop-drilling management.
Fluid UI Physics: Making web-based swipe cards feel as native and satisfying as an iOS app required deep-diving into Framer Motion and touch-event prevention to stop the browser from scrolling while the user was swiping.

🏆 Accomplishments that we're proud of

The Hindsight Metric: We are incredibly proud of the educational math engine. It doesn't just calculate your portfolio; it actively teaches "Opportunity Cost" by proving to the user that passing on a good stock is just as impactful as buying a bad one.
Seamless Python/Next.js Integration: Successfully bridging a complex Python financial data pipeline with a modern, reactive TypeScript frontend.
The UI/UX: Achieving a premium, dark-mode "fintech" aesthetic that feels professional yet completely accessible to teenagers and beginners.

📚 What we learned

Quantitative Finance Basics: We learned how to calculate real-world metrics like Annualized Volatility and Relative Strength using Python and Pandas.
API Design: We learned how to structure JSON payloads efficiently so the frontend doesn't have to do heavy math, allowing the UI to remain incredibly snappy.
NoSQL Database Architecture: Structuring deeply nested arrays in Firebase Firestore to keep track of a user's week-by-week historical ledger.

🚀 What's next for Tendr

Multiplayer "Seasons": Allowing classrooms or friend groups to start on the exact same historical date and compete on a live leaderboard to see who handles the 2008 crash or the 2020 tech boom the best.
More Asset Classes: Introducing Crypto, Bonds, and Options cards to teach diversification.
Machine Learning Insights: Integrating our scikit-learn predictive models directly into the FinCoach AI, allowing the bot to warn users if their portfolio is becoming over-concentrated in one sector based on their swipe history.