Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ev0clu/stock-market-app
Frontend (React.js) Stock Market App
https://github.com/ev0clu/stock-market-app
api chart react tailwindcss typescript vite
Last synced: 2 days ago
JSON representation
Frontend (React.js) Stock Market App
- Host: GitHub
- URL: https://github.com/ev0clu/stock-market-app
- Owner: ev0clu
- Created: 2023-10-05T08:42:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-19T14:18:37.000Z (10 months ago)
- Last Synced: 2024-01-19T15:37:01.723Z (10 months ago)
- Topics: api, chart, react, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://stock-market-app-8cq6.vercel.app/
- Size: 396 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Stock Market App**
A stock market app has built with Alpha Vantage API. The app allows users to search for stock quotes and display their data in a new view.
### Demo: [Link](https://stock-market-app-8cq6.vercel.app/)
## Features
- Allow user to search stock market data
- [Alpha Vantage API](https://www.alphavantage.co/) has used to obtain the data for the stocks
- There are three views: a search view, a detail view and a favourite view
- The search view allow users to search for a stock by entering its symbol or name
- The detail view display information about the selected stock, including its name, symbol, current price,
and any other relevant data that can obtain from Alphavantage. Additionaly, user can add this stock to the favourites based on the stock's symbol
- The favourite view displays the favourites that use previously added to the list and also can get the latest stock market data if click on a symbol
- LocalStorage used to store the favourite stocks
- HighChart API used to display stock price data on a chart
- Hosted on Vercel
- Responsive design
## How to run from local repository
1. Clone the repository
2. Run `npm install` command in your terminal
3. Create .env file and add a new enviromental variable named VITE_ALPHA_VANTAGE_API_KEY and add your own api key to this file
4. Run `npm run dev` command in your terminal
5. Server running at `http://localhost:5173/`
### Dependencies
- [React](https://react.dev/)
- [React Router DOM](https://www.npmjs.com/package/react-router-dom)
- [React Icons](https://www.npmjs.com/package/react-icons)
- [Typescript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Vite](https://vitejs.dev/)
- [Alpha Vantage API](https://www.alphavantage.co/documentation/)
- [highchart](https://github.com/highcharts/highcharts)
- [highchart-react-official](https://github.com/highcharts/highcharts-react)
- [Highchart API](https://api.highcharts.com/highstock/)
### Layout
