Table of Contents

• Overview
• Tech Stack
• Project Structure
• Features & Functionalities
• Frontend Routes
• API Endpoints
• Environment Variables
• How to Run the Project
• Component Guide & Reuse
• Keywords
• Conclusion
• License

Overview

Sernitas Care is a bilingual (German/English) marketing and operations site for a home nursing care provider. Visitors can browse services (Grundpflege, Behandlungspflege, etc.), read blog and guide content, submit job applications (Pflege and Karriere), request callbacks, and contact the team. Admins log in to view, update status, and delete applications; all form submissions trigger email notifications via SMTP (e.g. Gmail).

The app is split into:

• Frontend: React 18 + Vite, React Router, React Query (TanStack Query), React Hook Form + Zod, Tailwind CSS, Framer Motion. Optional PWA (service worker) for caching.
• Backend: Node.js + Express, Prisma (MongoDB), Nodemailer for emails, bcrypt for admin password verification.

Tech Stack

Project Structure

sernitas-care/
├── index.html                 # HTML entry; SEO meta, favicon
├── package.json               # Dependencies and scripts
├── vite.config.js             # Vite config (React plugin, build output)
├── tailwind.config.js         # Tailwind theme (primary/secondary, fonts)
├── postcss.config.js          # PostCSS for Tailwind
├── eslint.config.js           # ESLint config
├── Dockerfile                 # Backend Docker image (multi-stage)
├── netlify.toml               # Netlify redirects/build (if used)
├── hashPassword.js            # Utility to generate ADMIN_PASSWORD_HASH
│
├── prisma/
│   └── schema.prisma          # MongoDB schema (Application model)
│
├── server.js                  # Express app entry; CORS, routes, /health
├── server/
│   ├── applicationRoutes.js   # /api/admin/login, /api/applications CRUD
│   └── emailRoutes.js         # /api/send-email, send-application-notification, etc.
│
├── public/
│   └── service-worker.js      # PWA: pre-cache static assets
│
└── src/
    ├── main.jsx               # React root; Router, QueryClient, ScrollToTop, SW
    ├── App.jsx                # Routes, ErrorBoundary, Navbar, Footer (conditional)
    ├── index.css              # Global + Tailwind
    ├── reactQueryClient.js    # React Query default options (staleTime, retry, etc.)
    ├── utility/
    │   └── animation.js       # Framer Motion variants (slideUp, slideBottom)
    │
    ├── components/
    │   ├── Navbar.jsx         # Desktop/mobile nav, dropdowns, search
    │   ├── Footer.jsx         # Logo, links, social; uses PartnersSection, AffiliatesSection
    │   ├── ScrollToTop.jsx    # Scroll to top on route change
    │   ├── SideHoverIcons.jsx # Fixed right strip: phone, email, contact, social
    │   ├── Loading.jsx        # Full-screen spinner
    │   ├── PageNotFound.jsx   # 404 page
    │   ├── CachedImage.jsx    # img + Cache API for PWA
    │   ├── usePersistedQuery.js # React Query + localStorage (e.g. admin applications)
    │   │
    │   ├── ui/                # Reusable form primitives
    │   │   ├── button.jsx     # Variants: default, primary, outline; sizes
    │   │   ├── input.jsx      # Styled input (ref forwarded)
    │   │   └── textarea.jsx   # Styled textarea (ref forwarded)
    │   │
    │   ├── HomePage/          # Hero, CallbackRequest, Welcome, Testimonial, Cards, Map, Review, Steps, HomeConsultation, Accordion
    │   ├── Cards/             # Cards.jsx (service grid), CardModal.jsx, cardData.js
    │   ├── Accordion/         # AccordionSection.jsx, SingleAccordion.jsx, data.js (FAQ)
    │   ├── TestimonialSection/
    │   ├── ReviewSection/
    │   ├── Contact/           # Contact.jsx (form → POST /api/send-email)
    │   ├── ApplicationForm/  # Pflege application form → POST /api/applications + notification
    │   ├── Admin/             # Admin.jsx, AdminLogin.jsx, AdminDashboard.jsx, ApplicantDetails.jsx, PaginationSelection.jsx
    │   ├── ServicesPage/      # Tabbed layout + Grundpflege, Behandlungspflege, Verhinderungspflege, BetreuungEntlastung, Rufbereitschaft
    │   ├── AboutUs/           # Tabbed layout + WirSindSernitas, Team, Leitbild, Kooperationsnetzwerk, MitgliedschaftBAP
    │   ├── WissenswertesPage/ # Tabbed: FAQ, Aktuelles, PflegeBlog, PflegeRatgeber, Downloads; BlogPage, RatgeberPage; blogData.js, ratgeberData.js
    │   ├── Karriere/          # KarrierePage.jsx, BewerbenPage.jsx (job form → POST /api/send-job-application)
    │   ├── Footer/            # PartnersSection.jsx, AffiliatesSection.jsx
    │   ├── Imprint/
    │   ├── PrivacyPolicy/
    │   ├── GeneralTerms/
    │   └── Magazine/
    │
    └── assets/                # Images, icons (SVG), etc.

Features & Functionalities

• Homepage: Hero (video + CTAs), callback request form, welcome block, testimonials, service cards (modal with HTML content), map section, review section, steps, home consultation form, FAQ accordion.
• Services: Tabbed pages for Grundpflege, Behandlungspflege, Verhinderungspflege, Betreuung & Entlastung, 24h Rufbereitschaft.
• About Us: Wir sind Sernitas, Team, Leitbild, Kooperationsnetzwerk, Mitgliedschaft BAP.
• Wissenswertes: FAQ (accordion), Aktuelles (news), Pflege-Blog (list + detail with comment form), Pflege-Ratgeber (list + detail), Downloads (links).
• Karriere: Job listings and Bewerben (job application form → email).
• Application Form (Pflege): Long form with Zod validation; submits to backend (DB + notification email).
• Contact: Form → POST /api/send-email.
• Admin: Login (email + password, bcrypt); dashboard with application list, pagination, status update, delete, detail modal.
• Legal: Imprint, Privacy Policy, General Terms (each with own Navbar/Footer for full-page layout).
• PWA: Service worker caches static assets; CachedImage adds images to Cache API.
• UX: ScrollToTop on route change, ErrorBoundary, responsive Navbar (dropdowns + mobile menu + search).

Frontend Routes