I am in the process of programming an app
Tags: reactnative, javascript, firebase, app
Published: 2022-01-26 08:58:33

### Hello, my name is Philipp, 
I'm 20 years old and I've been programming since I was 13. (= self taught lol) I come from Germany which is why my English is not the best. 

I've been thinking about making a post on Dev.to for a while now but I wasn't sure for what purpose and if it would help anyone. I think it could be interesting for one or the other, however I would like to note that I am not a professional, just someone who is currently sitting at home and wants to start his own business. Sooo, here we go.



![image with lets as meaning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25fbv2ebsxn4kfxj5gm8.gif)


## First, what exactly am I doing?
I am programming an app based on react-native in the frontend and firebase in the backend. It will be an app, which helps people & groups to stop smoking. 
### How. 
Very simple, the main idea is not to leave the person alone, because as some people know, it is much easier when you work together, i.e. it is socialized, it's not only possible to fulfill your goals alone, its also possible to fulfill the goals of the group, e.g. if you don't have anyone to quit, there are certainly people who are in the process and would like to make contact.
 _I mean who likes to be alone_


### But let's get to the technical side. 
I'm implementing the whole thing with react-native, because I'm just a javascript lover, I mean, with javascript everything is possible, apps, websites, desktop apps, watch apps ...

But the aspects that brought me to react-native are simple.
- 1 codebase
- javascript
- not angular
- i already know how to use react

_exactly_, that's all it took, and I mean, which developer isn't convinced by React and just has fun developing, I mean it's simple*, open for custom structures, performant and coded in javascript.

### okay, but why firebase? Why no own backend? 
the question is easy to answer, but I'll make the whole thing a little more detailed first and then I'll summarize it again concisely in a counter question. 
Firebase is probably the most established cloud backend for web/app/games on the market. I mean sure, meanwhile there are Amblify or other competitors which nevertheless much more important aspects like bspw money spent. And who already used Firebase knows that it should not be used for BigData projects. In my opinion Firebase is my tool to go, because 
- I already knew it before react-native
- it has no, a very weak learning curve
- it can be very powerful if you use it right because it already has everything you need

**so now the counter question**, _why reinvent something when all aspects are already given as good as you need?_

### now we come to my used npm/yarn packages 
#### I would like to briefly address why I use yarn and not npm. (spoiler, because of performance)
Yarn is a package manager like npm developed by Facebook with the intention to fix the problems you have with npm, one major problem is the performance, an average simple app starts with npm in 67 seconds and with yarn it takes only 57 and when cached npm takes npm 61 seconds and yarn only 29. Npm had some security problems in the beginning which are now fixed with the v6. 

#### So, which packages do I use
`"dependencies": {
    "@react-native-community/netinfo": "^7.1.7",
    "@react-native-firebase/app": "^14.2.2",
    "@react-native-firebase/auth": "^14.2.2",
    "@react-native-firebase/firestore": "^14.2.2",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@sentry/react-native": "^3.2.12",
    "react": "17.0.2",
    "react-native": "0.67.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.2",
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^9.0.0"
  }`

##### netinfo
netinfo is a package that simplifies the request of the internet status
##### firebase/app | firebase/auth firebase/firestore
as already mentioned i use firebase as backend which is why there is no need to install the packages for it. 
"app" is the core of the whole thing, which makes it possible to use firebase at all.
"auth" makes it possible to use firebase authentication
"firestore" firebase has 2 types of databases, one is firestore which is nothing else than a nosql database and the other is a realtime database which is named like that and the name is self-explanatory
##### navigation/bottom-tabs / navigation/native / navigation/native-stack
I use react-navigation as a routing provider, was simply my first choice so far and it is simply everything possible with it. 
react-navigation offers beside the native package further packages, once native-stack which is in the end just a collection of screens and by the navigation argument makes it possible to switch easily between different screens. bottom-tabs on the other hand is from the application the same as native-stack only that a bottom bar is added which shows the screens in the group. 
##### sentry 
sentry is only for error / bug / logging purposes
##### react-native-safe-area-context
handles the correct display of the screens, for example with a notch, rounded displays ..etc it sets the correct padding / margin of the view
##### react-native-screens
is important when using react-navigation because on the one hand it makes the use of the ios "reachability feature" feasible and on the other hand it optimizes memory usage
##### react-native-svg
makes it possible to use svg elements in jsx, i.e. a normal svg is converted to a javascript object
##### react-native-vector-icons
a collection of icon packages like fontawesome material icon fonts AntIcon based on react-native-svg

#### project structure

![picture of project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vql9gasvt7n750g7ghx.png)

##### src - source folder 
**includes:**
##### assets - all files that I need like images, fonts, vectors
  - images - all images
  - vectors - all vectors

##### context - all files needed for state management handled by the react-context api
  - Context.js - file which includes all createContext values
  - Provider.js - file which includes all Providers for all createContext values

##### lang - all files for multi lang support
  - Messages.js - includes a object with all static messages sorted by language

##### navigation - includes all screens seperated by stack 
  - appstack - navigation if user is logged
  - authstack - navigation if user is not logged
  - profilestack - navigation if user is logged but has no profile in firestore db
  - util - contains all util screens (LoadingScreen, NoConnectionScreen, ..)

Okay, this was my first post, if it is desired I will post some more about the project, for example logic, how I did what. If you are interested in small details, like how the app looks like, how far it is, feel free to follow me on [Twitter](https://twitter.com/Philipp85775754).

~ thanks for reading!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tsqduw8boxhdw6g90u7.gif)