Co w tym kodzie można poprawić? [Github] Django / Vue

Witam Was.
Mam kod na GitHubie, jestem samoukiem - nie mam doświadczenia komercyjnego. Szukam stażu lub juniora w vue/django. Aktywnie aplikuję lecz odzew jest niewielki.
Czy ktoś z doświadczeniem mógłby zerknąć na kod i ewentualnie napisać co poprawić ? Wiem że kod nie jest idealny. Bo ja dopiero zaczynam, a chciałbym dostać wymarzony staż lub juniora Z góry bardzo dziękuję

Jeśli już zerkniecie na kod prosiłbym o ocenę 1-5. osobno backend i frontend.

p.s na co rekrutrzy zwracają uwagę głównie?

Dodaj readme, bo nie wiadomo co to to.

1) Niektóre pliki są strasznie długie https://github.com/inconcessus21/Winorosl/blob/main/QueryHex3/QueryHex/src/views/DetailView.vue (1486 linijek) :P
2) Dość często powtarzają się fragmenty, które można uprościć

if (filtered.length > 0) {
  return true
} else {
  return false
}

//
// vs uproszczona wersja
//

return filtered.length > 0

filteredParticipants() {
  if (this.project.participants) {
      const filtered = this.project.participants.project_participants.filter((part) => {
          return part.approved === true;
      });
      return filtered
  }
},

wantToJoinTeam() {
  if (this.project.participants) {
      const filtered = this.project.participants.project_participants.filter((part) => {
          return part.approved === false && part.want_join === true;
      });
      return filtered
  }
},

welooking() {
  if (this.project.participants) {
      const filtered = this.project.participants.project_participants.filter((part) => {
          return part.approved === false && part.want_join === false && part.approved_looking === true;
      });
      return filtered
  }
},

//
// vs uproszczona wersja
//

filterParticipants(callback) {
  return this.project.participants?.project_participants.filter((part) => callback(part)) || [];
}

filteredParticipants() {
  return this.filterParticipants((part) => part.approved)
}

wantToJoinTeam() {
  return this.filterParticipants((part) => !part.approved && part.want_join);
}

welooking() {
  return this.filterParticipants((part) => !part.approved && !part.want_join && part.approved_looking);
}

3) Przydałoby się częściej korzystać z składni Vue 3 zamiast Vue 2

Przemyśl, czy wszystkie pliki/foldery potrzebujesz trzymać w repo. Bo jak się domyślam, zacommitowałeś do repo wszystko jak leci bez selekcji w initial commit https://github.com/inconcessus21/Winorosl/commit/4d7af2bce2178245c1eb18b5f976b6d3c9bd5b56 , a i w późniejszych commitach wydaje się, że dodajesz wszystko jak leci.

dzięki za wskazówki!
DetailView wiem że muszę rozbić na moduły bo jest za długie lecz jeszcze tego nie zdążyłem zrobić. Readme dodam :)
A jak stylistycznie to wygląda?
nazewnictwo ujdzie czy lipa? nie wiem gdzie stosowac camlcase itd.
Czy backend jest w miarę czytelny? Serializery, views?

Dodałem screeny z apki na githubie.
Xarviel gdzie ta appka ma kod z vue 2?

ps

cz np. taki kod :

  isManager() {
        if (this.project.management) {
            const filtered = this.project.management.filter((part) => {
                return part.includes(this.me.email)
            });
            return filtered.length > 0
        }
    },


    nie lepiej zastąpić by było email na id ze względu security?

drewny napisał(a):

Xarviel gdzie ta appka ma kod z vue 2?

Praktycznie w każdym komponencie, w którym jest logika

https://github.com/inconcessus21/Winorosl/blob/main/QueryHex3/QueryHex/src/views/PreDashboard.vue
https://github.com/inconcessus21/Winorosl/blob/main/QueryHex3/QueryHex/src/views/DetailView.vue
https://github.com/inconcessus21/Winorosl/blob/main/QueryHex3/QueryHex/src/views/ProfileView.vue
https://github.com/inconcessus21/Winorosl/blob/main/QueryHex3/QueryHex/src/components/ProfileView/AboutMeAndSkills.vue
https://github.com/inconcessus21/Winorosl/blob/main/QueryHex3/QueryHex/src/components/ProfileView/EditAvatar.vue

itd :D :P

Spójrz na przykładzie tego komponentu (https://github.com/inconcessus21/Winorosl/blob/main/QueryHex3/QueryHex/src/views/DetailView.vue)

<script>
import '...';
// ...

export default {
    name: 'DetailView',
    data() {
        // ...
    },
    setup() {
      // ...
    },
    components: {
       // ...
    },
    mounted() {
      // ...
    },
    props: {
      // ...
    },
    computed: {
      // ...
    },
}
</script>

bo niby wykorzystujesz funkcję setup (która ma jedynie 2 linijki), ale pomijasz pozostałe elementy z nowego composition api

<script setup>
import { ref, defineProps, onMounted } from 'vue';

// ...

// components
import { Swiper, SwiperSlide } from "swiper/vue";
import Comments from '../components/DetailView/Comments.vue'

// data
const project = ref([]);
// ...
const addTask = ref({
	id: "",
	title: "",
	description: "",
	planningDate: "",
	isDone: false,
	errors: []
});

// props
const props = defineProps({
  uuid: String
});

// mounted
onMounted(() => {
	// ...
});

// computed
const isValidAddTask = computed(() => {
	// ...
});

const isManager = computed(() => {
	// ...
})

const managerList = computed(() => {
	// ...
});

// methods 
const clearTasks = () => {
	addTask.value.isDone = false
	addTask.value.title = "";
	addTask.value.description = "";
	addTask.value.planningDate = "";
}

const calcDate = (date) => moment(date).format('YYYY-DD-MM');

// ...
</script>

według mnie jest dość spora różnica pomiędzy tymi dwoma zapisami