178 lines
4.5 KiB
Markdown
178 lines
4.5 KiB
Markdown
# 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
|
|
|
|
### Social Media Automation
|
|
- ✅ 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
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 2. Alle Services starten
|
|
```bash
|
|
npm run dev # Startet Frontend, Backend & Bot gleichzeitig
|
|
```
|
|
|
|
### 3. Einzelne Services starten
|
|
```bash
|
|
# 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)
|
|
```bash
|
|
# Backend-Konfiguration
|
|
cp env.example .env
|
|
# .env Datei mit echten SMTP-Daten ausfüllen
|
|
```
|
|
|
|
### Social Media Bot
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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
|
|
```bash
|
|
ng build --prod
|
|
# Dateien aus dist/ Ordner auf Webserver deployen
|
|
```
|
|
|
|
### Backend
|
|
```bash
|
|
# 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* 🌸 |