Skip to content

README.md

Latest commit

 

History

History
72 lines (46 loc) · 4.34 KB

README.md

File metadata and controls

72 lines (46 loc) · 4.34 KB

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.

Screen Shot 2022-03-29 at 00 24 07

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.

Screen Shot 2022-03-29 at 00 25 01

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.

Screen Shot 2022-03-29 at 00 25 11

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

Screen Shot 2022-03-29 at 00 28 40

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