Project Description

For this capstone project will build a simple feature that will allow users to search for a publicly traded company using their "stock ticker". Once the user clicks the "Search" button, we will then display the company profile and company financial.

Note: The API provided here uses a random data generator to generate company profile and the financial information.Please do not rely on the accuracy of the data because it is guaranteed to be inaccurate (it's random).The API expects the ticker to be 3 characters long. It will give you results if the ticker is 3 characters long and it will throw an error if the ticker is less than or greater than 3 characters.It also does not check if the ticker is actually a valid ticker. So any random 3 character would work.

Don't worry about styling, it's already provided for you.

There's also an API provided to you that has two methods -

• - Returns a Promise that resolves to the financial information for the ticker you passed. The response has fields like - price, beta, volAvg, MktCap etc.For this project, the component skeleton is provided inside the 'src/capstone' folder, and as always, the files are heavily commented to guide you with the tasks. Please start with the Capstone.js file and you can go to any of the other files next. The final solution is provided in the solution folder (src/capstone/solution), however, I strongly recommend you to try on your own before looking at the solution. If you don't remember some of the concepts, please feel free to go back and refer to the appropriate tutorial page.

• Capstone - Just named Capstone to signify that this component encapsulates our entire project. We import and use below components inside this to build our feature.
• CompanyProfile - This component renders company profile. It takes a company ticker as props and fetches the profile data from the API and renders that data.
• CompanyFinancial - This component renders company financial information. It takes a company ticker as props and fetches the financial information data from the API and renders it.

Disclaimer

How we break down components to build this feature is not set in stone. The component decomposition is more often art than science. We can most definitely build this feature with just one component instead of four, or we could easily break these components into more granular pieces. Please read this on how to think about components in React.

In this project, there are certain decisions that have been made to incorporate most of the concepts we have touched on this tutorial. While what we have done definitely works, we could also achieve the same outcomes using different approaches.

Extra Credit