The tenth week of my personal #100DaysOfCode while learning Vue is done, with only one month left, and I’ve learnt pretty useful things this week related to Databases.
Firebase as Database
My first day was totally horrendous. I’ve spent more than one our trying to create and connect to a Firebase database. Every post I saw used a different way and different packages to use it. And none worked for me.
I managed to find a fix: I just need to use Firestore, from Firebase. Their methods and way to work with are way better and in no time I managed to fetch the information I needed:
Admin section
As now I can interact with the database, I count and display how many events, pets and entries are in the database at the admin section I created last week:
And, of course, I can display them:
Every single event is listed there. In actions, to the right, I can delete them and display the details of each one. It looks like this:
Not only it is displayed
Public Event section
Of course, if we can manage our events, it is to display them, right?
Most of the information is displayed as a card. If we click on the bottom-right information button, the whole card reveals:
Of course, there is a lot of room of improvement, especially in the design, but I’m learning how to interact between components, the Vue lifecycle hooks, how to use a Database and more, and which each new learning, new doors open to me, so I’m pretty happy with that.
Next week
Next week I’m going to improve a bit the Event model, creating a ‘Create Event’ view, and then applying the same functionality to Pets and Blogpost.
After that and a few touches here and there, I should have finished the Animal Shelter 1.0 version!
I hope you are as excited as me and, if you didn’t, start to learn Vue. It is a great tool to add to your belt.
Edit: I finished the challenge, here’s what I’ve learnt: #100DaysOfCode learning Vue: My Five Ws
