PROJEKT

Society Icon var ett företag som hade en egenutvecklad plattform där man kopplade ihop bolag så som H&M med stora och små influencer-konton på sociala medier. I appen kunde företag lägga upp kampanjer som var aktuella för tillfället, och användarna kunde ansöka om att bli en del av den. Ersättningen baserades på personens möjlighet att sprida kampanjen.

Under min praktikperiod på företaget Society Icon så tog jag över frontenden-delen för deras adminportal, en custom CMS byggt i React där företag kan registrera varumärken, skapa kampanjer, välja ut ikoner till kampanjer, m.m. När jag började på praktiken var det en buggig frontend-sida som ingen rört på drygt två års tid, utvecklat av ett ad hoc team från Indien med mycket felaktig kod.

I projektet har jag och en till praktikant som enda frontendare på företaget projektlett, estimerat och planerat sprints, där fokus har varit att refaktorisera kod, och byta ut komponenter som varit för gamla eller direkt felaktiga. Det fanns många lik i garderoben i koden som vi städade bort. Till exempel bytte vi ut onödig jQuery-kod, skrev om buggiga komponenter, bröt upp långa komponenter, uppgraderade Node, och lade in React Context för att öka optimering. Vi var också UX-orienterade i detta projekt där vi gjorde designändringar i formulär, sidomenyer och på knappar enligt UX/UI och tillgänglighetstänk, så att sidan i framtiden även skulle kunna användas på mobil/tablet. Vi förberedde även för möjligheten att göra enhetstester och större Cypress-tester.

När jag började på företaget så ringde företag in till Society Icon för att få hjälp med att manövrera plattformen, som var buggig och svårnavigerad. Målet var att göra en hemsida som faktiskt skulle kunna användas av företagen själva, utan att behöva ringa in och få hjälp.

Vill du veta mer? Society Icon gick i konkurs i mars 2023, så projektet är inte längre tillgängligt på webben. Hör av dig så kan jag berätta mer i detalj vad vi gjorde under vår praktikperiod.

En responsiv kampanjsida med seo-perspektiv och interaktiva grafer, byggd i NEXT.js.

Greenpeace ville ha en hemsida som hanterar statistik från SCB och som ska ge en tydligare bild av biobränsle. Det skulle vara sökbart, interaktivt, och enkelt att ta till sig. Utöver frontend-programmering så illustrerade jag även några illustrationer och tog iniativ för UX och UI, bland annat färgval men även i funktionalitet.

Klicka för att se hur hemsidan såg ut!

Vi jobbade med verktyget GraphJS för att skapa interaktiva grafer för användaren, totalt tre stycken. Datan hämtade vi från bl.a. SCB, och lagrade på vår egen databas i Firebase.

Vi byggde även en funktion där användaren kan välja ett år och se datan för det specifika året. Datan uppdateras automatiskt när Naturvårdsverket uppdaterar.

Vi skapade ett eget CMS-system för Greenpeace, en enkel admin-sida, där de kunde gå in och ändra i länkar, bildtexter och texter samt avpublicera/publicera hela sektioner. Vi använde oss av en NoSQL-databas (Firebase) för att snabbt och smidigt kunna publicera/avpublicera och/eller ändra brödtext och statistik.

Studentarbete: Test Driven Development i React-miljö

Vi skulle bygga en enkel hemsida som skulle visa publicerade kurser, och en admin portal för administratörer på skolan där man kunde logga in och editera (ändra, lägga till) kurser och lärare. Det skulle också gå att knyta ihop lärare och kurser, samt att visa om en kurs var publicerad utifrån att det var tillräckligt många studenter tillagda. Jag byggde även en portal, utöver uppgiften, för studenterna så de kunde anmäla sig till kurser, ändra email eller namn och använda sig av enkel pomofocus-timer på deras profilsida. Allt detta byggdes med TDD i åtanke, där jag från början jobbade med test miljöer i localserver och json server, för att sedan migrera projektet till Netlify och Firebase.Skoluppgiften gick ut på att skriva testdrivet, här har jag jobbat med unit-testing och viss interaction testing med hjälp av Jest.

Jag har vidare jobbat med styled components, och testat olika filstrukturer. Vidare har jag experimenterat med dark mode/ light mode och tillgänglighet.

Jag använde mig av Firebase för att administrera admin-logins, och för att ha en database till studenterna, kurserna och lärare. Här var jag tvungen att läsa på om Firebase funktionalitet. Jag har även valt att hosta hos Netlify, och utforskat möjligheter med att upprätta server.

Sidan är fortfarande under uppbyggnad och kan ha vissa buggar.

En studie i hur jag konverterar en existerande webbplats till en app. I det här projektet använde jag mig av Expo, en plattform som använder sig av React Native, med målet att göra en app som är kompatibel för både iOS och Android. Jag utgick från hemsidan barnrattspelsspelet.se där målet var att göra korten i mobilformat.

Vidare jobbade jag med Android Studio för att emulera mobil på dator, Google Play Console, och av React Native Webview som ett sätt att konvertera existerande React-projekt till en app. Vidare i projektet gjorde jag anpassningar i UI och UX så det blev mer mobilanpassat, genom att införa splashscreens, statusbar, ripple effects, och en skissartad swipe-funktionalitet.

I mitt arbete har jag jobbat med två frågor. 1. Hur skapar jag en app? 2. Hur konverterar jag en del av, eller en hel, webbplats till en app? Den andra frågan är viktig, då jag redan har en existerande kodbas och för att i kravet från beställaren så finns det en önskan om att inte ha fler kodbaser än nödvändigt. På grund av resurser så har man helt enkelt inte råd med att både ha en frontendare och en apputvecklare, och att ha olika kodbaser som måste uppdateras när en förändring sker. Därför behövs en lösning som konverterar existerande kod till en app.

Vidare var det också krav på att kodbasen ska passa för både iOS och Android, alltså kodas crossplatform och inte var och en för sig, av samma anledning som punkt ett. Det är också viktigt att det i nuläget inte ska gå att navigera bort till startsidan eller spelet, då det inte finns stöd för det, då det inte kommer vara mobilanpassat, utan appen ska bara innehålla collection-viewer.

Klicka för att se inspelning av mobilapp!

Min metod har varit undersökande, med fokus på att testa saker och att felsöka när jag stöter på problem. Jag har jobbat i sprints, med en vecka i taget.Jag har dokumenterat hela processen i min rapport, så noggrant som möjligt, för att motivera några val och förklara resonemangen bakom. Jag har utgått från tutorials och dokumentation på olika ramverks hemsidor. Det har inte direkt varit en linjär process utan det har snarare varit sidospår, och ibland har det varit svårt att tidsestimera eller planera då saker kunnat ta oförutsett mycket eller lite tid. Det har också skett att jag lagt ner mycket tid på att försöka lösa ett problem, för att sedan byta inriktning helt, eller lämna den huvudvärken till ett senare skede.