ICS React Native App
doc: add readme for app
+98
-24
+98
-24
app/README.md
+98
-24
app/README.md
···
1
-
# Welcome to your Expo app 👋
1
+
# React Native Demo App
2
+
3
+
A simple **mobile banking application** built with **React Native** and **Expo**, powered by the provided API (`react-native-demo`).
4
+
This app demonstrates clean architecture, modular code, and mobile development best practices.
5
+
6
+
---
7
+
8
+
## 📱 Features
9
+
10
+
The app implements the core requirements from the assignment:
11
+
12
+
1. **Authentication** — Login with credentials (`test@test.test` / `password@123` by default).
13
+
2. **Accounts Overview** — List of accounts (checking, savings, etc.).
14
+
3. **Transactions** — View transactions for a selected account, with:
15
+
- search
16
+
- sort
17
+
- pagination
18
+
- infinite scroll
19
+
4. **Cards Overview** — List of stored cards.
20
+
21
+
---
22
+
23
+
## 🏗️ Architecture Decisions
24
+
25
+
- **Framework**: [Expo](https://expo.dev/) for fast development, simple build tooling, and easy testing on iOS, Android, and web.
26
+
- **Language**: [TypeScript](https://www.typescriptlang.org/) for strong typing and maintainability.
27
+
- **Navigation**: [React Navigation](https://reactnavigation.org/) for stack + tab navigation.
28
+
- **Styling**: Basic **React Native styles** with the [Catppuccin](https://catppuccin.com/) color palette.
29
+
- In a real-world project, a UI component library (React Native Paper, Tamagui, NativeBase) would be added for consistency and scalability.
30
+
- **Lists**: [FlashList](https://shopify.github.io/flash-list/) by Shopify for efficient rendering of large lists (transactions).
31
+
- FlashList provides smoother scrolling and better performance compared to FlatList.
32
+
- **Data Fetching & State Management**: [TanStack Query](https://tanstack.com/query) for server-state management.
33
+
- Handles caching, background refetching, and pagination logic cleanly.
34
+
- Used together with FlashList to implement **infinite scroll** on transactions.
35
+
- **Auth & App State**: Context + hooks for lightweight client state.
2
36
3
-
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
37
+
---
4
38
5
-
## Get started
39
+
## 🔧 Prerequisites
6
40
7
-
1. Install dependencies
41
+
- [Node.js](https://nodejs.org/) **v18 or higher**
42
+
- [Expo CLI](https://docs.expo.dev/get-started/installation/):
43
+
44
+
```bash
45
+
npm install -g expo
46
+
```
47
+
48
+
- The API server (`react-native-demo`) running locally at `http://localhost:3001`.
49
+
50
+
---
51
+
52
+
## 🚀 Installation
53
+
54
+
1. Clone the repository and navigate to the app folder:
55
+
56
+
```bash
57
+
git clone git@tangled.sh:mokkenstorm.dev/react-native-demo
58
+
cd react-native-demo/app
59
+
```
60
+
61
+
2. Install dependencies:
8
62
9
63
```bash
10
64
npm install
11
65
```
12
66
13
-
2. Start the app
67
+
3. Generate API bindings from the OpenAPI spec:
14
68
15
69
```bash
16
-
npx expo start
70
+
npm run generate
17
71
```
18
72
19
-
In the output, you'll find options to open the app in a
73
+
---
74
+
75
+
## ▶️ Running the App
76
+
77
+
Run with Expo:
78
+
79
+
```bash
80
+
npm run ios # iOS simulator
81
+
npm run android # Android emulator
82
+
npm run web # Web browser
83
+
```
20
84
21
-
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
22
-
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
23
-
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
24
-
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
85
+
Expo will guide you to open the app on your device or emulator.
86
+
87
+
⚠️ **Note:** The API server **must be running** on `http://localhost:3001` for login and data fetching to work.
25
88
26
-
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
89
+
---
27
90
28
-
## Get a fresh project
91
+
## 🧪 Testing
29
92
30
-
When you're ready, run:
93
+
Unit tests are written with **Jest** and **React Native Testing Library**.
94
+
Run tests with:
31
95
32
96
```bash
33
-
npm run reset-project
97
+
npm test
34
98
```
35
99
36
-
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
100
+
---
37
101
38
-
## Learn more
102
+
## 📦 Node & NPM Versions
39
103
40
-
To learn more about developing your project with Expo, look at the following resources:
104
+
- **Node.js**: v18+
105
+
- **npm**: v9+
41
106
42
-
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
43
-
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
107
+
(Verified using `nvm` for version consistency.)
44
108
45
-
## Join the community
109
+
---
46
110
47
-
Join our community of developers creating universal apps.
111
+
## ✨ Bonus Features
112
+
113
+
- ✅ Refresh token handling to keep the user logged in.
114
+
- ✅ Pull-to-refresh on accounts/transactions.
115
+
- ✅ Loading indicators on API calls.
116
+
- ✅ Infinite scroll for transactions (FlashList + TanStack Query).
117
+
- 🔲 Accessibility improvements (VoiceOver, keyboard navigation).
118
+
- 🔲 CI/CD setup for Expo builds.
48
119
49
-
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
50
-
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
120
+
---
121
+
122
+
## 🗺️ Navigation Flow
123
+
124
+
