This application is designed to provide users with up-to-date information on the top gainers and losers in the stock market. Users can explore these sections and view detailed information and price trends for individual stocks/ETFs.
- Top Gainers and Losers Tabs: Displays the top-performing and worst-performing stocks/ETFs.
- Stock/ETF Cards: Each card shows essential information such as the stock/ETF name, ticker symbol, and percentage change.
- Basic Information: Provides detailed information about the selected stock/ETF.
- Line Graph: Displays the price trend of the stock/ETF using a third-party library for line graphs.
- Error Handling: Loading, error, and empty states are managed effectively to enhance user experience.
- React Native: For building the cross-platform mobile application.
- Native Wind: For catchy and usable UI.
- Redux: For state management.
- Expo: For streamlined development and deployment.
- Alphavantage.co API: For fetching stock/ETF data.
- Third-party Library for Line Graphs(react-native-graphs,react-native-reanimated,react-native-gesture-handler): For rendering price trends in interactive graph
- Tabs: The Explore screen consists of two tabs: Top Gainers and Top Losers.
- Grid of Cards: Each tab displays a grid of cards with stock/ETF information.
- Basic Information: Displays the company overview and other relevant details fetched from the Alpha Vantage Fundamental data API.
- Line Graph: Shows the historical price data of the stock/ETF.
- Alpha Vantage API: The application uses the Alpha Vantage API to fetch top gainers and losers, company overview, and ticker search.
- Loading State: Display a loading spinner or indicator while fetching data.
- Error State: Show appropriate error messages if the API call fails.
- Empty State: Handle cases where no data is returned from the API.
- API limit reach error: Use a different network for a smooth experience.
- (Alpha Vantage free API gives 25 API calls/day for one IP.)
VID_20240707160141.mp4
This is an Expo project created with create-expo-app.
-
Install dependencies
npm install
-
Start the app
npx expo start
In the output, you'll find options to open the app in a
- development build
- Android emulator
- iOS simulator
- Expo Go, a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the app directory. This project uses file-based routing.
When you're ready, run:
npm run reset-projectThis command will move the starter code to the app-example directory and create a blank app directory where you can start developing.
To learn more about developing your project with Expo, look at the following resources:
- Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
- Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
Join our community of developers creating universal apps.
- Expo on GitHub: View our open source platform and contribute.
- Discord community: Chat with Expo users and ask questions.