ICS React Native App
doc: update docs
+62
-25
+33
-15
Assignment.md
+33
-15
Assignment.md
···
1
-
**React Native Developer Assessment**
1
+
# React Native Developer Assessment
2
2
3
-
**Introduction**
4
-
The purpose of this assignment is to evaluate your familiarity with React Native, mobile development best practices, and to showcase your approach to clean, reusable, and maintainable code. This will also help us understand your sense of design and user experience for mobile applications.
3
+
## Introduction
5
4
6
-
**Requirement**
5
+
The purpose of this assignment is to evaluate your familiarity with React Native,
6
+
mobile development best practices, and to showcase your approach to clean, reusable,
7
+
and maintainable code. This will also help us understand your sense of
8
+
design and user experience for mobile applications.
9
+
10
+
## Requirement
11
+
7
12
Create a simple mobile banking application.
8
-
You can use the provided BankingMockAPI (see README for API details and setup instructions) as a source of data for your application. The app should allow a user to:
13
+
You can use the provided BankingMockAPI as a source of data for your application.
14
+
See README for API details and setup instructions. The app should allow a user to:
9
15
10
16
1. **Authenticate** (login) using credentials.
11
17
2. **View a list of their bank accounts** (e.g., checking, savings, etc.).
12
-
3. **View transactions** related to each account (display a list of transactions for a selected account). It should include ability to:
18
+
3. **View transactions** related to each account, display a
19
+
list of transactions for a selected account.
20
+
It should include ability to:
13
21
- search
14
22
- sort
15
23
- paginate between transactions
16
-
17
24
4. **View a list of their bank cards** (optional).
18
25
19
-
You are free to design the UI as you see fit, but the app should have at least the following screens:
26
+
You are free to design the UI as you see fit,
27
+
but the app should have at least the following screens:
28
+
20
29
- Login screen
21
30
- Accounts overview screen
22
31
- Account details/transactions screen
23
32
24
-
**Architecture**
25
-
There are no strict requirements for architecture. Please design your application as you see fit, but focus on:
33
+
## Architecture
34
+
35
+
There are no strict requirements for architecture.
36
+
Please design your application as you see fit, but focus on:
37
+
26
38
- Clean, modular, and reusable code
27
39
- Mobile development best practices
28
40
- State management (your choice: Context, Redux, Redux-Toolkit etc.)
29
41
- Clear separation of concerns
30
42
31
-
**Notes**
32
-
- The main technology for this assessment is **React Native**. You may use Expo or bare React Native CLI.
43
+
## Notes
44
+
45
+
- The main technology for this assessment is **React Native**.
46
+
- You may use Expo or bare React Native CLI.
33
47
- Use TypeScript for type safety.
34
48
- The application should provide a good user experience on both iOS and Android.
35
-
- Please include a **README** file that explains your architectural decisions (e.g., why you chose a specific state management solution), instructions on how to run your solution, and details about the NodeJS and NPM/Yarn versions used.
49
+
- Please include a **README** file that explains your architectural decisions,
50
+
e.g., why you chose a specific state management solution,
51
+
instructions on how to run your solution, and details about the NodeJS and
52
+
NPM/Yarn versions used.
36
53
- Please include **unit tests** for at least some key components/hooks/screens.
37
54
- Ensure the application runs without errors before submitting.
38
55
- The UI should be simple, intuitive, and visually appealing.
39
56
40
-
**Bonus Points**
57
+
## Bonus Points
58
+
41
59
- Refresh token before it expires to keep the user logged in
42
60
- Add pull-to-refresh or loading indicators where appropriate
43
61
- Add "infinite" scroll for transactions
···
45
63
- e2e tests
46
64
- Accessibility (voiceover, keyboard navigation, etc.)
47
65
- Setup CI/CD
48
-
- Feel free to add extra features or polish to demonstrate your skills
66
+
- Feel free to add extra features or polish to demonstrate your skills
+29
-10
README.md
+29
-10
README.md
···
3
3
## Getting Started
4
4
5
5
### Prerequisites
6
+
6
7
- [Node.js](https://nodejs.org/) (v18 or higher)
7
8
- [Docker](https://www.docker.com/) (optional, for containerized setup)
8
9
9
10
### Installation
10
11
11
12
1. Clone the repository:
12
-
```bash
13
-
git clone <repo-url>
14
-
cd BankingMockAPI
15
-
```
13
+
14
+
```bash
15
+
git clone <repo-url>
16
+
cd BankingMockAPI
17
+
```
18
+
16
19
2. Install dependencies:
17
-
```bash
18
-
npm install
19
-
```
20
+
21
+
```bash
22
+
npm install
23
+
```
20
24
21
25
### Running the Server
22
26
23
27
#### With Node.js
28
+
24
29
```bash
25
30
node server.js
26
31
```
32
+
27
33
The server will start on [http://localhost:3001](http://localhost:3001) by default.
28
34
29
35
#### With Docker
36
+
30
37
```bash
31
38
docker build -t banking-mock-api .
32
39
docker run --name banking-mock-api -d -p 3001:3001 banking-mock-api
···
35
42
Same as mentioned aboe the api will be available at on [http://localhost:3001](http://localhost:3001)
36
43
37
44
Use following commands to stop or start the container:
45
+
38
46
```bash
39
47
docker container stop banking-mock-api
40
48
docker container start banking-mock-api
41
49
```
42
-
43
50
44
51
## API Endpoints
45
52
46
53
### Authentication
47
54
48
55
#### `POST /login`
56
+
49
57
Authenticate user and receive JWT and refresh token.
58
+
50
59
- **Body:**
60
+
51
61
```json
52
62
{
53
63
"username": "test@test.test",
···
63
73
```
64
74
65
75
#### `POST /refresh-token`
76
+
66
77
Get a new JWT using a refresh token.
78
+
67
79
- **Body:**
68
80
```json
69
81
{
···
78
90
}
79
91
```
80
92
81
-
82
93
### Accounts
83
94
84
95
#### `GET /accounts`
96
+
85
97
Get all accounts for the authenticated user.
98
+
86
99
- **Headers:**
87
100
- `Authorization: Bearer <JWT>`
88
101
- **Response:**
···
101
114
### Cards
102
115
103
116
#### `GET /cards`
117
+
104
118
Get all cards for the authenticated user.
119
+
105
120
- **Headers:**
106
121
- `Authorization: Bearer <JWT>`
107
122
- **Response:**
···
121
136
### Transactions
122
137
123
138
#### `GET /transactions`
139
+
124
140
Get transactions for the authenticated user, with search, sort, and pagination.
141
+
125
142
- **Headers:**
126
143
- `Authorization: Bearer <JWT>`
127
144
- **Query Parameters:**
···
147
164
```
148
165
149
166
## Default Test User
167
+
150
168
- **Username:** `test@test.test`
151
169
- **Password:** `password@123`
152
170
153
171
## Database
172
+
154
173
- The SQLite database is used.
155
-
- The database is reset and seeded with test data every time the server starts.
174
+
- The database is reset and seeded with test data every time the server starts.