StonkQuest

Home page
Market Crash Landing Page
Mergers & Acquisitions Simulation
Mergers & Acquisitions Simulation Landing Page
Mid-game
Win game: if Profit made
Lose game: if Losses made

StonkQuest: All the trading thrills. None of the Bills.

Tracks: General, Gaming, Community, Best Financial Hack by Capital One.

Inspiration

Nearly everyone knows about investing, but HOW to invest? That's a mystery to most. Targeting younger audiences, one thing is for sure: everyone loves Gaming. Games are accessible, and research shows that gamifying education allows for better learning.

One of us is a huge gamer, and old Nintendo games inspired the UI. We wanted to make a fun platform for stock market simulation and practicing market scenarios. It would be hard to invest real money to gain experience selling, holding, and buying stocks to gain insight into what to do in market scenarios.

This game aims to do just that! Hope you learn something. And most of all, we hope you have fun!!!

What it does

StonkQuest simulates four scenarios that can affect the stock market and make it playable. Practice trading in four real-world scenarios: market crashes, company mergers, new IPOs, and earnings reports. Each scenario teaches the user the basics with a simple goal: make a profit. Once the user gets the hang of it, they can test their skills in a surprise final challenge where they'll need to trust their gut on whether to buy, sell, or hold.

How we built it

We began by brainstorming features and functionalities that would make the learning experience engaging and intuitive for users.

Utilizing React for the front end allowed us to create a dynamic user interface that mimicked the nostalgic aesthetics of childhood Nintendo games, making financial education more accessible and enjoyable. We decided to go with TypeScript because it is easier to spot errors, and has strong typing and advanced tooling. To manage the state effectively, we implemented hooks and used TypeScript for its robust type-checking capabilities, which reduced bugs and improved code clarity.

We keep the stock graphs simple but realistic. Each day, stock prices move up or down based on what's happening in the game - just like real markets. When good news hits (like strong earnings), prices typically rise. And for bad news, the user can expect some dips. Each stock has its own personality too - tech stocks might swing wildly while others stay steadier. This way, the user can practice spotting patterns and learn how different events affect stock prices, all without the real-world stress.

Technologies Used

React: For building a responsive, interactive frontend. TypeScript: Ensures robust, type-safe code for reliability and maintainability. NES.css: Retro-style CSS Framework for the nostalgic UI. Check out their amazing work at nostalgic-css/NES.css

Challenges we ran into

We had a couple of challenges. First, we struggled for a bit while calculating the net gain/profit. There were a lot of codependent values, which would cause a waterfall of errors in the profit. We had to be really meticulous and had to whip out a pen and paper to calculate the values by hand and debug it step by step. It didn’t help that it was 3am and we were really sleepy. We were able to pinpoint the issue and fix it, but it was quite challenging.

Second, we had to come up with scenarios and generate appropriate data to simulate the stock market for those scenarios. We also had to consider a wide range of situations like market crashes, IPOs, for which we had to do some learning on the stock market ourselves.

Third, we were challenged by the idea of bringing our artistic vision of a retro game to life through our UI design. We found a perfect framework for that, but it was a struggle getting components, elements and actions to align to our vision. They needed to be functional while still maintaining a Nintendo-esque feel, and I think we were able to achieve that at the end of the day.

Accomplishments that we're proud of

We developed an interactive fun application for people with little to no knowledge about stock markets to learn about it. By developing a gamified version with different realistic market scenarios, the users can have an engaging platform to learn the actual trading principles. We were able to develop a user interface by taking inspiration from games like Nintendo which can be appealing to both beginner and experienced traders.

What we learned

As backend engineers, we learned a lot about the front end. Considering that the entire app is in React.js and Typescript, we learned how to build an entire front-end application from scratch. We learned how to deploy and create build scripts for projects, something that some of us hadn’t tried before. We weren’t familiar with TypeScript before this project, but I think we’re all confident enough to code in now.

We also learned about the stock market in the process of creating this game. As beginners ourselves, we were also able to learn how to design web pages for our target user, a beginner to stock market trading with some knowledge of what markets are.

What's next for StonkQuest

Integration with real-time stock market data: Connect the game to actual stock prices so users can practice with today's market movements. Makes the experience more true to life.
More Trading Scenarios: Add new challenges like short selling, options trading, and sector rotation. Helps users learn fancier moves once they've got the basics down.
Better Performance Analytics: Add detailed reports and charts showing trade history, win rates, and where users need improvement. Like a personal trading coach.
Multiplayer Mode: Add real-time trading with other players. Players can collaborate, share strategies, or compete to see who makes the best moves, adding a whole new layer of excitement and learning to the game.
LLM-Powered Virtual Advisor: Integrate an LLM-powered financial assistant to provide personalized tips, explain market concepts, and interpret news events based on players’ portfolios. It's like having an expert advisor by your side.