Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adwardstark/aspire-react-native-assignment
This repository contains source-code for mobile-app-coding-challenge provided by Aspire.
https://github.com/adwardstark/aspire-react-native-assignment
android expo-cli ios javascript react-native react-navigation redux redux-saga
Last synced: 12 days ago
JSON representation
This repository contains source-code for mobile-app-coding-challenge provided by Aspire.
- Host: GitHub
- URL: https://github.com/adwardstark/aspire-react-native-assignment
- Owner: adwardstark
- Created: 2021-10-02T13:42:42.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-10-04T08:19:11.000Z (about 3 years ago)
- Last Synced: 2024-03-24T13:36:05.432Z (8 months ago)
- Topics: android, expo-cli, ios, javascript, react-native, react-navigation, redux, redux-saga
- Language: JavaScript
- Homepage:
- Size: 1.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Aspire-React-Native-Assignment
This repository contains source-code for mobile-app-coding-challenge provided by Aspire.
## Getting Started
- Clone the repository
- Install project-dependencies using:
```bash
yarn install
```
- Once done, run the app on iOS simulator using:
```bash
yarn ios
```
on Android emulator using:
```bash
yarn android
```
- Voila!
## Tech-Stack
- Expo
- React-Navigation
- Redux
- Redux-Saga
- Javascript (Typescript was optional)
- Jest & React-Native-Testing-Library (For Testing)
## Required Screens
Following is the list of screens required to complete the challenge:
- Debit Card Screen
- Weekly Spending Limit Screen
## Mock-API
The app uses following API for fetching data:
https://my-json-server.typicode.com/adwardstark/demo/card-details
## Component Breakdown
- **ToolbarItem**: Used across screens, supports navigation through back-arrow (togglable).
- **LoadingItem**: Used to show loading animation using progress-bar, while the app loads data from API.
- **AvailableBalanceItem**: Used to show available account balance of card.
- **CardItem**: Renders a card with owner details like card-number, expiry, cvv etc and supports option to show/hide details.
- **SpendingProgressItem**: Renders a progress-bar showing the amount spent weekly and the applied limit.
- **CardOptionItems**: Renders list of options that can be performed on the card.
## Project-Structure
- **components**: Contains all the rendered views.
- **navigation**: Contains routes and bottom-tabs for navigation.
- **redux**: Contains sources [ `actions, reducers, types and store` ] for state-management and `sagas` to make API calls using `redux-saga`.
- **resources**: Contains fonts, images and color styles.
- **screens**: Contains required screens.
## Testing
Test-cases are located in `__test__` directory, to run test-cases do:
```bash
yarn test
```
Once finished, you'll see a response like this:
## Screenshots
