Monkey Market

Monkey Market is a web-based game for kids to learn all about buying and selling stocks through a fun and easy-to-use website that involves predicting and managing assets.

Comment

Inspiration

Given the recent news developments surrounding GameStop stocks and the phenomenon of small shareholder-based short-squeezing, we were really interested in the stock market and why Wall Street was turned upside down. Unfortunately, in school, there aren't a lot of opportunities to learn about how stock and shares work, so we quickly felt overwhelmed with the wealth of information on the Internet. We felt like this was a great opportunity to encourage kids to become more business-savvy from a young age.

What it does

Monkey Market is a simple and easy-to-play game on our website that allows you to buy and sell shares, called "bananas", all while keeping an eye on patterns in the prices and randomized news events. The goal is to make as much money as you can with the 5000 Monkey Money (MM) that you're given in the beginning. Keep track of the Monkey Monkey you've got and try to buy and sell at the right moments to increase your overall net worth and Monkey Money and be the richest business monkey ever!

How we built it

Monkey Market was built with front-end languages (HTML, CSS, and JavaScript). We made use of the Google Chart API to display our data using multidimensional objects to store our stock data, creating functions that handled the math behind buying and selling, randomizing stock fluctuations, timing price updates, and randomizing news events that impacted prices using the various JS functions. Simple CSS animations were also used, as well as vectr.com to create SVGs for the website and the digital art software Krita for our home page's hero image.

Challenges we ran into

We had a lot of difficulty implementing the chart properly. It was definitely one of the biggest challenges of the whole project, since we'd never worked with the API before! We struggled with getting a chart up at all, and then making the chart display our information was even harder. The bulk of development time was probably spent working on making the chart continually update with the new information. Along with the chart, we had trouble implementing the scrolling frame on the side that would show price fluctuations and inventory, as well as the updating container that showed the next update, next day, etc. We also struggled with the randomized news events. Unfortunately, we could not get company-specific events to work and had to settle for news events that impacted all company stock prices. Another difficulty we faced was upping our HTML/CSS game. We wanted our website to reflect its young audience and give it a fun and colourful vibe; to do this, we had to use CSS animations for the first time and come up with a monkey-themed colour palette. This became a bit of a challenge as we tried to figure out how much animation was too much, and we had to try to create a website that was still aesthetically-pleasing while suitable for children.

Accomplishments that we're proud of

We are really proud of the entire website as a whole. As this is just our second hackathon (and the first with just the two of us), we are beyond happy with our final product. Getting the chart API and the stock data working seemed almost impossible to us at first, but in the end, we achieved everything we had wanted to accomplish. We're also immensely proud of how the website's appearance turned out. It looks fun and silly, but it definitely looks pretty put-together! This was also our first time making vector graphics, and despite their simplicity, we feel like it adds a lot to the website and really ties off the whole monkey theme. It's way better than our first hackathon project, and we're so happy that we managed to do this with just the two of us working together. We're also very happy with our presentation video, since it's the first time we used a video to present our project. It's just as light-hearted as our project, and we love how it turned out!

What we learned

We learned many new things about working with JavaScript. Though we both have experience working with Java, JS is different enough that we could only apply so much of our Java knowledge. We're a lot more familiar with working with APIs in JS now, and feel confident about using this new skill in future hackathon and even school projects. Furthermore, we're really excited to continue developing beautiful websites with CSS. This website was the first website we've developed where we've used a significant amount of simple animations to liven up the pages. We feel as though we've both learned a lot about front-end development from this project.

What's next for Monkey Market

Because we could not get the company-specific randomized events to work, that's definitely our next goal. We would love if we could also start implementing more complicated features in Monkey Market, like the idea of borrowing stocks. Real-time stock fluctuations would also be interesting, and we're thinking of even adding a database to allow for accounts that can hold onto your progress in Monkey Market! (That last one would be especially difficult, but we're willing to try!)

Built With

Share this project:

Updates