MKA-DEV-APP - GitLite

KO | EN

gitlite — search

#security #rust #golang #large-language-models #ui #windows #openai #mcp #list #macos

MKA-DEV-APP

(★ 9)

No description available.

File Explorer

ZIP Download

- settings.json
- AnimatedBackground.tsx
- Avatar.tsx
- Avatar3D.tsx
- CertCard.tsx
- FocusCard.tsx
- GradientText.tsx
- PrimaryButton.tsx
- SectionHeader.tsx
- SkillBar.tsx
- SkillChip.tsx
- SocialCard.tsx
- StatCard.tsx
- ThemeDock.tsx
- TiltCard.tsx
- UI.tsx
- data.ts
- theme.ts
- ThemeContext.tsx
- themes.ts
- AboutScreen.tsx
- CertsScreen.tsx
- ConnectScreen.tsx
- HomeScreen.tsx
- SkillsScreen.tsx
.gitignore
AGENTS.md
app.json
App.tsx
CLAUDE.md
eas.json
index.ts
LICENSE
package-lock.json
package.json
README.md
tsconfig.json
vercel.json

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">

[![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Expo](https://img.shields.io/badge/Expo-v57.0-000?logo=expo&logoColor=white)](https://expo.dev/)
[![React Native](https://img.shields.io/badge/React%20Native-0.86.2-61dafb?logo=react&logoColor=white)](https://reactnative.dev/)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://raw.githubusercontent.com/Dev-moe-kyawaung/MKA-DEV-APP/main/LICENSE)

A modern, cross-platform mobile application built with **Expo Router**, **React Native**, and **TypeScript**.

[Live Demo](https://www.designarena.ai/preview/mobile?expo=exp%3A%2F%2Fu.expo.dev%2F552f0665-e30d-4f11-9ea9-97bc22a22809%2Fgroup%2F536a2c71-5e5c-4399-b1d1-0953f3c3c5f5) • [Web Preview](https://12vxcd-2e27c7ffj-arcadawebapps3.vercel.app) • [Documentation](https://docs.expo.dev/versions/v57.0.0/)

</div>

---

## 📱 Overview

MKA-DEV-APP is a production-ready mobile application framework designed to deliver seamless experiences across iOS, Android, and web platforms. Built on cutting-edge technologies and best practices, this project serves as a solid foundation for scalable mobile development.

### Key Features

- ⚡ **Fast Development** - Expo's rapid development cycle with hot reload
- 🎯 **Type-Safe** - Full TypeScript support for improved code quality
- 🎨 **Modern UI** - Built with React Navigation and Linear Gradient support
- 📱 **Cross-Platform** - Deploy to iOS, Android, and Web from a single codebase
- 🔐 **Secure Storage** - Integrated with Expo Secure Store for sensitive data
- 🎭 **Rich Animations** - React Native Reanimated v4 for smooth interactions
- 📍 **Smart Linking** - Deep linking support with Expo Linking
- 🌐 **Web Support** - Full React Native Web compatibility

---

## 🚀 Quick Start

### Prerequisites

- **Node.js** v18+ and npm/yarn
- **Expo CLI** installed globally
- **iOS** (requires macOS and Xcode for iOS development)
- **Android Studio** (for Android development)

### Installation

```bash
# Clone the repository
git clone https://github.com/Dev-moe-kyawaung/MKA-DEV-APP.git
cd MKA-DEV-APP

# Install dependencies
npm install
# or
yarn install
```

### Development

```bash
# Start the Expo development server
npm start

# Run on specific platform
npm run android # Android
npm run ios # iOS
npm run web # Web
```

The app will launch with a QR code. Scan it using the Expo Go app on your device to preview changes in real-time.

---

## 📦 Project Structure

```
MKA-DEV-APP/
├── app/ # Expo Router pages and navigation
├── components/ # Reusable UI components
├── hooks/ # Custom React hooks
├── utils/ # Utility functions
├── constants/ # App constants and configuration
├── types/ # TypeScript type definitions
├── package.json # Project dependencies
├── tsconfig.json # TypeScript configuration
└── app.json # Expo app configuration
```

---

## 🛠️ Technology Stack

### Core Framework
| Package | Version | Purpose |
|---------|---------|---------|
| **React** | 19.2.3 | UI library |
| **React Native** | 0.86.2 | Mobile framework |
| **Expo** | ~57.0.14 | Development platform |
| **TypeScript** | ~6.0.3 | Type safety |

### Navigation & UI
| Package | Version | Purpose |
|---------|---------|---------|
| **Expo Router** | Latest | File-based routing |
| **React Navigation** | 7.3.16+ | Navigation solution |
| **React Native Reanimated** | 4.5.3 | Animations |
| **Expo Linear Gradient** | 57.0.1 | Gradient backgrounds |

### Storage & Security
| Package | Version | Purpose |
|---------|---------|---------|
| **Async Storage** | 3.1.1 | Local data persistence |
| **Expo Secure Store** | 57.0.1 | Secure credential storage |

### Icons & Assets
| Package | Version | Purpose |
|---------|---------|---------|
| **Expo Vector Icons** | 15.1.1 | Icon library |
| **Expo Font** | 57.0.1 | Custom fonts |
| **Expo Image** | 57.0.3 | Optimized images |

---

## 📝 Available Scripts

```bash
# Start development server
npm start

# Run on Android device/emulator
npm run android

# Run on iOS simulator
npm run ios

# Run web version
npm run web

# Install dependencies
npm install

# Check TypeScript types
npx tsc --noEmit
```

---

## ⚙️ Configuration

### Environment Setup

Create a `.env` file in the root directory (optional):

```env
API_BASE_URL=https://your-api-endpoint.com
ENV=development
DEBUG=false
```

### Expo Configuration

The `app.json` file contains essential Expo configuration. Key settings:

- **scheme** - Deep link scheme
- **version** - App version
- **platforms** - Supported platforms (ios, android, web)
- **orientation** - Screen orientation (portrait, landscape, default)

For detailed configuration options, visit: [Expo app.json docs](https://docs.expo.dev/versions/v57.0.0/config/app/)

---

## 🔑 Important Notes

> ⚠️ **Expo has changed significantly in v57.0.0**
>
> Before writing any code, please read the exact versioned documentation at:
> https://docs.expo.dev/versions/v57.0.0/

This ensures compatibility with the latest APIs and best practices for this version.

---

## 🎯 Development Workflow

### Code Style

- Use **TypeScript** for all new code
- Follow **ESLint** and **Prettier** configurations
- Use **PascalCase** for component names
- Use **camelCase** for functions and variables

### Git Workflow

```bash
# Create a feature branch
git checkout -b feature/your-feature-name