A cross-platform demo application showcasing the Valdi framework with a modern stock portfolio experience. Built with TypeScript/TSX, this app demonstrates native performance on iOS, Android, and macOS while providing real-time stock data integration.
Valdi is a cross-platform UI framework that compiles declarative TypeScript components directly to native views—no web views, no JavaScript bridges. Write your UI once and get true native performance on iOS, Android, and macOS.
- Cross-platform native UI - Single codebase runs natively on iOS, Android, and macOS
- Stock portfolio management - Add, view, and track stock holdings with live market data
- Symbol search - Real-time autocomplete powered by Alpha Vantage API
- Stock details - View detailed ticker information and historical charts
- Redux-like state management - Predictable state flow with async thunks
- Hot reload - Instant updates during development without rebuilding
- Type-safe API integration - Polygon.io for ticker details, Alpha Vantage for search and charts
modules/stocks/src/
├── App.tsx # Root component with navigation
├── components/
│ ├── PortfolioScreen.tsx # Main portfolio view with holdings list
│ ├── StockDetailsScreen.tsx # Detailed stock view with charts
│ └── SparklineChart.tsx # Chart visualization component
├── state/
│ ├── portfolioStore.ts # Redux-like store with async thunks
│ └── portfolioTypes.ts # Type definitions and actions
├── services/
│ └── stocksService.ts # API clients for Polygon and Alpha Vantage
└── config/
├── appConfig.ts # Configuration management
└── appConfig.local.ts # API keys (gitignored)
- Valdi CLI installed and available on PATH
- Node.js and npm
- Xcode (for iOS/macOS development)
- Android Studio (for Android development)
-
Clone the repository
git clone <repository-url> cd stocks
-
Install Valdi CLI (if not already installed)
cd path/to/valdi/npm_modules/cli npm run cli:install -
Setup development environment
valdi dev_setup
-
Sync project configuration
valdi projectsync
This generates IDE files and syncs project dependencies.
The app requires API keys from two services:
- Polygon.io - Real-time and historical stock data
- Alpha Vantage - Symbol search and chart data
-
Polygon.io
- Sign up at polygon.io
- Navigate to your dashboard to get your API key
- Free tier available with rate limits
-
Alpha Vantage
- Sign up at alphavantage.co
- Get your free API key from the dashboard
- Free tier includes 5 API calls per minute
-
Copy the example config file
cp modules/stocks/src/config/appConfig.local.example.ts \ modules/stocks/src/config/appConfig.local.ts
-
Edit
appConfig.local.tsand add your API keys:export const localAppConfig: Partial<AppConfig> = { polygonApiKey: 'your-polygon-api-key-here', alphaVantageApiKey: 'your-alphavantage-api-key-here', };
Note: The
appConfig.local.tsfile is gitignored and will not be committed to version control. -
Verify configuration The app will use these keys automatically. If keys are missing, API calls will fail with appropriate error messages.
iOS:
valdi install iosAndroid:
valdi install androidmacOS:
valdi install macosFor instant updates during development, start the hot reload server:
valdi hotreloadChanges to TypeScript files will be reflected immediately without rebuilding.
Get auto-completion and IntelliSense in VSCode:
valdi projectsyncThis generates the stocks.code-workspace file and updates IDE configuration.
# Sync project after changing dependencies
valdi projectsync
# Build specific targets with Bazel
bazel build //modules/stocks:stocks
# Run tests
bazel test //modules/stocks:tests
# Clean build cache
bazel cleanThe app uses a Redux-like store pattern (portfolioStore.ts) with:
- Actions - Synchronous state updates
- Async Thunks - Side effects and API calls
- Reducer - Pure state transformation functions
- Subscriptions - Component-level state updates
- Polygon.io - Fetches ticker details, company information, and market data
- Alpha Vantage - Provides symbol search autocomplete and daily time series for charts
Both services are abstracted through StocksService which handles:
- HTTP requests via
valdi_http - Error handling and retries
- Response parsing and type safety
- Mock data fallback for development
Components follow Valdi's class-based pattern:
import { StatefulComponent } from 'valdi_core/src/Component';
class MyComponent extends StatefulComponent<ViewModel, State> {
onCreate(): void {
// Initialize component
}
onRender(): void {
// Render TSX/JSX-like syntax
<view>
<label value="Hello Valdi" />
</view>;
}
onDestroy(): void {
// Cleanup
}
}- VSCode Integration - Set breakpoints and debug TypeScript code directly
- Hermes Debugger - Use Chrome DevTools for JavaScript debugging
- Hot Reload - See changes instantly without rebuilding
- Native Debugging - Use Xcode or Android Studio for platform-specific issues
See Valdi debugging documentation for detailed instructions.
- Valdi - Cross-platform UI framework
- TypeScript/TSX - Type-safe component syntax
- Bazel - Build system for reproducible builds
- Flexbox - Layout system with automatic RTL support
- valdi_http - Promise-based HTTP client
- valdi_core - Core component and runtime APIs
- Always run
valdi projectsyncafter changing dependencies or config files - If builds seem stuck, try
bazel cleanto clear the build cache - Ensure Valdi CLI is up to date:
cd path/to/valdi/npm_modules/cli && npm install
- Verify API keys are correctly set in
appConfig.local.ts - Check API rate limits (especially Alpha Vantage free tier: 5 calls/minute)
- Review error messages in the app UI for specific API failures
- Restart
valdi hotreloadif changes aren't appearing - Ensure the app is running and connected to the hot reload server
- Check for TypeScript compilation errors
- Valdi Documentation - Framework documentation and guides
- Valdi Discord - Community support and discussions
- Polygon.io Docs - Stock data API reference
- Alpha Vantage Docs - Search and chart API reference
This demo app is provided as-is for educational purposes. Valdi is licensed under the MIT License.
Built with Valdi - Native performance without sacrificing developer velocity.