Developing a web page which displays stock market statistics to the user using react
Microsoft Word - IFN666_Assignment_1_Specification_4.docx IFN666 Web and Mobile Application Development Assignment 1 Release Date: 15/4/2020 Submission Date: 10/5/2020 Weighting: 45% of Unit Assessment Task: Individual Project Introduction: In this assignment, your overall task will be to develop a web application that makes stock market statistics available to the user. You will need to develop a client-side web application, in which you will query the API and present the information in a form that is helpful to the user. The aims of this assignment are to: Introduce you to client web application development Provide experience in querying REST APIs and manipulating the results Provide experience with modern web technologies including JS and React In this specification, we will not be too prescriptive, but we necessarily have to focus around some technologies, as otherwise we cannot support you in learning the material and debugging problems. You should see the development of the client for this application as a series of steps, with each one of those steps corresponding to an increase in sophistication, and in the possibility of a higher grade. The Data: The dataset is drawn from the stock market. For each day you’ll be able to access the following information: Field Description Example Timestamp A time stamp (year, month, day) of the interaction 2020-03-10 Symbol The stock’s symbol AAPL Name The company name Apple Inc. Industry The industry that describes the company Information Technology Open The price at opening on that day 228.08 High The highest price that day 251.83 Low The lowest price that day 228.00 Close The price at close on that day 229.24 Volume The number of shares traded in that day 100,423,000 Table 1: The information in the dataset The REST API: The server is located at : http://131.181.190.87:3001 To access the server you will need to connect via a VPN first. (https://qutvirtual4.qut.edu.au/group/student/it-and-printing/wi-fi-and-internet- access/accessing-resources-off-campus) We will offer the following endpoints: 1. /all (GET) – Returns an array of each of the stock’s symbol, name and industry. 2. /all?symbol=xxx (GET) – Returns an array of endpoint 1 matching a wildcard given by xxx. For example, searching for AA will return stocks the information endpoint 1 with the codes AAL, AAP, AAPL, MMA and UAA. 3. /industry?industry=xxx (GET) – Returns for information for endpoint 1 with the matching industry name. Query params need to be URL encoded. 4. /history?symbol=xxx (GET) – Returns all the information in Table 1 for a given code for 100 day period. The code is given by xxx. Only full codes are allowed. 5. /history?symbol=xxx&from=yyyy-mm-dd (GET) – Returns the information in Table 1 for a given code from a given day written in year-month-day e.g. 2020-0-309. Note that query params need to be url encoded. Note that the from parameter cannot be used by itself, and it must be coupled as shown with the code parameter if the request is to be valid. Examples of the REST APIs are as follows and some errors are: /all [ {"symbol":"A","name":"Agilent Technologies Inc","industry":"Health Care"}, {"symbol":"AAL","name":"American Airlines Group","industry":"Industrials"}, {"symbol":"AAP","name":"Advance Auto Parts","industry":"Consumer Discretionary"}, {"symbol":"AAPL","name":"Apple Inc.","industry":"Information Technology"}, {"symbol":"ABBV","name":"AbbVie Inc.","industry":"Health Care"}, {"symbol":"ABC", "name":"Amerisource Bergen Corp", "industry":"Health Care"}, ... ] /all?symbol=AA [ {"symbol":"AAL","name":"American Airlines Group","industry":"Industrials"}, {"symbol":"AAP","name":"Advance Auto Parts","industry":"Consumer Discretionary"}, {"symbol":"AAPL","name":"Apple Inc.","industry":"Information Technology"}, {"symbol":"MAA","name":"Mid-America Apartments","industry":"Real Estate"}, {"symbol":"UAA","name Under Armour Class A","industry":" Consumer Discretionary "}, ] /industry?industry=Health%20Care [ {"symbol":"A","name":"Agilent Technologies Inc","industry":"Health Care"}, {"symbol":"ABBV","name":"AbbVie Inc.","industry":"Health Care"}, {"symbol":"ABC","name":"AmerisourceBergen Corp", "industry":"Health Care"} ... ] /industry {“error”: “true”, “status”: “400”, “Query parameter industry is mandatory”} : Industry parameter is not entered /industry?industry=ZZZ {“error”: “true”, “status”: “400”, “Industry does not exist”} : An incorrect industry parameter has been passed /history?symbol=AAPL [ {"timestamp":"2020-03-23T14:00:00.000Z","symbol":"AAPL","name":"Apple Inc.","industry":"Information Technology","open":228.08, "high":228.5,"low":212.61,"close":224.37,"volumes":83134900}, {"timestamp":"2020-03-22T14:00:00.000Z","symbol":"AAPL","name":"Apple Inc.","industry":"Information Technology","open":247.18, "high":251.83,"low":228,"close":229.24,"volumes":100423000}, {"timestamp":"2020-03-19T14:00:00.000Z","symbol":"AAPL","name":"Apple Inc.","industry":"Information Technology","open":247.385, "high":252.84,"low":242.61,"close":244.78,"volumes":67964300}, {"timestamp":"2020-03-18T14:00:00.000Z","symbol":"AAPL","name":"Apple Inc.","industry":"Information Technology","open":239.77, "high":250,"low":237.12,"close":246.67,"volumes":75058400}, ... ] /history?symbol=ZZZ {“error”: “true”, “status”: “400”, “message” “Invalid Stock Symbol”} : Stock symbol not found /history {“error”: “true”, “status”: “400”, “message” “Request must include symbol parameter”} : Symbol is not included in the path /history?symbol=AAPL&from=2020-03-22 [ {"timestamp":"2020-03-23T14:00:00.000Z","symbol":"AAPL","name":"Apple Inc.","industry":"Information Technology","open":228.08, "high":228.5,"low":212.61,"close":224.37,"volumes":83134900}, {"timestamp":"2020-03-22T14:00:00.000Z","symbol":"AAPL","name":"Apple Inc.","industry":"Information Technology","open":247.18, "high":251.83,"low":228,"close":229.24,"volumes":100423000}, ... ] /history?symbol=AAPL&from=34 {“error”: “true”, “status”: “400”, “message” “Invalid date or format, try year-month-day”} : Date format is incorrect The Requirements: The requirements for the client side of this assignment are ultimately pretty straightforward. The complications come because for most of you it is the first time that you have done something like this. At the most basic level, you must develop a client side web application that allows the user to work with each of the endpoints. The overall design of the site is up to you, but we will make some comments about clean and modern looking sites below. Your main requirement is to build a website in React. The essential requirements here are that the responses to the queries should use the techniques that you will through the first half of the semester. We except that you should be able to successfully process all of the endpoints. You should choose suitable interface elements to display and interact with the information. We will give you some latitude in this, and you can also get some ideas from the discussion below. Requirements Sample: Landing Page: Below is the initial landing page. It should have a small piece of information describing the stock exchange and well as links to a stocks and search page. You should also include a header and an image. You should make wise choices for how to present all the information together. Home | Stocks Stock Prices Welcome to the Stock Market Page. You may click on stocks to view all the stocks or search to view the latest 100 days of activity. /all Here, your task is to display stock information. We expect you to show the stock code, name and industry. /all?symbol=xxx Here, we can search according to a stock code. You can choose to have your own elements. For example, searching for a code can either be in a text field or a dropdown list. More advanced elements will give you the potential for a higher mark. For maximum marks you should have a text field with a search capability that doesn’t require us to hit the server. Suppose, we type ‘AA’ into the search box. This has the effect of selecting specific records in the page. Ideally, should not require that you hit the server again – this should be local processing of the collection of records that you have available. However, if you must then you can hit the server using the second endpoint above. Home | Stocks Select stock Stock Name Industry AAL American Airlines Group Industrials AAP Advance Auto Parts Consumer Discretionary AAPL Apple Inc. Information Technology MAA Mid-America Apartments Real Estate UAA Under Armour Class A Consumer Discretionary Home | Stocks Select stock Symbol Name Industry A Agilent Technologies Inc Health Care AAL American Airlines Group Industrials AAP Advance Auto Parts Consumer Discretionary AAPL Apple Inc. Information Technology ABBV AbbVie Inc. Health Care Search ------- AA Search Home | Industry Industry /industry?industry=xxx This endpoint allows you to limit the number of stocks shown to a particular industry. For example by selecting ‘Health Care’ all of the information technology stocks will be shown. You must get this information from the database. The industries available to show are: Health Care, Industrials, Consumer Discretionary, Information Technology, Consumer Staples, Utilities, Health Care, Financials, Real Estate, Materials, Energy, Telecommunication Services Home | Stocks Select stock Showing stocks for 10/3/2020 Stock Name Industry A Agilent Technologies Inc Health Care ABBV AbbVie Inc. Health Care ABC AmerisourceBergen Corp Health Care ABT Abbott Laboratories Health Care AET Aetna Inc Health Care Search Health Care Industry /history?symbol=xxx Using the previous endpoints you should be able to click on the names or the codes to get bring up the search screen for that code. For example, clicking on Apple you would get a page with /history?code=aapl. Once you click on individual stock you are greeted with the historical stock details. You need to mention the name of the stock. Initially you will receive all of the stock details for the past 100 days. In order to access the higher grades you will also need to present a chart which will show the closing price. Home | Stocks