medlem.d sektionen.se

Medlemssidan tillhandahåller tjänster för alla D-sektionens medlemmar:

• Röstningssytemet D-cide för sektionens stormöten.
• Låshantering för sektionsrummen (se Wiki-sidan RumETT).
• Bokning av diverse föremål såsom sektionsbilarna, golvytor och kameror.
  • Själva bokningsprocessen administreras av Werk och inte WebbU själva.
• Verktyg för att skicka ut informationssutskick, som exempelvis sektionens veckomail.

Sidan är byggd med React, Vite och Sass. Bekanta dig gärna med dessa verktyg innan du börjar arbeta på hemsidan.

Utveckling

Förutsättningar

Den enda programvaran som krävs är NodeJS, version 20 eller nyare.

[!TIP] Du kan med fördel använda nvm för att hantera flera versioner av Node samtidigt. För att kolla din nuvarande version, kör node -v.

Snabbstart

Klona repository:t och navigera till katalogen:

git clone https://github.com/d-sektionen/medlem.git
cd medlem

Kopiera .env.example filen till .env.development.

Kör följande kommandon:

npm install
npm run dev

Struktur

Projektet är skrivet i React och använder sig av React Router för routa sidorna. Vite används sedan för att bygga sidan till en statisk app.

Datahämtning

Den största delen av all datahämtning görs via biblioteket SWR. SWR hanterar cachning, automatisk uppdatering och återförsök av misslyckade anrop. Majoriteten av API anropen går till vår egna backend-tjänst.

För anrop där funktionaliten hos SWR inte krävs eller önskas finns dessutom hjälpmetoder runt Axios biblioteket i mappen src/components/request. Dessa används exempelvis för att hämta den nuvarande användaren när appen startar (vilket sker i LayoutContext).

Sidor

Rutterna (samt annan diverse konfiguration) defineras i src/config.js. Denna fil läses av App.jsx för att skapa de faktiska sidorna med hjälp av React Routers komponenter. Dessutom används listan i SideMenu för att automatiskt generera navigeringsmenyn.

UI komponenter

Projektet har ett bibliotek av färdigbyggda och återanvändbara UI komponenter som ska användas varän det är möjligt. Om du skapar någon komponent som skulle kunna vara användbar någon annanstans, extrahera gärna den till sin egen fil i src/components/ui mappen.

Layout

Layout-komponenten som wrappar samtliga sidor är definerad i src/components/layout/layout.js.

Styling

Projektet använder CSS biblioteket Sass för att styla samtliga komponenter via CSS moduler. Dessa är definierade i katalogen src/scss.

Distribuering

Hemsidan är byggd som en statisk webapp (alltså en enkel samling av HTML, CSS och JS filer) och hostad genom Github Pages.

För att bygga en produktionsfärdig version av hemsidan, kör npm run build. Detta kommer att skapa en dist katalog med alla filer som behövs för att hosta hemsidan.

Kör npm run deploy för att bygga och ladda upp projektet direkt till Github Pages. Glöm dock inte att pusha dina ändringar med git!