Message App to training React Native Skills

backend

The backend is really simple since it's not the focus of the exercise, it is made using NodeJS + Express to keep it simple. It is using body-parser to parse JSON responses, Jest for tests and ESLint to check static code.

The messages array is being created when the first client calls /messages, the array is stored in memory only for simplicity.

Ideas for improvements

• Connect a database (SQL or NoSQL) to save messages
• Insert an authentication middleware for more secure requests
• Possibility to filter API passing Query Parameters
• Integration with Github CI to automatic tests/deploy

app

The app is made using React Native + TypeScript.

Details about the folder structure

• Assets: used for storing all assets used in the app (logo, icons, etc)
• Components: collection of components used through the app to enforce reusability
• Context: configuration for the Store of the app using Context API, this is created similir to a Redux Store
• Navigators: configuration used by React Navigation library to setup the navigation of the app
• Screens: all main screens of the app
• Services: setup the api using axios
• Theme: files for global sizes/colors/etc to be used throughtout the app
• Types: types created in TypeScript to be used in the app
• Utils: utils files for common functions used in the app
• i18n: configuration using react-i18next to concentrate all the strings of the app in one place and possible for future translations

Libraries

• react-navigation: Navigation library used for navigating between screens
• axios: HTTP client to make HTTP requests
• react-i18next: React internalization library
• moment: Date handling library to format dates
• use-reducer-async: Tiny library to create a hook useReducerAsync to make async actions, it's similar to the useReducer hook from React

Screens

StartupScreen that currently is only showing a welcome message and after 1 second goes to the HomeScreen of the app but can be used to check for authentications or initial configuration of the app.

HomeScreen that shows all the messages available to the user making a GET request from the backend. The user can refresh the list using pull to refresh.

DetailScreen that is opened when the user clicks on a message in the previous screen, this screen shows the details of the message and marks the message as read.

Error state of the HomeScreen when the request fails and let the user try again if necessary.

How to run the app with the backend

The backend is runned with npm start and it's good to go, it will run on the following address: http://localhost:3000

To run the app on Android just type npm run android on a terminal inside the app folder, if the API is not being reach you need to update the baseURL inside app/Services/api.tsx to http://10.0.2.2:3000 since it represents localhost on Android emulators, if you are running on a physical device you will need to put the IP Address of your computer in the network.

To run the app on iOS just type npm run ios on a terminal inside the app folder, if the API is not being reached you need to update the baseURL inside app/Services/api.tsx to http://localhost:3000 since this works on iOS simulators, if you are running on a physical device you will need to put the IP Address of your computer in the network.

Ideas for improvements

• Login and Register of new users
• Possibility for the user to delete messages
• Writing Unit Tests using Jest
• Writing UI Tests