Review for Eddy (axelerod12)

project-feedback.md

General

1. Two files from different package managers – yarn.lock & package-lock.json. You need to choose one.
2. Readme.md should be more helpful. It should have a description. I recommend you look at other repos or use the readme-generator utility.
3. Comments in code, in most cases, are useless and inconsistent. Now they give very junior kind of explanations (and feelings). I recommend you DELETE them all.

Application

Problems

External API has a rate limit, you just show generic error "Error: Network Error" – axios allows working with error statuses.

Files

https://github.com/axelerod12/public-apis/blob/main/src/App.vue

1. Remove comments
2. FeldmHeader – the name is not descriptive. I recommend using something more descriptive like AppHeader

---

https://github.com/axelerod12/public-apis/tree/main/src/api

I think both files are pretty useless – they wrap Axios. JSDoc – also can be removed or properly extended. For example, if you want to extend – getCategories returns the data in predictable shape:

import axios from "axios";

/**
 * List of all categories.
 *
 * @return Promise<{
     count: number,  
     categories: string[]
    }>
 */
export default function getCategories() {
  return axios.get("https://api.publicapis.org/categories");
}

But request also cat get rate limiting error as a response 😉.

---

https://github.com/axelerod12/public-apis/blob/main/src/views/Error.vue

1. When you use HTML section, you need to provide a title (like h1, h2...).
2. Error name is too generic, and you use it only for the not found page. Just name it Page404 or even 404.

---

Components

Components naming is too strange and is against VueJS comunity recommendations https://v2.vuejs.org/v2/style-guide/#Component-files-strongly-recommended

---

https://github.com/axelerod12/public-apis/blob/main/src/components/header/header.vue

I recommend renaming it to AppHeader and moving it to the components folder's root.

---

public_apis folder. This folder doesn't content public_apis, so this name makes no sense. Based on your app you keep results here. So I recomend rename this folder to results.

---

https://github.com/axelerod12/public-apis/blob/main/src/components/public_apis/public_apis.vue

1. I recommend to rename this component to Results.vue
2. The current component structure is not suitable app purposes.
   • First I recommend to give a title to this section.
   • Move selector and search to out of your else-if and show them always. Now if you get an error – it's impossible to proceed further. Only reload the page.
   • Check properly how you work with errors – in case you got network or rate-limitter error, you should be able to make another request later.
3. You use null a lot, but it's not a PHP. In your components I see title and category expect String, just use '' unstead of null 😉

data() {
    return {
      apis: [],
      loading: true,
      error: null, // just ''
      filters: {
        title: null,  // just ''
        category: null,  // just ''
      },
    };
  },

---

https://github.com/axelerod12/public-apis/blob/main/src/components/public_apis/public_apis_filter.vue

Recommended name ResultsFilter

Please provide empty string where you expect string, you overuse null in JS. As example

value: {
  type: String,
  required: false,
  default: null, // should be ''
},

---

https://github.com/axelerod12/public-apis/blob/main/src/components/public_apis/public_apis_item.vue

Recommended name TableRow

---

https://github.com/axelerod12/public-apis/blob/main/src/components/public_apis/public_apis_list.vue

Recommended name ResultsTable

---

https://github.com/axelerod12/public-apis/blob/main/src/components/public_apis/public_apis_search.vue

Recommended name ResultsSearch

Please provide empty string where you expect string, you overuse null in JS.

---

https://github.com/axelerod12/public-apis/blob/main/src/router/routes.js

I recomend to use more meaningful names based on purpose instead of too generic.

Before

{
  path: '*',
  name: 'Error',
  component: () => import(/* webpackChunkName: "error" */ "@/views/Error.vue"),
},

After

{
  path: '*',
  name: '404',
  component: () => import(/* webpackChunkName: "Page 404" */ "@/views/404.vue"),
},

Project structure updates based on review