Projekt – Vue.js simple blog!

Vad ska vi göra? En simpel SPA (Single Page Application) blogg med hjälp av Vue.js, local storage och Bootstrap. Vi ska kunna skapa inlägg, redigera dessa samt visa ut dem på något sätt 🙂  

Godkänt: En fungerande frontend som kan spara inlägg i (minst) 3 olika kategorier samt kunna visa ut dessa. Vi ska med hjälp av Vue Router kunna bestämma vad som ska visas på våra 2 olika “vyer”. Bootstrap-vue och Vue Router ska ligga med som dependencies i vårat projekt.

Väl Godkänt: Utöver godkänt så ska det också finnas en inloggningsfunktion. Självklart ska posts som skapats av en användare kopplas till den användaren.

Poängsättning

Godkänt

• En korrekt installation av Vue.js med hjälp av vue/cli – 2 poäng
• Korrekt installerade ”dependencies” (Vue Router, Firebase osv.) – 2 poäng
• Korrekt lagring av våra ”posts” – 2 poäng
• Sparar ”posts” i localstorage – 2 poäng
  Hämtar ”posts” från localstorage – 2 poäng
• Korrekta ”paths” i Vue Router – 2 poäng
• Korrekt importerade views (.vue) – 2 poäng
• En vy som visar ut ”posts” i något slags grid/kolumn system – 3 poäng
• Använder bootstrap-vue/Bulma med korrekt syntax – 2 poäng
• Bonus: Kan redigera ”posts” – 4 poäng
• Bonus: Kan gå in på EN post! – 2 poäng

Väl Godkänt

• Korrekt koppling till Firebase – 3 poäng
• Kan spara användare – 2 poäng
• Användare kan logga in – 4 poäng
• ”Posts” kopplas till en användare med hjälp av ett unikt ID, t.ex. userName: ’some name’ – 2 poäng
• ”Posts” visas bara ut för den inloggade användaren – 4 poäng

Poäng totalt: 40
För Godkänt krävs det 18 poäng, det går att komplettera med VG uppgifter.
För VG krävs det 25 poäng.

Vår första vy ska vara våran “Home.vue” och innehålla följande:

• En titel.
• En responsiv layout byggd med Bootstrap, där våra inlägg visas ut.

Vår “AddPosts.vue” vy ska innehålla följande: 

• En rubrik som talar om vilken vy vi är på. 
• Ett inputfält för titel.
• Ett inputfält för innehållet.
• Tre st. checkboxes med tre olika kategorier.

Allmän layout

• En header med länkar till våra “views”

if (VG)

• Bygg en LoginForm.vue och en CreateUser.vue, dessa ska också lagra “currentUser” i Local Storage. Så att vi kan (om vi vill) visa posts som en användare har skapat.
• En metod för att kolla vilken användare som är inloggad, den måste också lägga till användarens “id” på varje post (kan vara användarnamn också).

Glöm inte:

Att skapa korrekta routes!

Inlämning

Inlämning sker på Zenit/PingPong. När du skickar in, så ska allting .zipas/komprimeras FÖRUTOM mappen node_modules. På Zenit hittar du uppladdningen på aktiviteten JavaScript -> Inlämningsuppgift 2 🙂
Filen ska heta ”dittFörNamn-dittEfterNamn.zip”!