📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
  • 🚀 Live Demo
    • Key Features
• 💻 Getting Started
  • Setup
  • Run tests
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License**

📖 Stocks Metrics webapp

This React capstone project is about building a mobile web application to check a list of metrics (numeric values) that are created using React and Redux. The webapp has several pages:

• one page with a list of Companies that could be filtered by Company Symbol. This page is the homepage.
• one page for the item details; in the project, the detail page for each selected Company with its stock info.
• one about page.

Built With

• React.js
• Redux Toolkit
• VSCode and GitHub
• Financial modeling prep API: Stock Data

Tech Stack

Client

• React to create the UI.
• Redux Toolkit to manage state.
• Tailwindcss to apply awesome styles.

Server

• Financial Modeling Prep API

Database

• N/A

(back to top)

Key Features

• [Git Flow]
• [React Router]
• [Unit tests with React Testing Library]

(back to top)

Live Demo

Live Demo Link

💻 Getting Started

Clone this repository to get started with the project, make sure to configure linters by following the instructions in the Linters README file

Prerequisites

In order to run this project you need:

• A working computer.
• Connection to internet.
• npm and Node.js installed, if you don't have them, please follow this simple installation guide.

Setup

• Clone the folder to your local machine.
• Open a local copy of the project in your code editor.

(back to top)

Usage

• To run the project, execute the following command:

  • npm start in your terminal.

• To run test functions, execute the following command:

  • npm test in your terminal.

(back to top)

Run tests

• After pushing the changes on github, merge your pull request and let github action process changes and fix errors, if any.
  • For stylelint errors run:npx stylelint "**/*.{css,scss}" --fix for automatic fix.
  • For ESLINT errors run:npx eslint "**/*.{js,jsx}" --fix for automatic fix.

(back to top)

👥 Authors

👤 Ashmal Zahra

• GitHub: @ashmalzahra
• Twitter: @AshmalZahraa
• LinkedIn: ashmal-zahra

(back to top)

🔭 Future Features

• Advanced styling
• Animations

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Give a ⭐️ if you like this project!

(back to top)

🙏 Acknowledgments

Original design idea by Nelson Sakwa on Behance.

(back to top)

❓ FAQ (OPTIONAL)

• Can I use the project for any purpose?

  • Yes, you can.

• Is the information saved in any database?

  • No, all data is fetched from API.

(back to top)

📝 License

This project is MIT licensed.

(back to top)