A simple stock visualization app built with React Native (frontend) and Python Flask (backend), using Finnhub API for real-time stock data.
- π Market Overview: View popular stocks with real-time prices and changes
- π Stock Search: Search for stocks by symbol or company name
- β Watchlist: Add/remove stocks to/from your personal watchlist
- π Stock Details: View detailed stock information with 7-day price charts
- π± Mobile-First: Built with React Native for iOS and Android
Watch the app in action! Click to play the demo video:
- Python 3.x
- Flask (Web framework)
- Flask-CORS (Cross-origin requests)
- Requests (HTTP library)
- Finnhub API (Stock data)
- React Native
- Expo
- React Navigation (Navigation)
- React Native Chart Kit (Charts)
- Axios (HTTP client)
- Python 3.x installed on your system
- Node.js and npm installed
- Expo CLI installed globally:
npm install -g @expo/cli - Alpha Vantage API Key (free): Get it from Alpha Vantage
-
Navigate to the backend directory:
cd backend -
Create a virtual environment (recommended):
python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate
-
Install Python dependencies:
pip install -r requirements.txt
-
Create a
.envfile in the backend directory:cp .env.example .env
-
Edit the
.envfile and add your Alpha Vantage API key:ALPHA_VANTAGE_API_KEY=your_actual_api_key_here -
Start the Flask server:
python app.py
The backend will be running at
http://localhost:5000
-
Navigate to the frontend directory:
cd frontend -
Install dependencies:
npm install
-
Start the Expo development server:
npm start
-
Run on your device:
- iOS Simulator: Press
iin the terminal - Android Emulator: Press
ain the terminal - Physical Device: Scan the QR code with Expo Go app
- iOS Simulator: Press
GET /api/health- Health checkGET /api/stock/<symbol>- Get stock quoteGET /api/search/<query>- Search stocksGET /api/stock/<symbol>/chart- Get stock chart dataGET /api/watchlist- Get user's watchlistPOST /api/watchlist- Add stock to watchlistDELETE /api/watchlist/<symbol>- Remove stock from watchlistGET /api/market/overview- Get popular stocks overview
RobinhoodClone/
βββ backend/
β βββ app.py # Flask application
β βββ requirements.txt # Python dependencies
β βββ .env.example # Environment variables template
βββ frontend/
β βββ App.js # Main app component
β βββ src/
β β βββ screens/ # Screen components
β β βββ HomeScreen.js
β β βββ SearchScreen.js
β β βββ WatchlistScreen.js
β β βββ StockDetailScreen.js
β βββ package.json # Node.js dependencies
β βββ ...
βββ README.md
- Market Overview: View popular stocks on the home screen
- Search Stocks: Use the search tab to find specific stocks
- Add to Watchlist: Tap the "+" button next to any stock
- View Details: Tap on any stock to see detailed information and charts
- Manage Watchlist: View and remove stocks from your watchlist
- Alpha Vantage free tier: 5 API requests per minute, 500 requests per day
- For production use, consider upgrading to a paid plan
-
"API limit reached": You've exceeded Alpha Vantage rate limits. Wait a minute and try again.
-
"Network Error": Make sure the backend server is running on
http://localhost:5001 -
Charts not loading: This might be due to API rate limits or insufficient data
-
Expo/React Native issues: Make sure you have the latest version of Expo CLI
- Make sure your
.envfile contains a valid Alpha Vantage API key - Check that all Python dependencies are installed
- Verify the Flask server is running on port 5001
- Clear Expo cache:
expo start -c - Restart the Metro bundler
- Make sure all npm dependencies are installed
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
This is a demo application for educational purposes. It should not be used for actual trading or investment decisions. Always consult with financial professionals before making investment decisions.