sillen00 / globalform-solutions Goto Github PK
View Code? Open in Web Editor NEWAllows users to create forms and share them with friends / create events.
Home Page: https://global-form-solutions.vercel.app
Allows users to create forms and share them with friends / create events.
Home Page: https://global-form-solutions.vercel.app
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:
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.
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.
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.
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.
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.
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
Som en frontend utvecklare vill jag ha möjlighet att komma åt form objectet i ett state över hela frontend kodbasen.
Acceptanskriteria:
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 ska jag blir imponerad och vilja stanna kvar på sidan de första 5 sekunderna.
acceptanskriteria:
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:
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:
Npm t3 och lägg till app pages routing.
Som en utvecklare vill jag kunna skapa detaljerade mockups för webbsidan för att underlätta frontend-kodningen och visualisera slutresultatet.
Acceptanskriterium:
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
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.
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
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 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
Som en användare ska det funka att se hero'n korrekt på alla enheter.
Acceptanskriteria:
Responsiv på alla enheter.
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:
Relatade to Epic #1
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
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:
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.
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 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 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:
EXAMPLE:
En användare skall kunna hitta vår sida via en sökmotor
Acceptanskriterier:
H-taggar är korrekt implementerade
Alt taggar på relevanta element
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
Ska lägga till ett script för prettier så att man kan köra det i github actions, workflow.
Som en utvecklare ska jag kunna se på ett ungefär hur projektets slutdesign ska se ut.
Acceptanskriterium:
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 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
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 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:
This is done because we need to use App router instead of pages for this project.
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ä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
En använadere skall kunna skapa ett textinput block med add block knappen
Acceptanskriterier:
Skall skapa ett state
skall renderas ut i create menyn
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
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 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:
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.
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.