Detta projekt är en webbsida byggd med React, där vi använder Context API, Formik och Yup för att hantera data, formulärvalidering och API-anrop. Projektet innehåller flera komponenter, exempelvis för kontaktformulär, FAQ-sektion och en dynamisk kartkomponent.
Projektet är strukturerat enligt följande mapphierarki:
- Views: Huvudsidor som
Home,Features, ochContact. - Sections: Sektioner uppdelade baserat på respektive routes, som
contact heroochcontact map. - Components: Återanvändbara komponenter som
DarkModeSwitchochHamburgerMenu. - Contexts: Innehåller
LocationContext, för att hantera användarens platsdata. - Assets: Statisk media, som bilder och ikoner.
Contact-sektionen innehåller komponenten SubscribeForm, där vi använder Formik och Yup för att skapa och validera formulärfält. Formuläret använder API-anrop för att spara data och visa bekräftelse.
FAQ-sektionen är en Accordion-komponent där vi asynkront hämtar data från ett API. toggleAccordion hanterar öppning och stängning av frågor, och varje fråga visas med en inbyggd error-hantering.
I Reviews-sektionen används useState och fetch för att hämta och visa recensioner. Vi returnerar ReviewBox-komponenten med information om recensionstext, rating och användardata.
ContactMap använder LocationContext för att hantera och visa kartposition med Google Maps. handleAddressClick och resetAddressBack hanterar visning och återställning av kartpositioner.
Navbar-komponenten visas alltid, oavsett route, och innehåller navigeringslänkar samt DarkModeSwitch och HamburgerMenu för en responsiv upplevelse. HiddenMenu visas när isMenuOpen är true och döljs genom useRef och eventListener för mus- och tangentbordsinteraktion.
I projektet använder vi Context API för att hantera global state, exempelvis för användarens platsdata i LocationContext. Detta tillåter oss att dela information mellan komponenter utan att props måste skickas igenom flera nivåer.
Vi använder Formik för formulärhantering och Yup för validering. Varje formulärfält valideras automatiskt på onBlur och onSubmit, och valideringsschemat är dynamiskt och kan anpassas efter behov.