Hi everyone, recently I started a #100daysofcode challenge for myself to learn new skills and get better at coding generally. And this post is about Day 2.

Summary of the day

Compared to yesterday I spend more time coding and probably I was more productive. But as I mentioned on Day 1 article I said that I'll study before coding. I did study but I couldn't focus on and because of this, despite spending more time studying, I studied less. I think I shouldn't give that snack breaks, they just destroyed my focus. So, I decided to schedule my day. Not very strict but at least I need be sure that I don't give random breaks. In the coding part I finished designing login form and home page. Designing part wasn't much I just styled a this button, rest of the form was styled yesterday

And on the home page, I just made a simple design, because I want to learn Vue and Supabase.

After finishing that I started looking at Supabase docs. My first impressions about it is that I think they made a pretty good job about function names compared to Firebase, lol! For example sign up function:

// Firebase
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password);

// Supabase
const { user, session, error } = await supabase.auth.signUp({
  email,
  password,
});

As you can easily see, function names on Firebase are too long, yeah they're explanatory but if I want to register a user with an auth provider(Github for example) I need to import another function and a provider.

// Firebase
const auth = getAuth();
const provider = new GithubAuthProvider();

signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    const credential = GithubAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
  });

// Supabase
const { user, session, error } = await supabase.auth.signIn({
  provider: 'github',
});

For that reason, I think using Supabase is easier than Firebase, at least coding part. And I think Supabase docs are a bit better than Firebase because as you can see above they use await keyword while Firebase using callbacks. For code readability using async and await is better than callbacks. So, when I want to use a code block from Firebase docs. I need to rewrite it using async and await with a try-catch block. Also I'm curious about your thoughts, please share your opinions about which one is better to you, Supabase or Firebase?

Anyway, basically I can say that working with Supabase was nice for now. Only thing I think that could be better is validation. Supabase doesn't validates emails or strong passwords. What I mean is they don't check if email is really an email. I think they can improve that.

Besides working with Supabase, today I started using Vuex store too. I think it's something between React Context API and Redux. I simply loved it. Context API is very good, I use it nearly everytime but after seeing Vuex, I think Context API gives you so much freedom. Of course both has its pros and cons but I think the way you communicate with state is better in Vuex. But that's one man's opinion as I said both has pros and cons. And even I think Vuex is better than Context API, I can't use it in a React project.

By the way, you can also take a look at github repo for this project.

yarn install

yarn serve

yarn build

yarn lint

That's it for today, have a nice day!