sbeugen sbeugen

This guide provides step by step instructions on how to setup a repository consisting of a frontend directory bootstrapped using Vite and a backend directory bootstrapped using the NestJS-CLI. Note that you will need node and npm installed globally on you machine. This can be done by downloading the current LTS version for your OS from here. In addition to this we will use pnpm as an alternative to the Node Package Manager (npm) in our project. After setting up node on you machine you can install pnpm by running npm install -g pnpm from any directory.

Target folder structure

- backend/
	- node_modules/

	<script setup>
	const currentId = ref(1);
	const url = computed(() => `https://pokeapi.co/api/v2/pokemon/${currentId.value}`);
	const { data: currentPokemon } = useFetch(url, {pick: ["name", "sprites"]});

	const nextPokemon = async () => {
	currentId.value++;
	};

	const previousPokemon = async () => {

	<script setup>
	const currentId = ref(1);
	const currentPokemon = ref();

	const fetchPokemonForCurrentId = async () => {
	const pokemon = await $fetch(`https://pokeapi.co/api/v2/pokemon/${currentId.value}`);
	currentPokemon.value = {
	name: pokemon.name,
	imageUrl: pokemon.sprites.front_default,
	};

	import React from "react";
	import useErrorPopover from "./use-error-popover";

	const CustomSelectWithHook = ({ value, name, placeholder, onChange, options, errorMessage }) => {
	const elementRef = useErrorPopover(errorMessage);

	return (
	<select
	style={{ borderBottom: `1px solid ${errorMessage ? "red" : "blue"}` }}
	name={name}

	/* global $ */
	import { useEffect, useRef, useCallback } from "react";

	const useErrorPopover = errorMessage => {
	const elementRef = useRef(null);

	const showPopover = useCallback(
	() => {
	if (errorMessage) {
	$(elementRef.current)

	/* global $ */
	import React, { useEffect, useRef, useCallback } from "react";

	const CustomSelect = ({ value, name, placeholder, onChange, options, errorMessage }) => {
	const elementRef = useRef(null);

	const showPopover = useCallback(
	() => {
	if (errorMessage) {
	$(elementRef.current)