React Router

Spin a new react up using lets-code

Look over the working Solution

Do not try to look at the code, only look at the functionality, the code is purposefully written in a way to confuse you and if you try to copy it, you'll just get confused, only look at it in the browser, and see how its meant to function.

Model

Make a model called Stock

name
symbol
lastPrice
change
high
low
open

Here is some examples of what the data should resemble

  {name: "Apple Inc.", symbol: "AAPL", lastPrice: 140.64, change: -0.280000000000001, high: 141.74, low: 140.35, open: 141.5},
  {name: "Microsoft Corporation", symbol: "MSFT", lastPrice: 64.98, change: 0.109999999999999, high: 65.45, low: 64.76, open: 65.12},
  {name: "Alphabet Inc.", symbol: "GOOGL", lastPrice: 835.14, change: -4.50999999999999, high: 844, low: 829.1, open: 842},
  {name: "Facebook, Inc.", symbol: "FB", lastPrice: 140.34, change: 0.810000000000002, high: 141.0244, low: 139.76, open: 140.08},
  {name: "Oracle Corporation", symbol: "ORCL", lastPrice: 44.65, change: -0.300000000000004, high: 45.09, low: 44.575, open: 44.91},
  {name: "Intel Corporation", symbol: "INTL", lastPrice: 36.16, change: -0.370000000000005, high: 36.78, low: 36.125, open: 36.58}

You only need the show, index and create routes in the api, but feel free to add full crud after

Use the create route to make the stocks in Postman using the data above

Here is your routing table. So when your app is complete it should have all the routes below.

Your stock tracking app should have the following features...

Navigation

No matter what route the user is visiting, they should always see a navigation bar at the top of the window. It should contain links to "Home" and "About" pages.

Dashboard (/stocks)

If a user visits /stocks or clicks "Home" in the navigation bar, they should be directed to a dashboard page. This page should list all of the stocks that the user is tracking, specifically their name and symbol. These stocks should be pulled from making a fetch request to get the index route.

Bonus: Try rendering the stocks as per the image below.

Stock (/stocks/:symbol)

If a user clicks on one of the stocks listed in the Dashboard view, they should be directed to an individual stock show view. This view should display all of a stock's attributes.

About (/about)

If a user clicks on "About" in the navigation bar, they should be directed to an about page. This is just a static page that displays a description of your app.