Ninth week of #100DaysOfCode – Vue

Quick update of my ninth week of the #100DaysOfCode challenge, were I added a few cool things.

This week was a bit crazy and I didn’t dedicate too much time outside of the mandatory (for me) hour of Vue. Despite that, I added some cool things:

Login section

Seems a simple login, right? Well, besides the login, validation, and Firebase authentication/login, I added a cool mechanism for the login.

As this should is an Animal Shelter website, having a “login” section everybody can click, next to the others, wasn’t a good idea for me.

So, in order to access to the Login section, you have to type admin. Yes. As it sounds. Whenever the page you are in, if you type ‘a’, ‘d’, ‘m’, ‘i’, and ‘n’, in that order, Vue pushes the route of login, sending the user to the login page. Cool, right?

And now when you login, Vue fetches the Firebase payload and adds it to Vuex. This way, Vuex will have the current user always at hand.

Admin section

I designed an admin section where the admin can perform CRUD operations (Create, Read, Update and Delete) with posts, events and pets. It is a cool visible way to create them.

That’s it?

Yes. That’s it.

I had a bit of trouble finding how to add and use Firebase with a Vue project. I found many posts explaining how to do it, but each one did it in a different way, adding packages, using Firestore, etc.

Now that I have connected Firebase with Vue, it would be easier to add more features that uses Firebase, such as performing operations with the pets, blogs, events, guarding routes (keeping non-logged uses from entering this sites), and more.

I still have more than one month and I feel confident that I can finish this web application.

So let’s see what I have done on my 10th week of the challenge.

Edit: I finished the challenge, here’s what I’ve learnt: #100DaysOfCode learning Vue: My Five Ws