I am in the process of programming an app

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.

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

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.

~ thanks for reading!