Nyhetssida byggd med JavaScript, TypeScript, HTML och CSS, med integrerad användning av Firebase för autentisering och databasfunktionalitet.
-
William Bostrom: https://github.com/WilliamBostrom
-
Luay Asadsson: https://github.com/Luayasaadsson
-
Dennis Nilsson: https://github.com/dens0n
-
Simon Klausen: https://github.com/Simon-jmk
-
Besök live-sidan: https://nyhetssida.netlify.app/
-
Agil planering: https://github.com/users/WilliamBostrom/projects/2
Projektet utfördes mellan 17 januari och 15 februari i grupper om 4-5 personer och var obligatoriskt för att bedömas på följande kursmål:
-
Bygga frontend för webbapplikationer med JavaScript utan ramverk/bibliotek (vanilla JS)
-
Implementera spårningskoder, händelsepårning och metadata för externa tjänster
-
Använda TypeScript i frontendapplikationer med JavaScript utan ramverk
Projektet fokuserade på att bygga en frontend för en nyhetssida och tillämpade agila metoder för systemutveckling och grupparbete.
Uppgiften var att utveckla en nyhetssida inspirerad av Omnis nyhetsjänst. Projektet skulle genomföras i flera steg, och målet var att ta fram den första betaversionen av tjänsten.
Bild på Omnis hemsida
Bild på Omnis sida för mobil
- Besök Omnis hemsida: https://www.omni.se/
Den första betaversionen av tjänsten skulle inkludera följande grundläggande funktioner:
-
Användaren ska kunna läsa nyheter som hämtats från ett öppet nyhets-API.
-
Användaren ska kunna sortera nyheter efter datum.
-
Användaren ska kunna filtrera nyheter utifrån något kriterium, exempelvis kategori.
-
Användaren ska kunna markera nyheter som favoriter och spara dem i sin personliga lista.
-
Användaren ska kunna hitta nyheter baserat på sökord som exempelvis datum, författare eller kategori.
Följande punkter var absoluta krav som måste genomsyra och uppfyllas i projektet:
- Responsiv design med mobile-first-metoden.
- Användning av HTML5 och CSS3.
- Inga stora JS-ramverk fick användas, såsom jQuery, React, Angular m.fl.
- Semantisk HTML för grundläggande tillgänglighetsanpassning.
- Användning av Vite som modulbundler.
- Minst en användarinteraktion som kan spåras och analyseras i Google Analytics.
- Projektet skulle till viss del skrivas i TypeScript.
Följande punkter var extra krav som inte var absoluta, men som man skulle sträva efter att implementera:
-
Användaren ska kunna läsa innehåll från flera olika nyhetskällor via öppna API:er.
-
Användarna ska kunna registrera sig och logga in för att spara sina inställningar och favoritnyheter, med användning av Firebase.
-
Användaren ska ha möjlighet till offline läsning av sina nyheter med hjälp av en Service Worker.
Vi har genomfört samtliga obligatoriska krav och bonuskrav i uppgiften för att förbättra användarupplevelsen och tillhandahålla ett mer omfattande tjänsteutbud. För att ytterligare förbättra sidans funktionalitet har vi inkluderat flera extrafunktioner:
-
Lampknapp: För att förbättra användarupplevelsen har vi implementerat en lampknapp på hemsidan. Denna funktion ger användaren möjlighet att välja mellan ljus- och mörkerläge för att anpassa visningsinställningarna efter deras preferenser.
-
Yahoo Finance API integration: Vi har integrerat Yahoo Finance API för att visa OMXS30-börsdata på sidan, vilket ger användarna aktuella och relevanta ekonomiska uppgifter.
-
Namnsdagsfunktion med daglig uppdatering: Vi har inkluderat en omfattande JSON-fil med alla namnsdagar, vilken uppdateras dagligen för att säkerställa korrekt information.
-
Väder-API med geolokalisering: Vi har integrerat en väder-API för att ge användarna aktuell väderinformation för deras aktuella plats med hjälp av geolokaliseringsteknik.
-
Klocka och datum: För att ytterligare förbättra användarupplevelsen har vi inkluderat en klocka och datumfunktion på sidan, vilket ger användarna snabb och enkel tillgång till aktuellt tid och datum.
Dessa extrafunktioner bidrar till en mer omfattande och engagerande användarupplevelse på sidan.
Bild på vårt slutresultat för dator
Bild på vårt slutresultat för mobil
För att köra detta projekt lokalt, följ stegen nedan:
- Klona detta repository till din lokala maskin:
git clone https://github.com/WilliamBostrom/Nyhetsida.git- Gå in i den klonade mappen::
cd ditt-repo
3.Installera projektets beroenden:
npm install
4.Öppna sidan:
npm run dev