Fintech App

A cyberpunk-inspired fintech and crypto mobile app built with Expo + React Native, focused on immersive UI, secure auth flows, and modular architecture.

Core Stack

Key Libraries

Why This Project Stands Out

• 🎨 Visual direction inspired by cyberpunk aesthetics with custom glitch, neon, and motion components.
• 🔐 Real-world mobile auth flow with Clerk phone sign-in/sign-up and OTP verification.
• 🧭 Expo Router architecture with grouped routes for authenticated tabs, modals, and dynamic detail pages.
• 📈 Crypto market experience with list + detail flows and chart rendering via Victory Native.
• 💾 Offline-friendly local persistence with Zustand + MMKV for wallet-style transaction data.

Current Features

• 🎬 Intro experience with looping video, animated text, and branded cyber button system.
• 📱 Phone-based authentication (sign up, sign in, OTP verification) powered by Clerk.
• 🧩 Authenticated tab shell with Home and Crypto fully wired.
• 🏠 Home dashboard with balance, actions, transactions table, and sortable widget area.
• 💹 Crypto listings table and crypto detail page with chart + overview tab.
• 👤 Account modal with profile avatar upload, profile name editing, sign-out, and dynamic app icon switching.
• 🔒 Security lock modal with numpad input, haptics, and biometric authentication.

TODO: In Progress / Next

• 🚧 Implement Markets, Trade, and Wallets tab screens (currently placeholders).
• 🧪 Complete missing crypto detail tabs (Info, Trading Data, Square placeholders).
• 🌐 Replace mocked API-route datasets with live CoinMarketCap/CoinPaprika responses.
• ✅ Add test coverage and CI workflow automation.
• 🛠️ Improve stateful interactions and error handling coverage across flows.

Architecture Snapshot

• Root layout wraps app with ClerkProvider, QueryClientProvider, UserInactivityProvider, and GestureHandlerRootView.
• Route protection uses auth state + route segment checks, redirecting users between public intro/auth routes and authenticated tabs.
• API routes are colocated under src/app/api and exposed as:
  • /api/listings
  • /api/info
  • /api/tickers
• Inactivity guard monitors app state and routes to lock modal after background/inactive timeout.
• Balance/transactions state is persisted with Zustand + MMKV via custom storage adapter.

Tech Stack

Languages & Runtime

• TypeScript
• JavaScript
• React 18
• React Native 0.76
• Expo SDK 52
• npm

Core Packages

• expo-router
• @clerk/clerk-expo
• @tanstack/react-query
• zustand
• react-native-mmkv
• react-native-reanimated
• react-native-gesture-handler
• victory-native
• expo-local-authentication
• expo-dynamic-app-icon

Quick Start

Pre-requisites:

• Node.js 18+
• Android Studio + emulator (Android)
• Xcode + simulator (iOS)

Install and run:

npm install
npm run start

Open targets:

npm run ios
npm run android
npm run web

Run tests:

npm test

Environment Variables

Create a .env file based on .env.example:

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=
COINMARKET_API_KEY=

Data Source Note

Crypto endpoints currently return local mocked datasets from API routes:

• src/app/api/listings+api.ts
• src/app/api/info+api.ts
• src/app/api/tickers+api.ts

Live fetch implementations for CoinMarketCap/CoinPaprika are present in those files but commented out. This keeps the app runnable without paid API limits while preserving the production-fetch structure.

Credits

• Inspired by product patterns from Revolut and Binance.
• Visual style inspired by Cyberpunk 2077.
• Thanks to Galaxies.dev for the original tutorial.