Tech-stack:

Libraries:

• React.js - React har den fordel i forhold til vanilla js at det er komponentbaseret. Det vil sige at man kan skrive et stykke kode en gang men bruge det flere steder. Der ud over er der også states som gør det muligt at gemme data og bruge det på tværs af komponenter. En anden fordel er at når data bliver opdateret er det kun de komponenter hvor det bliver brugt i stedet for hele DOM'en, hvilket er en fordel i forhold til performence.
• Framer-Motion - Framer-Motion gør det nemmere og hurtigere at lave animationer sammenlignet med at lave dem vanilla. Af den grund valgte jeg at bruge det selvom der kun er en lille animation i hele projektet. Dog kan det være et problem i forhold til performence at installere et helt library for en lille ting. Jeg blev dog enig med mig selv om at det var det hver af de grunde jeg nævnte tidligere. Derudover bliver det også mere skaler bart da det ville være nemt at tilføje flere animationer i fremtiden.

Frameworks:

• Tailwind CSS - Tailwind gør det muligt at style uden at have stylesheets i projektet, da det stiller en masse utillity classes til rådighed. Der ud over er det nemt at tilpasse enten ved at tilføje sine egne styles i config-filen hvis det er noget man skal bruge mange gange, eller med square-brackets hvis det er noget man bare skal bruge nogle få gange.

Npm-pakker:

• Axios - Jeg synes syntaksen er nemmere i forhold til fetch-API'et, da data automatisk convateres til json.
• react-hook-form
• Yup
• React-router

Versionsstyring:

• Github

Deploy process:

• Netlify - Continuous Deployment Link

Kode til særlig bedømmelse:

Jeg vil i min præsentation kommer nærmere ind på dette stykke kode.

        axios.post('http://localhost:4000/auth/token', {
            username: username,
            password: password
        }).then(response => {
            setLoggedInState(true)
            setToken(response.data)
            navigate('/aktiviter', 500)
        })
    }