tomhaakon / hovedoppgave-fakestore

hovedoppgave-fakestore

opggaveark

Librarys used

• Tailwind

• DaisyUI

• PiniaStore

• Vue Router

• yup

• api: fakestoreapi.com

  • all users fetch('https://fakestoreapi.com/users').then(res=>res.json()).then(json=>console.log(json))

  • single user fetch('https://fakestoreapi.com/users/1').then(res=>res.json()).then(json=>console.log(json))

  • get all categories fetch('https://fakestoreapi.com/productscategories').then(res=>res.json()).then(json=>console.log(json))

  • get single category fetch('https://fakestoreapi.com/productscategory/jewelery').then(res=>res.json()).then(json=>console.log(json))

  • get all products fetch('https://fakestoreapi.com/products').then(res=>res.json()).then(json=>console.log(json))

  • get single product fetch('https://fakestoreapi.com/products/1').then(res=>res.json()).then(json=>console.log(json))

• MOBILE FIRST

[globalt]

• navbar for desktop og mobil(sidebar) med logo med hjemlink
• footer
• 404 side
• 500 errors..

HomeView.vue - Hjemmeside

• vis frem 3 nyeste produkter med dialog klikk

ProductView.vue - Produktside

• kjøp via axios post / try catch
  • vis frem som kort, 3 eller 4. pagnation. på mobil vis 1 kort
  • vis frem som kort

MyPageView.vue - Min side

• 2 visninger

  • en side for om man har kjøpt noe

    • tabell med GET query
    • sortering
    • søke, slette.
    • kjøpe slett via bekreft dialog w

  • en side for om man ikke har kjøpt noe

AboutView.vue - Om side

Dialog.vue - Dialog komponent

• produkt info
• refs props / pinia

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build