Skip to content

Zipelas/react-project

Repository files navigation

❤ Mental Hälsa

En responsiv webbaserad applikation byggd med React, Tailwind CSS, React Router, Vite, Lucide React och TypeScript.
Syftet med appen är att ge information om mental hälsa samt erbjuda en interaktiv MoodTracker och en akutknapp som förändrar sidans utseende för att markera en akut situation. Dessutom innehåller sidan "Bilder" bilder som är hämtat med Pexels API.

Funktioner

Interaktiva funktioner med useState

  1. MoodTracker

    • En komponent med 5 smileys som representerar olika humör.
    • När användaren trycker på en smiley visas en text, t.ex. "Du känner dig: Glad idag."
  2. Akutknapp

    • En röd knapp i navbaren som, när aktiverad, ändrar header och navbar till röd färg.
    • Skapar en känsla av nödsituation och sidan innehåller text + länk till 1177.

Navigering och sidor

Länkar i navbaren:

  • 🏠 Hem → Tar dig till startsidan.
  • 💙 Depression, Ångest, Stress och Utmattning → Informativa sidor om mental hälsa med text och länk till 1177.
  • 🖼️ Bilder → En sida som visar 5 bilder hämtat mes Pexels API.

Live-version av appen:
🔗 Mental Hälsa App


Projektkrav

  • ✅ Projektet innehåller minst 6 komponenter, varav minst 2 statefulla komponenter.
  • ✅ React Router används för att hantera navigering.
  • ✅ Git & GitHub har använts för versionshantering.
  • ✅ README.md-filen är inkluderad.
  • ✅ Uppgiften har lämnats in i tid.
  • ✅ Muntlig presentation är genomförd.

image


Hur du bygger och kör projektet

1. Klona projektet

git clone https://github.com/Zipelas/mental-halsa.git
cd mental-halsa

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published