Stock Exchange Survey

The Stock Exchange Survey Application

This project is part of the Microverse curriculum in React/Redux course
Explore the docs
Live Demo On Heroku
Video Presentaion on Loom
Report Bug - Request Feature

This is a demonstration of Stock Exchange information system, providing a list of instruments and an instrument's profile view. It connects to the Financial Modeling Prep API to download data

---

Table of Contents

• Screen Shots
• About the Project
• Application Instructions
• Live Version
• System Requierments
• Development
• Dependencies
• Built With
• Contributors
• Acknowledgements

Screen Shots

Instruments List

---

Instrument Profile

---

About The Project

The project was created using the create-react-app model
It is a Single Page Application using JavaScript functionality to show subpages
The entry point leads to the Symbols List where available symbols are shown including company name, the last closing price and the Stock Exchange where the symbol is traded
Symbols can be filtered by their container Stock Exchange using the filter selection at the top-right
Clicking a symbol panel shows the Symbol Profile page where all available information about the selected symbol is shown in a table view

The project files tree:

-src  
  -actions  
    actionsIndex.js  
  -api
    instruments.js  
    profile.js  
  -components  
    App.js  
  -containers  
    instrumentPanel.js  
    instrumentProfile.js  
    instrumentProfileHeader.js  
    instrumentsList.js  
    instrumentsListHeader.js  
  -reducers  
    instrumentsReducer.js  
    reducersIndex.js  
  index.js  
  utils.js  

• The entry point is root scr/index.js where the App component is rendered through the Provider components of Redux.
• Actions initInstruments, changeFilter, showProfile, and showList are in actions/actionsIndex.js
• Componet App is held in respective file in components/ folder
• Reducers are in reducers/ folder, currently only 1, the instrumentsReducer in reducers/instrumentsReducer.js is combined into reducersIndex held in reducers/reducersIndex.js
• The App component renders either
  • InstrumentsListHeader and InstrumentsList
    or
  • InstrumentProfileHeader and InstrumentProfile
    components depending on selection between the index of symbols or a symbols's profile
• The InstrumentsListHeader component renders the header for the Symbols List, and filters symbols on selected Stock Exchage
• The InstrumentsList renders the Symbols List
• The InstrumentProfileHeader component renders the header for the InstrumentProfile
• The InstrumentProfile renders all available information about an instrument

Please note that the number of downloaded symbols by the API is 14000+, so I limited this by slicing the array on the first 200 symbols

---

Application Instructions

In the entry page, select a Stock Exchange at the top-right to filter symbols or let All Exchanges to show all symbols
Click a symbol's panel to show Symbol's Profile page

---

Live Version

Live Demo On Heroku

Video Presentaion

---

System Requierments

• JavaScript Enabled
• You need to Disable Cross-Origin-Restrictions from your browser if you want to open the index.html from your file system without using a server.

---

Development

• Clone the project

  https://github.com/ioanniskousis/stock-exchange.git

  Use VSCode and Live Server to show index.html
  Since webpack is used, run 'npm run build' on you terminal before opening  
  run : npm start to open the project using localhost:3000  

---

Dependencies

please run

  npm run build

to comply with the dependencies held in package.json

---

Built With

This project was built using these technologies.

• React
• Redux
• API (Financial Modeling Prep)
• CSS3
• webpack
• Git - GitHub
• ESLint
• Stylelint
• heroku

---

Contributors

👤

Ioannis Kousis

• Github: @ioanniskousis
• Twitter: @ioanniskousis
• Linkedin: Ioannis Kousis
• E-mail: jgkousis@gmail.com ​

---

Acknowledgements

• Microverse
• Thanks to Nelson Sakwa on Behance for their design inspiration