4.5 KiB

Raw Blame History

Florale Emotion - Website & Backend

Die komplette technische Umsetzung der Florale Emotion Website mit Backend-Services.

🌸 Überblick

Diese Website ist ein komplettes Business-Setup für ein Blumengeschäft spezialisiert auf Hochzeiten, Beerdigungen und Events.

🚀 Features

Website (Angular + Tailwind CSS)

✅ Responsive Design für alle Geräte
✅ Portfolio-Galerie mit Filterung
✅ Kontaktformular mit Event-Details
✅ SEO-optimiert mit strukturierten Daten
✅ Logo-Integration mit passender Typografie

Backend & Integration (Node.js)

✅ E-Mail-System mit Templates
✅ Automatische Ticket-Erstellung in Gitea
✅ Kundenbenachrichtigungen
✅ Team-Benachrichtigungen

✅ Multi-Platform Bot (Instagram, Facebook, TikTok, Mastodon, YouTube)
✅ Automatische Posts nach Zeitplan
✅ Content-Templates für verschiedene Anlässe

📁 Projektstruktur

website/
├── src/                          # Angular Frontend
│   ├── app/
│   │   ├── components/          # Wiederverwendbare Komponenten
│   │   ├── pages/               # Seiten-Komponenten
│   │   └── services/            # Angular Services
│   ├── assets/                  # Statische Assets (Logo, etc.)
│   └── styles.scss             # Globale Styles
├── backend/                     # Node.js Backend
│   ├── server.js               # Express Server
│   └── package.json            # Backend Dependencies
├── social-media-bot/           # Social Media Automatisierung
│   ├── bot.js                  # Haupt-Bot Logik
│   └── package.json            # Bot Dependencies
├── templates/                   # E-Mail & Content Templates
│   ├── email-templates.html    # E-Mail Templates
│   └── social-media-content.md # Social Media Content
├── gitea-setup.md              # Gitea Ticket-System Setup
└── package.json                # Haupt-Dependencies & Scripts

🛠️ Installation & Setup

Voraussetzungen

Node.js (v16+)
Angular CLI
Git

1. Dependencies installieren

npm install

2. Alle Services starten

npm run dev  # Startet Frontend, Backend & Bot gleichzeitig

3. Einzelne Services starten

# Frontend (Angular) - Port 4200
npm run frontend

# Backend (Node.js) - Port 3000
npm run backend

# Social Media Bot testen
npm run bot

⚙️ Konfiguration

E-Mail Setup (mailbox.org)

# Backend-Konfiguration
cp env.example .env
# .env Datei mit echten SMTP-Daten ausfüllen

# Bot-Konfiguration
cd social-media-bot
cp env.example .env
# .env Datei mit API-Tokens ausfüllen

🌐 URLs

Frontend: http://localhost:4200
Backend API: http://localhost:3000
Health Check: http://localhost:3000/api/health

📊 Verfügbare Scripts

# Development
npm run dev          # Alle Services gleichzeitig
npm run frontend     # Nur Angular Frontend
npm run backend      # Nur Node.js Backend
npm run bot          # Social Media Bot testen

# Production
npm run build        # Frontend Build
npm run start:prod   # Production Server

# Utilities
npm run lint         # Code Linting
npm run test         # Tests ausführen

🎨 Design System

Farbschema (basierend auf Logo)

Primary: Warme Braun-/Beigetöne
Secondary: Harmonische Erdtöne
Accent: Subtile Rosé-Töne

Typografie

Logo Script: Dancing Script (kalligrafisch)
Logo Caps: Cormorant Garamond (klassisch)
Body: Inter (modern, lesbar)
Headings: Playfair Display (elegant)

🔧 Technische Details

Frontend (Angular 17)

Styling: Tailwind CSS
Routing: Angular Router
Forms: Reactive Forms
HTTP: Angular HttpClient

Backend (Node.js)

Framework: Express.js
E-Mail: Nodemailer
API-Calls: Axios
Environment: dotenv

Integrationen

E-Mail: mailbox.org SMTP
Tickets: Gitea API
Social Media: Multi-Platform APIs

🚀 Deployment

Frontend

ng build --prod
# Dateien aus dist/ Ordner auf Webserver deployen

Backend

# PM2 für Prozess-Management
npm install -g pm2
pm2 start backend/server.js --name "florale-emotion-backend"

📞 Support

Bei Fragen zur technischen Umsetzung:

E-Mail: info@florale-emotion.de
Dokumentation: Siehe ../business-plan/

Florale Emotion - Blumen für besondere Momente 🌸

4.5 KiB Raw Blame History