Dogs app - critiques welcome

Gallery
#1

Here’s an app I built to learn full stack.
Backend: Node.js, Express
Frontend: Vue.js, Sass, TailwindCSS
Authentication is done using Auth0
Instructions on how to run locally inside the README:

#2

Looking good. I just did a quick glance but let me know if you have questions about something specific I should look at.

1 Like
#3

I computed the url for my image. My image loads asynchronously. I update my state with the json response I get from the Api, on button click.
I need a default image to load before I have my state updated. Then I use a prop to pass the state to my component.
I tried to use a default image for that prop, in this component, but it’s not working as expected.
I did something like:

props: {
   item: {
     type: String,
     required: true,
     default: "img/dog-logo.6e13b6c4.png"
   }
}

Then, in my template, I just did :src="item". Problem is before getting the state, item is not a String, but an object. (null is object) So I get a type error and it won’t load me the default.
This is the hack I came up with and I wonder if there’s a better way to achieve this.
Here’s the code I am talking about:

#4

Hmm, add the vuejs developer tools to your browser and see if you can stop it where it loads. I’m betting you’re not getting the props right on this, or this may be how you have to solve this by using the computed: thing.

1 Like
#5

Ok, will play more with it.
Damn! Now I know what’s going on, I set my state wrong, expecting an Array and getting a String…
I previously played with other endpoints of this API, and I received Arrays, so I forgot to change it in the state.
I do smth like dogs = [], but I need to do dogs = “”.
In fact what I just did is directly set the default image in the state. It works.

1 Like