Som en användare vill jag lätt kunna navigera, även från botten av webbsidan samt hitta information och kontaktinformation om GlobalForm Solution för att underlätta och sammarbeta med företaget.

Som en utvecklare vill jag ha en databas för att lagra och hantera data i samband med webbsidan, för att möjliggöra datatillgänglighet och -hantering.

Acceptanskriterium:

1. Det ska vara möjligt att etablera och testa anslutningen mellan kodbasen och den skapade databasen för att säkerställa korrekt funktionalitet.

Som en marknadsföringsansvarig, vill jag skapa en enhetlig och professionell grafisk profil för vårt företag så att vi kan kommunicera vårt varumärke på ett konsekvent sätt.

Acceptanskriterium:

1. Vi ska ha ett gemensamt samtycke om att logotyp och andra grafiska element ser bra ut och är redo för att användas i mockup.
2. Ett färgtema med 3 färger ( 1 neutral färg ) ska vara gemensamt godkännt.

EXAMPLE:

Som en frontend utvecklare vill jag kunna sen en tydlig design på hur man tar sig till "form-data" sidan för att lätt kunna koda och följa en färdig mall.

Som en användare skall jag kunna se detaljerad information om ett specifikt formulär.

Acceptanskriterier:
Skall visa tydligt vilket formulär man är inne på
Skall kunna se en lista över alla svar som skickats
Skall kunna enkelt leta upp en specifik slutkunds svar

En användare skall kunna ta sig till "about us" länkarna för att få information

Acceptanskriterier:
Länk skall led till /xxxxxxx
Sidorna skall vara responsiva

Ska lägga till ett script för prettier så att man kan köra det i github actions, workflow.

En användare skall kunna lägga till en text till sitt formulär.

Acceptanskriterier:
Användare skall kunna skriva en valfri text som visas i preview
Det skall vara en textare som input
Det skall skapas ett block när "add block" klickas

Som en användare ska det funka att se hero'n korrekt på alla enheter.

Acceptanskriteria:
Responsiv på alla enheter.

En användare skall se på sin browsertab vilken sidan man är på

Acceptanskriterier:
Sidans namn skall synas i tabben

Som en användare vill jag lätt kunna navigera mellan olika sidor och klicka sig runt för att skapa ett formulär samt lätt kunna hitta svarsinformationen från sina formulär användare.

Som en användare vill jag kunna byta från sido menyn till preview sidan med en knapp för att kunna se hur jag bygger formuläret.

Acceptanskriteria:

• Det ska finnas en tydlig knapp och det ska funka att byta mellan meny och preview.

Som en användare vill jag kunna se en bra beskrivning på projektet och även veta hur jag själv kan installera och testa det.

Acceptanskriteria:
README.md filen ska finnas.

User Stories:

Dela upp startpage i olika komponenter:
Som en utvecklare vill jag kunna se en lista över de olika komponenterna som ska skapas på sidan så att det blir smidigare när man sätter igång och kodar.

User stories för fler sidor tillkommer när vi har planerat upp vilka sidor vi ska ha.

Som en användare skall jag kunna se en slutgiltig design på mitt formulär innan jag skapar det.

Acceptanskriterier:
Alla "required" fält skall vara med
Den skall vara responsiv ner till mobil

Som en utvecklare vill jag kunna skapa och organisera en logisk mappstruktur för kodbasen för att underlätta navigation och hantering av projektets filer och moduler.

Acceptanskriterium:

1. Utvecklaren bör kunna definiera och skapa övergripande kategorier (t.ex., "Controllers", "Models", "Views") inom kodbasens mappstruktur.
2. Det ska vara möjligt att snabbt navigera mellan olika filer och moduler genom att följa mappstrukturen.

En användare skall få felmeddelande om något inte fungerar på sidan

Acceptanskriterier:
Visa ett tydligt meddelande om något inte fungerar på sidan

Som en frontend utvecklare vill jag ha möjlighet att komma åt form objectet i ett state över hela frontend kodbasen.

Acceptanskriteria:

• context med form object state ska finnas.

Som en användare skall jag kunna använda applikationen på ett säkert sätt.

Acceptanskriterier:
SSL skall fungera på hela applikationen

En använadere skall kunna skapa ett textinput block med add block knappen

Acceptanskriterier:
Skall skapa ett state
skall renderas ut i create menyn

Som en användare ska jag kunna se ett utkast av olika block som läggs till. De ska finnas knappar för att ta bort och flytta objekten för framtiden samt att de ska stämma överens med blocken som har lagts till för att du lätt ska kunna se vad du har lagt till i formuläret samt för framtida redigering av blocken.

Acceptanskriteria:
Det ska gå att lägga till ett block och se att det är tillagt med korrekt styling och struktur enligt figma.
Required fält måste fyllas i och synas

This is done because we need to use App router instead of pages for this project.

En användare skall kunna skriva en text och det skall visas på Preview sidan.

acceptanskriterier:
Ett inputfält för att skriva in text
En knapp för att submit

En användare skall kunna hitta vår sida via en sökmotor

Acceptanskriterier:
H-taggar är korrekt implementerade
Alt taggar på relevanta element

Som en användare vill jag lätt kunna navigera mig inne på "create-form" sidan för att lätt kunna lägga till olika inputs som man vill ha i sitt formulär.

Acceptanskriteria:

• Sidomenyn för att bygga formuläret ska bli 100% width på mobil.
• Det ska gå lätt att byta mellan objekt och att lägga till objekt i menyn.

Som användare vill jag direkt kunna se och förstå vad hemsidan handlar om, vad den är till för, och vad jag kan göra på den.

bygg upp landing page med html och css.

