Rebellion of the Outliers! Building a React Native API-Driven App for iOS and Android — PhoMeCrazy
This week I found myself in the indigo pool. Allowing me to vote on level 2 and 3 goals. So, when I found a level 3 solo project, that involved using React, to build mobile apps! Let’s just say I was down to take on the challenge. Little did I know I would be apart of a little rebellious group at the guild, working on a project that is not the most loved by our Software Engineering Practitioners.
I found out after pool had closed that there would be no coaching for my goal. From what I gather, building mobile apps is not within the scope of coaching at the Learners Guild. I got a chance to chat with an SEP yesterday regarding the micro drama and got some clarity. Apparently the idea of deploying such things into the mobile echo system can get cloudy. There are rules for apple and android that are beyond the scope of this program, which I certainly understand.
I however am happy to be diversifying my portfolio and expanding my knowledge base. Fortunately I’m not afraid of a challenge, I’m just here to learn as much as I can. Which… seems to be happening.
So… what did the rebel choose to build this week!?
PhoMeCrazy (see what I did there?)… your one stop mobile app to find the top 30 Pho restaurants near you!
Wow! This week pushed me harder than I thought! I never quite felt out of my comfort zone, but there were definitely days where I overestimated myself. Ultimately I ended up building 3 apps in total. Monday I finished PhoMeCrazy. On Tuesday and Wednesday I took a more structured deep dive into React-Native by following Stephen Grider’s Udemy course The Complete React Native and Redux course, building 2 apps, 1 for learning more about styling, and another for learning about authentication.
By Thursday I decided to build a new app for my artifact so that I could combine everything I learned into 1 solid product. I’m glad I did this, it challenged my ability to retain information, and for that I’m thankful.
I learned a ton this week, and I’d love to take a teaching moment. But i’ll leave pictures and gists instead for your enjoyment.
This is the file that starts the app. The index.os.js and index.android.js files are identical, allowing you to run the app in any environment (with some definite additional setup for Android).
The next file was the Navigator. This allowed the pages to play nicely together and provide smooth transitions and back buttons. The navigator runs on a stack data structure allowing linking not unlike a websites back and forward button.
From there I created my primary search page. This acted as a homepage of sorts, with a button to navigate to the GymList page.
The GymList page used the GymDetail page to render each card, and then display them in list form.
You’ll notice that there are some imports being utilized from a component folder. I found a cool little trick to re-utilize common components. If you make a index.js file within the directory you’re referencing and export each component. It makes for an easy way to re-use components!
And here are my reusable components!
Well folks… that’s it! I wish I could think of more, but I’m having a serious case of the Friday’s. I’m happy I don’t have much going on this weekend, because I plan to continue to not have much going on! I’ll leave you with some of my whiteboard scribbles! Until next week…