BeCourage App

an insurance app built in RN ❤️

Presquites:

• Typescript
• Android/iOS development tools installed
• React Native >0.64

How to run the project

Step 1:

Download or clone this repo by using the link below:

git clone https://github.com/iampato/BeCourage.git

Step 2:

Ensure you have react native cli install

Step 3:

Cd into the project directory and install packages using npm or yarn

yarn install

or

npm i

Step 5:

Run the project, depending on the React Native CLI installed, run metro:

yarn start

or

npm run start

If it gives you the option to either run android or ios press a for android and i for ios if not run :

• Android

yarn android

• iOS

yarn ios

Libraries & Tools Used

1. State management

   • Redux - a predictable state container for managing the application state
   • React Redux - official React bindings for Redux
   • redux-thunk - a middleware for handling asynchronous actions in Redux
   • redux-persist - for persisting and rehydrating the Redux store

2. Code generation

   • react-native-codegen - a tool for generating type-safe bridge code between JavaScript and native code

3. Navigation

   • React Navigation - a library for handling navigation in React Native apps

4. Testing

   • Jest - a JavaScript testing framework

5. Others

   • react-native-svg - a library for SVG support in React Native
   • react-native-vector-icons - a library for using custom icons in React Native
   • react-native-safe-area-context - a library for handling safe area insets in React Native
   • react-native-chart-kit - a library for creating charts in React Native
   • react-native-picker-select - a library for creating cross-platform picker select components in React Native
   • lottie-react-native - a library for rendering Lottie animations in React Native

Folder Structure

This application uses a multi-module architecture though the packages are not in seperate packages this can easily be done. for purposes of simplicity I under them under src

Here is the folder structure we have been using in this project inside of src

.
├── app
...
├── components
...
├── core
...
└── features
...

1. The app* module holds app related things example the app entry component, main routes etc Ideally high level components that are need by an app

├── app
│   ├── App.tsx
│   └── rootNavigation.tsx

2. The core* module are common things that an app needs, and various features a can depend on this module example of things found on the core module include:
   • assets - a central place for maanaging assets instead of directly using them in the app, makes it easy to change assets
   • config - Set up your config; things like APIURL, sentry url etc
   • constants - constants used in your application
   • theme - the app uses a custom theme to provide theming
   • styles - includes extensions on various colors, textstyles, durations, Corners
   • And many more

For this app here were my core modules; constansts to hold my immutable variables, sizes for dynamic and responsive designs, textTopography for my custom text topography and lastly theme that exposed an hook for getting theme colors based on the theme of the device

├── core
│   ├── constants.ts
│   ├── sizes.ts
│   ├── textTopography.ts
│   └── theme.ts

3. The Feature* module houses all the features and in this app they include

Ideally a feature has the following;

• screens - screens in that feature
• navigation - handle navigation in that feature and the root navigation imports this
• store - have your state management solution here
• components - reusable components in that feature

└── features
    ├── authentication
    │   ├── components
    │   ├── navigation
    │   │   └── authenticationNavigation.tsx
    │   └── screens
    │       ├── forgotPasswordScreen.tsx
    │       ├── landingScreen.tsx
    │       ├── loginScreen.tsx
    │       └── registerScreen.tsx
    ├── commission
    │   ├── navigation
    │   │   └── commissionNavigation.tsx
    │   └── screens
    │       └── commissionScreen.tsx
    ├── home
    │   ├── components
    │   │   ├── policyCard.tsx
    │   │   ├── policyTabs.tsx
    │   │   └── priceFilter.tsx
    │   ├── navigation
    │   │   └── homeNavigation.tsx
    │   └── screens
    │       └── homeScreen.tsx
    ├── main
    │   ├── components
    │   ├── navigation
    │   │   └── mainNavigation.tsx
    │   └── screens
    │       └── mainScreen.ts
    ├── policy
    │   ├── components
    │   │   └── policyCard.tsx
    │   ├── navigation
    │   │   ├── policyNavigation.tsx
    │   │   └── policyTabs.tsx
    │   └── screens
    │       ├── claimsScreen.tsx
    │       └── policyScreen.tsx
    └── quatation
        ├── components
        │   ├── medicalInsuranceForm.tsx
        │   ├── quotationCard.tsx
        │   ├── quotationForm.tsx
        │   └── quotationType.tsx
        ├── navigation
        │   └── quatationNavigation.tsx
        └── screens
            ├── addQuatationScreen.tsx
            └── quatationScreen.tsx

Improvements that could be made

1. Adding of more tests (time constraints)

The final app looks like this:

Video demo

becourage.mp4