Thread by @alfred_lua

My journey building an app, a thread 👇

After graduating from Udacity's Nanodegree, I realized I was quickly forgetting things when I stopped coding for a few days. So I decided to build a simple app and work on it for about an hour every day so that I will keep practicing and learning.

https://twitter.com/alfred_lua/status/1069585695985958913

I'm quite into fitness and health so I thought I'll put an app in that area. Fitness Coach (temporary name) is a to-do list app for your fitness and health.

Here's how the v1 will look like:

I originally used Ember to build the app because it made things quite easy. Thanks to @gkindahl's advice, I decided to rebuild it with vanilla JavaScript so that I can build a strong foundation and spent the last two days (~3 hrs) making the switch.

Here's how it looks like now:

I can now add and remove activities (locally). The next steps will be 1) to connect it to a database so that others can use the app and the data can be stored somewhere (any advice?) and 2) to beautify the app.

(I'll keep updating this thread.)

I styled the app a little (not done yet). I decided to make it mobile-first since it's an app I would want to use on the go. 📱

- Styled the individual activity boxes
- Added a function to format the date to make it more readable
- Realized that I'm missing the location field (going to add that later)

- Moved the add activity section into a modal
- Add CSS and JS to show and hide modal when clicked

- Styled the add activity modal with a simple design

Just 20 mins of coding today; tried to style the sidebar for the desktop version (unsuccessful so far 🙈).

The desktop version is looking much better now ✌️

Added a button for the desktop version for adding a new activity to your list (with a popup and overlay) 😄

- Added a location field (just a text field for now; would love to use a location API eventually)
- Tidied up a few CSS for the mobile version
- Added Firebase to the app! 🔥 (HT @gmzjuliana and @fredrivett) Need to figure out what to do next, hehe.

Just deploy my app using Firebase Hosting. So my app is technically online! It felt pretty smooth (but to be clear, I have no idea what I'm doing 🤷‍♂️). Next is probably to set up the database and user authentication.

Tried working on user authentication, and, well, I don't really understand the docs and what to do. This video helped me understand it a little. Will try again tomorrow!

Somehow managed to add a sign in feature using FirebaseUI. Visitors can technically sign up (if their email is not detected in the database) but the text "Sign in with email" is a bit confusing. Maybe having two buttons (Sign up and Login) before showing this is better 🤔

FirebaseUI is awesome, though I feel that I'm not learning the basics by using it so I'm building a sign-up/login form and system using the methods provided by Firebase.

Whoop! I've built a simple sign up system. Next is to build the login system. Then to show users their individual dashboard when they log in. Can't wait to work on that!

Built the system for signing up, logging in, and logging out! Tried to set the display name while a user signs up but couldn't get it to work 🤔

Back to working on this app after a three-week break. Figured out how to store data to Cloud Firestore and how to structure my data (not sure if the way I'm using is the best yet). Next up, getting the data from Cloud Firestore and displaying it in the app. Exciting stuff!

Hmm, stuck at getting data from Cloud Firestore. It seems that documents need to have at least a field or they can't be queried. Thought of some things to try next. 🤔

Re-organized my data structure. I think it'll make querying for data easier.

(P.s. I'm loving the thinking required!)

Managed to get the data from Cloud Firestore! I'm experiencing a weird issue where the data object "has" data but its length is zero. Might be something to do with stackoverflow.com/questions/4983… since `console.log(JSON.stringify(<getdatafunction>));` gives me an empty object. 🤔

Finally back to my regular hour of coding after a hectic week :)

I'm still stuck with the issue but I think I'm making some (tiny) progress. I think the issue is that I'm calling my functions at the wrong time/sequence. Any recommended reading on this topic? Thanks!

I have a function that is calling another function with a `promise` and `then` to retrieve data from Cloud Firestore. The first function gets executed before the `then` completes so it becomes undefined. 🤔

TFW you finally make progress after getting stuck for about two weeks!!

I realized that I should return the Promise (which fetches the data) rather than the data itself. Thanks, jfriend00 on Stack Overflow! stackoverflow.com/questions/2944…

Woohoo! Managed to grab my data from Cloud Firestore and display it in my app 🎉