CoinFinApp - Crypto Finance Mobile App

About The Project

CoinFinApp is a modern crypto finance mobile application. The UI design was carefully created and then successfully converted into this fully functional mobile app using React Native, Expo, and TypeScript.

This repository serves as the complete mobile implementation of the UI design, providing a seamless and beautiful user experience for crypto and finance management.

Features

• Crypto & Finance Management: Home dashboard with balance, transaction history, and crypto tracking.
• Beautiful UI: High-fidelity implementation of the original UI design.
• Authentication Flow: Complete Login, Register, and Forgot Password screens.
• Wallet & Market Views: Dedicated screens for wallet management and cryptocurrency market prices.
• Responsive & Smooth: Smooth animations, transitions, and responsive layout for different devices.
• Cross-platform: Built with Expo to support iOS, Android, and Web.

Getting Started

Prerequisites

• Node.js (v16 or newer)
• npm or yarn
• Expo CLI (npm install -g expo-cli)
• iOS Simulator, Android Emulator, or a physical device

Installation

1. Clone the repository:

git clone https://github.com/ayhanblt/CoinFinApp.git
cd CoinFinApp

2. Install dependencies:

npm install
# or
yarn install

Running the App

1. Start the development server:

npx expo start

2. Run on specific platforms:

# For iOS
npx expo start --ios

# For Android
npx expo start --android

# For Web
npx expo start --web

Project Structure

CoinFinApp/
├── assets/                 # Images, fonts, and other static assets
├── src/
│   ├── components/         # Reusable UI components
│   ├── context/            # React Context providers
│   ├── hooks/              # Custom React hooks
│   ├── navigation/         # Navigation configuration
│   ├── screens/            # Screen components (auth, main, etc.)
│   ├── theme/              # Theme configuration (colors, typography, etc.)
│   ├── types/              # TypeScript type definitions
│   └── utils/              # Utility functions
├── App.tsx                 # Entry point for the application
└── ...                     

Navigation

The app uses React Navigation with the following structure:

• AppNavigator: Root navigator that handles authentication state
• AuthNavigator: Stack navigator for authentication screens
• BottomTabNavigator: Tab navigator for main app screens