Building InvestorSim

I don't have much experience with React (opens new window), so I decided to build a market simulator game. This isn't a fully developed game- I just wanted to spend a week learning React and trying out ideas.

Here's how it turned out:

• Try it out here (opens new window).
• View the source code (opens new window).

Libraries used 🔗

• React
• React Router (opens new window)
• Tailwind CSS (opens new window)- a utility CSS library. Extremely powerful, intuitive, and flexible.
• Pluralize (opens new window)- a library for pluralizing words, which is a small but enjoyable UX benefit.
• Vite- a speedy development setup (server & builder). I've been a big fan ever since I first used it.
• thispersondoesnotexist.com (opens new window)- Headshots generated by a neural net, which are useful for placeholder profile images.
• Chart.js

Charting 🔗

For charting, I used chart.js (opens new window). It's popular, fairly easy to use, and is MIT licensed. I've used it for past projects, and since this was a small part of the app (and not really part of the goal), I didn't consider other options. There is a library that wraps chart.js in an easy to use React component, but I quickly ran into a bug causing unnecessary re-rendering (opens new window). I wanted my chart to smoothly update like a live stock tracker, so I ended up using Chart.js directly.

Thoughts on React 🔗

I enjoyed working with React. Managing state out of the box was straightforward. I intentionally avoided using Redux since it was overkill for this app (and I've already worked with similar libraries like NgRx and Vuex). My biggest challenge was deciding on the best way to implement certain features. There are many ways to get things done in React (functional vs class components being one example). While this flexibility is great, I can also see it being a challenge in a larger team to enforce consistency.