Day 2: Supabase setup on Vue project
Tags: 100daysofcode, vue, webdev, programming
Published: 2022-08-25 08:23:02

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
![login form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/netwmj9yxdykpad1h4ef.png)

And on the home page, I just made a simple design, because I want to learn Vue and Supabase.
![css home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyxvacr6lv00ryvo6jtd.png)
 
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:
```typescript
// 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. 
```typescript
// 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.
 {% embed https://github.com/ibrahimhozhun/vuex-supabase %}

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