For my final school project I was asked to build an app using React and Redux. Here’s the process I went through:
1 — Brainstorming ⚡️
Obviously, the first part of building an app is knowing what the app does and it’s purpose. The second part is making sure the proposed app meets the project requirements. At first I wanted to design an arcade style game, like Space Invaders, and I would make the outer-screen look like an old-school arcade cabinet. But then I saw my sister’s stock portfolio excel file, and decided to make something similar for both her and myself.
2 — General Outline 📂
Since I would have to rely on an external API to get my stock information, I would have to have to plan my app around the information that would be available, because nothing in life is free. The API I decided to go with was Finnhub — it was well supported, had decent reviews, and most importantly — had a free plan. This meant I would be able to get all the basic information I needed: current price, previous close, etc. Unfortunately, Finnhub’s free plan doesn’t include historic prices, so I wouldn’t be able to graph a stock’s price; only show daily changes. But that was alright with me. I only needed this app to see the daily gain/losses for my stocks; the information to accurately understand and predict a stock’s position and movement is much too unique and stock-dependent to be found in one place. Any other information I needed — such as the amount of shares a user has, how much they paid, their portfolio value — would be given by the user and stored in my Rails API. I also decided to throw in a piechart that showed what percent of your portfolio’s total value each stock was. I think they’re kinda worthless, but a) they look cool and b) my sister wanted one.
3 — Building the App 🔨
Here is where I have to admit something; a good programmer stays on task and knows what they’re currently working on and what they’ll be working on next. Though I had a general outline of what I should be working on at any given moment, I would often start something else if I hit any sort of roadblock.
I built the frontend first, then the backend, connected the two, and then did some polishing. The frontend consists of 5 sections: a section to add new stocks, a pie chart, a portfolio overview, an area for stocks you own, and an area for stocks you do not own but are interested in. I didn’t add users until I noticed that using react-route was a requirement, so I added a signup and login page to fill that requirement. Easy. Mission accomplished and project finished. Just kidding —this project was a lot harder than I anticipated. In the next section I’ll go over some of the more interesting/flippin’ stupid problems I ran into.
3 — Problems and Solutions
Select stock dropdown menu — The first ‘big’ issue I ran into was creating the dropdown menu options when adding a stock. The obvious plan was to fetch all available stocks and then search through them for any that matched the user’s input. The initial problem was I only wanted to fetch the stocks once, but there were over 8,000 options. If I loaded them all at once, they slowed down performance dramatically. So I had to limit it to the first 100 matching results. The big problem was a combination of several smaller ones; because the options were fetched from an external API, obviously building the dropdown menu and it’s options would be asynchronous. The problem was whenever the user would click an option, instead of the menu closing and the chosen option being displayed, the menu would reset and show the placeholder. After hours of crying and junk food and research, I found the problem was clicking on an option would trigger onBlur and it’s default setting was to reset the state of my dropdown menu. Nothing in the documentation mentioned anything like this, so either they hate people or the solution’s so obvious that it didn’t need mentioning.
Resetting state on logout — Another issue I faced was resetting the state after a user logged out. I had created an action that deleted the user after they logged out, but after logging in as a new user, I noticed that the stocks related to the previous user were also being shown. Why? Because I hadn’t deleted the stocks already in the state. (No, this really shouldn’t be a revelation, but hey, I’m new.) At first I decided to add a new action that deleted all the stocks, but then I decided all I would be doing is overcomplicating things. So my current solution is to push the user to the login page, and then reload the browser, which resets the state.
4 — Conclusion
I’ve learned a lot from this project. I think my two biggest takeaways were the following:
The toughest questions are often not if you can do something, but how you’ll do it, where you’ll do it, and why you did it that way.
‘Perfect’ is the enemy of ‘done’. (Not that you shouldn’t try your best or give it your all, but don’t let your own requirement for perfection hold you back from moving on.)