Som en användare vill jag ha en egen dashboard där jag kan lägga till ett nytt formulär och för att få en överblick över formulär.

acceptanskriterier:
Det ska gå att navigera till sidan och klicka på "skapa formulär" för att ta sig till "formulär bygg" sidan.

Som en användare ska jag blir imponerad och vilja stanna kvar på sidan de första 5 sekunderna.

acceptanskriteria:

• fin bild eller fixa till knapp.
• 5 seconds rule

Npm t3 och lägg till app pages routing.

Som en användare ska man kunna se de obligatoriska objekten som ska fyllas i till formuläret samt se de andra objekten som man lagt till för att lätt kunna flytta och ta bort input objekt i formuläret.

Acceptanskriteria:

• Man ska kunna se de obligatoriska fälten.
• Det ska finnas en soptunna för att senare kunna göra funktionalitet för att ta bort ett input objekt.

Som en användare vill jag se en tydlig sido meny med nya form objekt för att senare kunna lägga till och se det i formuläret.

Acceptanskriteria:

• html och css ska följa figma skissen och vara tydlig.

Som användare vill jag kunna logga in säkert med Clerk för att skapa och hantera formulär.

Acceptanskriterier:
När jag besöker Global Form Solution, ska jag se ett alternativ att logga in.
Jag bör kunna logga in med hjälp av min e-postadress eller andvändar konto, som stöds av Clerk.
Efter framgångsrik inloggning ska jag få en bekräftelse och omdirigeras till dashboard.

Jag bör enkelt kunna logga ut från min session genom ett utloggningsalternativ.
Efter utloggning bör jag omdirigeras till startsidan och inte ha åtkomst till dashboard utan att logga in igen

Relatade to Epic #1

Som en användare vill jag se en snygg pålitlig design och att informationen visas i rätt bredd med hjälp av en container för att kunna anpassa innehållet på stora skärmar.

Acceptanskriterium:

1. Innehållet ska max växa till en viss gräns så att det inte smetas ut på en "widescreen".

Sätta upp utvecklingsmiljö för ett webbprojekt med Next.js, Prisma, MongoDB Atlas, Sass och React Icons

Som en webbutvecklare vill jag: konfigurera och integrera en teknikstack som inkluderar Next.js, Prisma, MongoDB Atlas, Sass och React Icons så att jag kan utveckla en modern, skalbar och effektiv webbapplikation som utnyttjar fördelarna med varje teknik.

Acceptanskriterier:

Next.js Konfiguration:

1. Projektet initieras med Next.js som grund.
   Basroutning och sidstruktur konfigureras enligt projektets behov.
   Optimering av Next.js för prestanda och SEO är genomförd.

2. Prisma Integration:
   Prisma är installerat och konfigurerat för att fungera med projektets databas.
   En tydlig modellstruktur för databasen är skapad med Prisma Schema Language.
   Databasen är ansluten och testad för CRUD-operationer via Prisma.

3. MongoDB Atlas Setup:
   En databas är skapad och konfigurerad i MongoDB Atlas.
   Säkerhetsinställningar och nätverksåtkomst är korrekt inställda.
   Databasen är ansluten till Prisma för att hantera data.

4. Sass Integration:
   Sass är integrerat i Next.js-projektet.
   Globala stilar och variabler är inställda för att främja konsekvent design och enkel underhåll.
   Komponent-specifika Sass-filer är organiserade och används för att stila komponenter.

5. React Icons Användning:
   React Icons-biblioteket är integrerat i projektet.
   Ikonerna används konsekvent och effektivt i UI-komponenter.
   Anpassning av ikonstorlek och färg är möjlig och implementerad där det behövs.

Skapa en smidig och användarvänlig navigering mellan hemsidans olika sidor för en sömlös användarupplevelse.

User Stories:

Implementera Huvudmeny:
Som en front-end-utvecklare vill jag implementera en huvudmeny som tydligt visar alla tillgängliga sidor och deras hierarki.

Sidlänkar och Knappar:
Som en användare vill jag ha tydliga länkar och knappar på varje sida för att enkelt kunna navigera till andra relevanta delar av plattformen.

Responsiv Navigering:
Som en användare vill jag ha en responsiv navigering som anpassar sig till olika enheter och skärmstorlekar för en enhetlig användarupplevelse.

Animerad eller Visuell Feedback:
Som en användare vill jag ha visuell feedback, såsom animationer eller färgförändringar, när jag navigerar mellan sidor för att bekräfta mina åtgärder.

En användare skall kunna hitta svar om dom vanligaste frågorna berörande vår app.

Acceptanskriterier:
Enkelt att navigera kring frågorna.
Om ej fråga finns skall kontakt lätt kunna skapas för användare mot företaget.

Som en utvecklare vill jag kunna skapa detaljerade mockups för webbsidan för att underlätta frontend-kodningen och visualisera slutresultatet.

Acceptanskriterium:

1. Systemet bör tillhandahålla korrekta färger, typsnitt och andra stilattribut enligt den grafiska profilen.

Som en utvecklare ska jag kunna se på ett ungefär hur projektets slutdesign ska se ut.

Acceptanskriterium:

1. Användaren bör kunna se en lista över alla wireframes i projektet och snabbt navigera till en specifik wireframe.

komponenter som kan renderas ut i formuläret:

Text - Prio
Text Area
Text Input - Prio
Number input
Phone input
Email input
Date input
Url input
Dropdown Select
Radiobutton
Checkbox

Användardatan i databasen ska vara kopplad till den som erhålls av Clerk

Acceptanskriterier:

När en användare skapas, uppdateras eller tas bort i Clerks interface så ska detta synkroniseras med användaruppgifter i vår databas