Top Stocks

A catalog like build with React and Redux, to display the top stocks from NASDAQ.

This project was made to practice all aspects involved in creating a React application.

Content

• Live Demo
• Requirements
• Requisites
• Built With
• Future Improvements
• Getting Start
• Contributing
• Author
• License

Live Demo

You can access an online version at:
https://stock-catalogue.herokuapp.com/

And video presentation: https://www.youtube.com/watch?v=hBO2cOWX7-w

Requirements

• Implement a catalog with React and Redux
• Setup workflow (Without create-react-app)
• Fetch data from API and store into Redux
• It should have routes and nested routes
• Stateless filter to slice the data
• Make use of Hooks and only functional components
• Deploy it live

Requisites

• A modern web browser
• Node JS

Built With

• Javascript
  
• HTML/CSS
  
• React and Redux
  
• Express
  
• Webpack and babel
  
• JEST and React testing library for tests
  
• Cypress for e2e tests
  
• ESlint and Stylelint (Linters)
  
• GitHub Actions (CI Tool)
  
• Netlify (Server and CD tool)
  
• Git, Github and VScode
  

Future Improvements

• Realtime chart from state
• More filters
• Loading animation while fetching

Getting Start

Get a local copy

Now you need a copy of this application, if you are using Git:

git clone git@github.com:SevlaMare/Catalogue.git

Otherwise just hit (Download Zip) on the green button (Code) at top of this page.

Open terminal

Open your terminal inside the game folder, and paste the following commands:

Download all dependencies

npm install

Compile

npm run build

Start the server

npm run go

Go to a web browser (Like Google Chrome) and visit:

localhost:7000

Run tests

Unit and integration tests npm run test

E2E, first, need the app running: npm run build npm run go and so run tests npm run e2e

Contributing

Contributions, issues and feature requests are welcome!

You can do it on issues page.

Acknowledgments

A special thanks to the code reviewers.

Author

👤 Thiago Miranda

• Github: @SevlaMare
• Twitter: #SevlaMare
• Linkedin: SevlaMare

License

Design idea based on Catalogue of Dog Clothes by Denys Chagaida on Behance

MIT