/Expensee

Expenses tracking app

Primary LanguageMakefile

expensee

Pleo mobile challenge

Product

  • Name: Expensee
  • Focus: iOS (React Native + Native module)

Set up

  • Run mobile-challenge/api server locally
  • Go to expensee and run npm install
  • Navigate to expensee/ios and run pod install
IMPORTANT: In expensee/ENV.js set the base url to read from/post to server
  • To run on ios simulator:
    • set baseUrl: 'http://localhost:3000'
  • To run on iphone:
    • make sure your iphone is on the same wifi network as the machine where the server is running
    • set baseUrl: 'http://YOUR_WIFI_NETWORK_IP_ADDRESS:3000'
    • Launch the iOS simulator or open the project in Xcode and launch it on a real device from there

IMPORTANT:
If the app does not build correctly on the javascript IDE you are using, build it directly from Xcode by opening the expensee.xcworkspace from the ios folder

Implementation

  • Javascript and Swift
  • Non-Expo
  • State management: REDUX
  • Native module (Swift): Image picker (get called in JS realm, operates in Native Realm, returns data to JS realm)
  • External libraries
    • REDUX: redux, react-redux, redux-thunk
    • EXPO: @expo/vector-icons expo-font
    • REACT NAVIGATION: react-navigation react-navigation-stack react-navigation-header-buttons react-native-gesture-handler react-native-reanimated react-native-screens

Functionalities

Landing page

  • User can list expenses
  • Expenses are listed in with a limit of 25 per page showing for each expense:
    • Index
    • Amount and currency
    • Name (first and last) of the person who did the expense
    • Email of the person who did the expense
    • Date of the expense (MM/dd/YYYY, hh:mm 24hours)
    • Merchant name
    • If a comment has been added (bubble icon on top-right corner has full opacity)
    • If and how many receipts have been added (folder icon on top-right corner has full opacity and the number next to it has value > 0)
  • Upload next 25 or previous 25 by pressing the buttons at the bottom
  • User can tap on expense to navigate to the expense detail page
  • User can filter on expenses (NOTE: the search/filtering is done on all expenses (not just the 25 appearing on the page)
  • Tap on search icon on top right corner in navigation bar
  • Search for:
    • Currencies EUR, GBP, DKK: e.g. EUR -> all the expenses in EUR
    • Minimum amount and currency: e.g. 2000 EUR -> filters all the expenses >= 2000 EUR
    • Name or email of the person who did the expense (part of the name also works): e.g. Vick -> returns Vickie Lee
    • Last names starting with a letter: e.g. R -> retunrs all Last Names starting with R
  • Re-tap the icon to close the search box and reload the expenses if any search has been done

Expense detail page

  • User sees expense details
  • User can add/edit a comment on an expense
  • Comment is displayed next to the bubble icon
  • User can add a receipt image on an expense
  • Select picture from photo library or take new picture
  • See added receipt in a horizontal gallery below
  • Tap on receipt image to navigate to receipt detail page

Receipt detail page

  • User sees receipt picture full screen

Extras

  • Localization: it, en, da