moguelor/rn-google-maps-challenge

Challenge Project.

Challenge project created to show the knowledge acquired as Mobile Developer with technologies to create universal native apps (ios and android) with react-native and typescript.

Demo Videos

IOS APP

ANDROID APP

Started Kit

The initial structure is created by expo, the complete framework for react-native to agilize the developement.

Installation

Execute the follow commands.

git clone https://github.com/moguelor/rn-google-maps-challenge.git
cd rn-google-maps-challenge
npm install
npm start

You'll see an QR code, download the Expo Go application for ios and android

You'll see the application running directly on your device.

Structure Folder

|-- .expo                      # Expo related config files.
|-- .husky                     # Automatizing the linter and format pre-commits.
|-- .vscode                    # vscode settings file.
|-- assets                     # Assets for the application.
|-- src
    |-- __tests__              # Unit tests with jest.
    |-- shared                 # Shared items along the application.
        |-- components         # Reusable components
        |-- hooks              # Encapsulated logic in hooks.
        types.ts               # Reusable types for typescript.
        utils.ts               # Helpful utilities.
    |-- views                  # Views of the app.
.eslintignore                  # Ignored items for eslint.
.eslintrc                      # Configuration for eslint.
.gitignore                     # Ignored files,
.prettierrc                    # Prettier configuration,
app.json                       # Main app configuration.
App.tsx                        # Point of entry of the application.
babel.config.js                # Babel configuration.
packages.json                  # Packages.
tsconfig.json                  # Typescript rules configuration.

Libraries

Here are the main libraries used in the project.

react-native - Create multiplatform applications using react.
typescript - Types for javascript.
react-native-reanimated - Animations for react-native.
react-native-safe-area-context - Safe area

Code support

Testing

jest

Deploy - Development

Expo Go

Google APIs

Required features.

1. Implement search text with autocomplete from google maps.
2. As minimum three letters to start calling the api.
3. Add debounced function to wait 500 miliseconds of inactivity to start the search.
4. If the user select an item from the suggestions this would be interpreted as a custom marker in the map.
5. Add a clear button to remove the query and start a new search.
6. Request for the localization of the user, set it up as default if is no selected any marker.

BONUS

Added a smooth look and feel with animations.
Added extra validations when the user is calling the api.
Customized the application with the splash and icons.
Added unit testing for some util functions.
Added clean and reusable components.

[TODO]

Deploy the apps directly with EAS BUILD

moguelor / rn-google-maps-challenge