This is the second post in a series of posts which will illuminate my journey to becoming a Full-Stack JavaScript Developer. Read the first one here.

Recap

My plan is to progressively enhance the app into a fully complete app, allowing me to step-by-step learn important principles of development without overwhelming myself while at the same time practice my learning by applying them to a real app.

Planning

I mentioned in the previous post that I’ll be using React Native to build the app itself along with Firebase as the “backend”. This type of app is often referred to as a serverless app because it doesn’t require building out a separate server-side app. For example, a common modern app is built with the MERN stack:

• MongoDB
• Express.js
• React/React Native
• Node.js

We’ll be cutting out the MEN from this equation and replacing them with an integration with the Firebase platform.

Development Tools

I decided to use the Expo CLI library to create this app. When I was first learning React Native I was using the standard react-native-cli library along with Android Studio for phone emulation but Android Studio was quite buggy for me and I had an awful time with debugging.

Expo logs console messages right in the terminal(doesn’t require a browser window) so that was fine for me for this project. Additionally, I really liked testing my app on a real device. It feels so much more rewarding and “real” as you progress.

Navigation

I decided to use React Navigation for navigating through the various screens and tabs of the app. React Navigation was a bit tough for me to grasp at first but the example project that ships with Expo helped a lot.

The navigation setup is a basic Switch Navigator which contains two other main pieces of navigation: Main and Auth. Each of these are also their own StackNavigators which contain multiple screens.

Think of a Switch Navigator as just a way to navigate linearly between screens; you view one screen at a time and can switch to another one.

The Main portion of the app is the area which a logged-in user sees and gets to interact with. This is done with a React Navigation TabNavigator component which contains three different tabs to navigate through the main area of the app.

The Auth portion of the app is the area which a logged-out user sees. It is the default path when entering the app.

I don’t have a great eye for design or UI but this will do for an MVP.

Next Steps

Rather than drone on forever I’ll try to keep posts on the shorter side in order to make them more digestible and less boring.

The next post will discuss the layout and functionality of the app as well as the data it works with. Cheers!