Stocks Mobile App
A React Native mobile application that makes stock market statistics available to the user.
Tech Stack
- React Native
- Expo
Demo
Step by Step Tutorial:
Step1: Add a search box to the “Search Screen”
Step2: Add one static stock item
Step3:
- fetch stocks from the server
- display all stocks (stock_symbol & stock_name)
- add ScrollView
Step4: implement the search function
Step5: fix small bug — when “searchText” is an empty string, the list should be empty as well
Step6: make each stock item clickable (when clicked, it just alert stock’s symbol for now)
Step7:
- to implement “Stocks” page static UI
- outline “stock watchlist” and “stock detail”
Step 8: stock item outline
Step9:
- makes the stock item look like what model solution displays
- the hard part is the CSS part [flexbox]
Step10: when the user clicks one stock on the “SearchScreen”, the stock symbol will add to the watchlist in the “StockContext”, and then the updated watchlist will display on the “StockScreen”.
Step11: “fetch stock data from the server for any new symbols added to the watchlist and save in local StocksScreen state”
Step12:
- calculate the “percentage” and save in the “state.watchListStocks”
- when the “percentage” is greater than 0, displayed in green color, when less than 0, displayed in red color.
Step13: implementation of static stock_detail UI
Step14: display the rest of the properties in the stock details
Step15: get “default” stock details once we have stocks in the StockScreen
Step16: add “grey” background to the stock item
Step17: save data into “AsyncStorage” that when users close the app and then enter again, they are able to see the stocks they saved before.
Step18: fixing the bug that it is not able to display full stock details in other sizes of smartphones. (the simulator I have been using is iPhone 11 Max), while it does not work on my phone, which is missing “volume”)
Step19: extract some components to make code clean and maintainable. The following screenshot shows one example to extract the component, it could extract more components. The concept is quite similar!
Optional:
To improve from what we have done so far, I modify a little bit to
- Add some other styling to make it look nicer.
- Make the code cleaner, more modularized.
- Fixed the error when typing “\” in the search box.
- “Promise” is added to handle async calls.
I have provided the repository link below, welcome to check it out! (In this project, server-side is not implemented, but I have provided some API sample datasets for you.)
Q&A
- Is the current application accessible to people with various disabilities? If not, how could it be improved?
Unfortunately, the current application is not accessible to people with disabilities, which can be explained as follows.
1) The application is not integrated with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). Users with disabilities should be able to operate the application with the help of screen reader. For example, users should be able to know what do the tabs mean and represent when they navigate to the bottom tabs.
Also, when users navigate to the search text box, they should be able to know that the application is asking them to type the symbol of the stock, instead of other information. The application should have a label on the field of the search text box, which will read out to the people with a disability such as blindness, to tell what exactly need them to type in here.
Therefore, this application should include the “Accessibility properties” supported by “React Native” API to enable screen reader.
2) The current application does not take those people who have color blindness into consideration. Since we use the red and green color to tell the most recent percentage gain and percentage loss, we assume users that are not color blind, but the following screenshots show the differences between how normal people and people with color blindness see the application. Therefore, those colors cannot really help color blind people.
What can be improved to help color blind people is to apply different shapes to positive values and negative values. For example, we can use the rectangle to indicate the positive values and the oval to indicate the negative ones. The example is displayed as the following, which can help people with color blindness quickly identify the stocks with gain and loss, without the help of the color, but shape instead.
3) For those users with low vision, they are most likely to magnify the app to 200%, 400%, or even more. In such situation, when the user clicks on one particular stock, and he wants to have a look at the stock details (“open”, “low”, “close”…), he or she has to scroll down to the bottom of the screen, which is an extremely painful experience.
What can be improved, I think, is to display the stock details just next to the selected stock. In that case, the user does not have to scroll way down to the bottom. The outcome should be something like the following.
2. How would we change the source code structure if we needed to support users who speak other languages?
1)Create a translation JSON file on the top level of the project and put all your translations in this JSON file, which are the key-value pairs for different languages we want to support. In this example, just for the demo, we are only supporting two languages which are English and Chinese.
2)Import the third party libraries of “expo-localization”, “i18n” and also the translation data in the “App.js” file. This process should set the locale once at the beginning of the app, for demonstration, I manually set the locale to “zh”, which is Chinese.
3)Use “i18n.t(‘key’)” to find the matching value (i.e. the matching translation).
The outcome should be like the following screenshots, which is able to support different users who speak different languages.
