jobs-react-native

Jobs search application using Indeed API, React Navigation, and maps.

Disclaimer: I followed through Stephen Grinder's Advanced React Native. However, due to explosive growth and constant improvements of React Native, by the time I followed through his lecture, syntax and some navigation codes are outdated. I overcame these issues by going to their official documentations in navigations and react native. Also, I have implemented my own logic and futher implementations on this app to learn more about React Native. IF YOU ARE GOING TO FOLLOW HIS LECTURE, MAKE SURE TO CHECK package.json first to match the versions

Overview

All the screens that I will be working on.

How these screens are related to each other.

Setting up

Installing react-navigation

npm install --save react-navigation

Installing react-native-elements

npm install --save react-native-elements

Installing redux react-redux redux-thunk

npm install --save redux react-redux redux-thunk

Installing lodash

npm install --save lodash

Installing axios

npm install --save axios

Installing geocode converter to zipcode

npm install --save latlng-to-zip

Installing query-string parsing & stringifying

npm install --save qs

Installing Data Persistency

npm install --save redux-persist

Coding Standards

I am currently following coding Standards from airbnb. I have decided to use fat-arrow functions for actions. I have decided to use functions for stateless classes (without state, they are essentially just functions).

Welcome Screen (or Tutorials Screen)

This Tutorials screen will introduce users what this app is about and how it will work!

Authentication Screen (FB auth)

I will be using Facebook Authentication via Expo. Disclaimer: I put my API keys into .gitignore so please get your own keys if you are going to use this project.

// How to use AsyncStorage
import { AsyncStorage } from 'react-native';
// it works like a localStorage in web browser but is asynchronous. Need a callback to handle after successful request.
AsyncStorage.setItem('fb_token', token)
AsyncStorage.getItem('fb_token')

//ES6 arrow function + async-await
export const facebookLogin = () => async dispatch => {
  let token = await AsyncStorage.getItem('fb_token');

  if (token) {
    // Dispatch an action that FB login is completed
  } else {
    // Start up FB Login process
  }
}

More details on how my auth action works.

Map Screen (Airbnb's mapscreen)

This Map screen is redirected after FB authentication is successful. I am utilizing Mapview from React Native.

Deck Screen

This Deck screen will fetch a list of jobs in the area that was designated from previous screen. The SwipeDeck component will be used to render a job, and if user likes a job, it will be stored into a list of saved jobs.

Review Screen

This Review screen will render a list of jobs that user has liked.

Settings Screen

This Settings screen will have a button that will clear out the list of liked jobs.

Offline Data Persistency

How Redux Persist works.

persistStore(store, { storage: AsyncStorage, whitelist: ['likedJobs'] });
persistStore(store, { storage: AsyncStorage, whitelist: ['likedJobs'] }).purge(); // to delete saved/persistent states.

If you change the data type of the return state and need to update the current persistStore, then take a look at this doc redux-persist-migrate.

Push Notifications

This push notifications will ask for permissions for push notifications and send out alerts to users. Use API provider to test push notifications!