AlgoTeen

A algorithmic trading learning platform

Comment

Inspiration

The idea for AlgoTeen was born from a simple observation: financial literacy and algorithmic trading remain topics largely reserved for adults — yet teenagers are surrounded by markets, data, and decisions every day. I wanted to bridge that gap by creating a space where young learners could understand, test, and experiment with trading algorithms safely, without the risk of real money. Our mission was to make the world of algorithmic trading accessible, gamified, and interactive, combining the logic of engineering with the psychology of user experience. The result is a guided learning platform that teaches the logic behind markets while helping teens think like data-driven investors.

What it does

AlgoTeen is a full-stack web platform that helps students learn algorithmic trading through guided lessons, interactive code environments, and real-time simulations. It allows users to: -Follow learning paths that introduce trading and coding fundamentals. -Write and backtest strategies directly in a built-in code editor. -Run paper trades using real-time market data from APIs like Polygon.io and Alpaca. -Visualize charts via TradingView widgets and track performance metrics such as returns, drawdowns, and win/loss ratios.

By combining educational content with functional market tools, AlgoTeen turns learning into a practical experience, empowering young traders to explore algorithmic finance intuitively.

How I built it

The platform is built using a Next.js + Tailwind CSS frontend for smooth performance and modern design aesthetics. The backend runs on Supabase, providing authentication, database management, and storage for user profiles, code history, and performance logs. For financial data, we integrated APIs from: -Polygon.io for live and historical price feeds. -Alpaca for simulated trades and portfolio data.

Libraries such as: -React-X-Arrows were used for roadmap visualizations and interactive module linking. -Backtesting.js enabled realistic performance simulations for user strategies. -TradingView widgets were embedded to display professional-grade charts.

This stack ensures the app remains scalable, responsive, and educationally rich while maintaining a developer-friendly architecture.

Challenges we ran into

My biggest challenge was integrating the paper trading engine to behave like an actual brokerage while staying safe for learners. Connecting multiple APIs while synchronizing data across the code editor, chart, and performance dashboard required complex real-time state management. Another major hurdle was embedding a fully functional code editor that supported live syntax highlighting, saved user progress, and executed strategies within browser limits — all without compromising site speed. Balancing technical accuracy with user simplicity pushed us to think critically about UX flow and backend efficiency.

Accomplishments that we're proud of

-Building a functional backtesting environment that can simulate trading results with realistic metrics. -Designing a clean, intuitive UI/UX that makes financial education engaging for teens. -Successfully integrating multiple financial APIs and visualization tools into one cohesive experience. -Achieving smooth authentication, user profiles, and saved learning progress via Supabase. -Receiving positive early feedback from testers who found it both educational and empowering.

These milestones proved that even a person can build tools that feel professional, purposeful, and fun

What we learned

Throughout the project, we realized that UI/UX is the true backbone of learning platforms. Even the most advanced algorithms mean little if users can’t easily understand or navigate them. We learned how vital human-centered design is — AI can assist, but it can’t replace thoughtful empathy in how an interface teaches, guides, and motivates. We also deepened our understanding of API management, authentication flows, and state synchronization, and how product design decisions shape learning experiences.

What's next for AlgoTeen

We’re planning a major update that will bring: -Improved Roadmaps: new paths for data science, quantitative analysis, and strategy optimization. -Expanded Modules: including psychology of trading, portfolio theory, and AI integration. -Enhanced User Experience: more visual progress feedback, code auto-saving, and collaborative learning spaces. -Mobile Optimization: responsive dashboards for phones and tablets. -Community Challenges: peer competitions for best trading logic or strategy visualization.

Ultimately, we want AlgoTeen to evolve into a global ecosystem for teen quants, where curiosity meets code and learning meets innovation.

Built With

  • alpaca
  • backtestingjs
  • monacoeditor
  • nextjs
  • polygonio
  • reactxarrows
  • supabase
  • tailwind
Share this project:

Updates