Ray

Working on multiple projects at the same time, now gonna just focus on one to the finish line.

Fix UX for carousel to work better on all devices. This is for Monday's launch of the React component library.

As promised in the last post, I'll be releasing the code for all the React components I pieced together by looking at tons of tutorials. I'll be putting it into a website so other new coders can easily create these useful components.

The website will be released on 9th November, Monday. I guess you can call it the MVP.

This is something I made because I got so frustrated with the existing libraries of components that require me to read through tons of documentation in order to customise it. Most libraries make customisation so darn hard, why isn't there a place where we newbie React developers can find simple, vanilla jsx and css codes for commonly used components?

Anyway, I'll write a longer post when I launch it next Monday. But here's a quick sneak peak. Yup, I got a more professional name. I also intend to make this all free and open so other React devs could share their components.

Will be sharing the code soon. Found that carousel frameworks for React seem to do too much and is not flexible enough. Hacked one together myself. Will be sharing the code with everyone soon.

I was thinking very hard about how to add value while building in public. I asked on IH and I got pretty good responses. You can read the post here:

https://www.indiehackers.com/post/what-do-you-want-to-read-from-someone-who-is-building-in-public-9f576c773e

In short, most people want 2 things: Inspiring stories and tricks/tactics.

The problem with the former is that my story is short. I only recently started, hence I have not much to share that is "inspiring". Tricks and tactics? Well, that's what I am trying to figure out now. So here's what I came up with:

While building on #boneyard, I intend to share my code on useful React components that I built for my project as well as commonly used components I built for fun. I'll upload once in awhile, perhaps once a week, not so sure. I thought that this would be useful for developers who want to build something quickly but find CSS frameworks too bulky and want to simply stick to the traditional CSS. I've attached a screenshot of my quick figma mockup. Yes, I called it Mad Dog UI. Thought it was funky.

Will start on it tmr. It's 1 am here in Singapore. Time to hit the sack.

I'm going to work a little bit on UI design for now. I find it more refreshing than just looking at backend code. Learning a lot though.

I recently stumbled across this post on IH:
https://www.indiehackers.com/post/after-4-brain-surgeries-i-left-my-6-figure-tech-job-now-i-m-launching-a-startup-in-public-87e569e566

Tim is building in public via a newsletter format. I think this would be a great addition!

Twitter Auth is pretty straightforward. Simply follow:
https://firebase.google.com/docs/auth/web/twitter-login?authuser=0

NextJS and Firebase Auth is pretty new, so there aren’t many tutorials out there. As promised, here is my paper trail.

NextJS react authentication - https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication

The above is great if you just want to copy and paste the functionality and go. The UX follows best practices and you can’t change the UI. Since Boneyard is a real project, I’m going to have to redesign it. I thought that I should instead learn how to connect Firebase Auth to React, and since NextJS is built on React, build the functionality myself on NextJS. Also, learning it is a good thing as I can reuse the code elsewhere.

I used the following video in addition to the NextJS tutorials and by referring to firebase docs.

React, Firebase Video Tutorial -
https://www.youtube.com/watch?v=PKwu15ldZ7k

Firebase Doc, understanding Auth() methods -
https://firebase.google.com/docs/reference/js/firebase.auth.Auth

Before moving on to the signup, a little configuration has to be done to enhance the UX. When a user signs up or requests to reset password, a link will be sent to their email. Firebase provides a generic link and a generic UI, but that’s not production quality and the UX isn’t good. We can create our own one by setting our own redirect link:

To set the link, go to firebase > authentication > templates > edit template > under action url, change it to a link to your website. I’m on my development build, so I’ll be using: localhost:3000/auth/action. Once it is set, it should look something like this depending on your routing structure: http://localhost:3000/auth/action?mode=action&oobCode=code

Note that the link will be the same for both password reset and email verification. Also note that the redirect link above has 2 router queries, Mode and oobCode. We’ll use router queries to differentiate between the two for the UI, and the oobCode to verify the authenticity of the source.

(1) Signing Up

Firebase Doc, creating new users -
https://firebase.google.com/docs/auth/web/start#sign_up_new_users

I started with a simple email login. Email verification is probably needed, so here is how you do it.

Firebase Doc, sending a verification email -
https://firebase.google.com/docs/auth/web/manage-users#send_a_user_a_verification_email

Firebase Doc, verifying email using custom link redirect -
https://firebase.google.com/docs/reference/js/firebase.User#sendemailverification
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#applyactioncode

Firebase Doc, check if email is verified. It is stored as a property in the user object which we can access in the app to handle UI changes -
https://firebase.google.com/docs/reference/js/firebase.User

(2) Signing In

Firebase Doc, signing in existing users -
https://firebase.google.com/docs/auth/web/start#sign_in_existing_users

(3) Handling Password Reset

Firebase Doc, send password reset email
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#sendpasswordresetemail

Firebase Doc, confirm password reset -
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#confirmpasswordreset

That’s about it. Next up, twitter auth.

Signins & password reset are done. Firebase and NextJS with a custom UI is harder than I thought and is not well documented. Collated all tutorial links to be posted once Auth is done.

Working on email verification & error handling for the next coding session. Will prettify the website, then learn how to open source it properly to make it useful for new coders to follow.

I'm going to open source my project in my next update. I like the idea of learning to code in public and leaving my "paper trail" of tutorials. Using a puzzle analogy: open sourcing it is like knowing how the puzzle fits together, where the individual puzzle pieces are the tutorial links I share.

Anyway, I'm done with the Signup part. Will be posting the links I followed when I'm done with the Login part, along with some commentary as to my thought processes.

Will update the description with the tutorial links I am following once I'm done, but going to grind on this for a bit, hence the "Pt. 1". I'm doing this on the side as I have a full time job, so it'll take awhile.

As a side note, when I do get everything up and going, maybe it'll be fun to have people build this with me. I.e. I'll drop in all the tutorial links I am following so people new to code could follow and make something similar. Interesting Idea to entertain.

I've decided. It was a tough one to crack, but I hope it works. Since I'm new at coding, I won't spend time building the entire thing up first. I'll make a landing page, create a form, attach it to firebase, and launch it to collect failed projects and to announce that I am building this thing in public. It'll also work as a test to see if this is content people want to share and read about. What is a community if people aren't engaged?

New to Firebase, beginner at web development. I'll be sure to document my journey as a non-techie going through tech documentation.

When building a community you've got to think about this from day 1. Every second spent building your project should be used to also incubate content and users. Will think deeply about this.

Came up with the idea to build this in public after I get the initial form page up (I guess I'm already building it in public, but no one knows I exist), which shouldn't take long. It'll be a static site, collecting failed projects while I build up the community functionality. Better add value from day 1, right?

Tested google forms for a quick release, but its functionalities do not work long term. Among many other things, people could post projects for other people which would be a headache. I'll make the form myself to better handle the data.

Went with black and electric purple (came up with the name myself). White is beautiful, but I've got this feeling that black works. It's ominous and I like the fact that it envelops the idea of the "death" of a project. Also pieced together a quick logo, looks sick imo. Will be sharing it soon.