3D-Druck-Tagebuch

Table of Contents

• Überblick
• Live Demo
• Kernfunktionen
• Backend + Hosting
• Frontend
• Projektstruktur
• Features
• Ausblick

Überblick

Das 3D-Druck-Tagebuch ist eine Webanwendung, die es ermöglicht, 3D-Druck-Projekte effizient zu dokumentieren und zu verwalten. Ein zentrales Feature ist die Automatisierung der Datenerfassung: Durch die Eingabe einer MakerWorld-URL werden automatisch alle relevanten Informationen wie Modellbild, Titel, Druckzeit und Filamentverbrauch extrahiert.

Das Projekt verbindet ein modernes Frontend mit einem selbst gehosteten Backend auf einem Raspberry Pi, um volle Kontrolle über die Daten und Scraping-Prozesse zu behalten.

Live Demo

Du kannst die Anwendung gerne mit dem Demo-Account ausprobieren:

• E-Mail: demo@mail.de
• Passwort: 123456

Kernfunktionen

• Automatisches Scraping: Das System analysiert MakerWorld-Produktseiten und extrahiert:
  • 🖼️ Modellbilder & Titel
  • ⏱️ Druckzeiten
  • 🧵 Filament-Gewichte & Farben
• Projekt-Verwaltung: Speicherung und Organisation durchgeführter Drucke.
• Responsive UI: Optimiert für Desktop und Mobile Nutzung.

Backend + Hosting

Das Backend ist eine Node.js-Anwendung, die für den Betrieb auf einem Raspberry Pi optimiert ist.

Technologie-Stack

• Node.js & Express: Leichter API-Server.
• Puppeteer & Cheerio: Hybrides Scraping für maximale Effizienz. Statische Inhalte werden mit Cheerio geparst, dynamische Inhalte (wie Filament-Popovers) mit Puppeteer.
• PM2: Process Manager, der sicherstellt, dass die Anwendung (insbesondere auf dem Raspberry Pi) dauerhaft läuft und bei Abstürzen automatisch neu startet.

Hosting & Tunneling

Der Server läuft lokal im Heimnetzwerk auf einem Raspberry Pi. Um den Zugriff von außen zu ermöglichen, wird ngrok verwendet:

• Tunneling: ngrok leitet Anfragen sicher an den lokalen Port 3001 weiter.
• Sicherheit: Der Zugriff ist durch einen Authorization Bearer-Token geschützt.
• Header-Handling: Spezielle Behandlung von ngrok-skip-browser-warning Headern für reibungslose API-Calls.

Hardware-Optimierung

Das Backend erkennt automatisch, ob es auf Linux/ARM (Raspberry Pi) läuft, und nutzt die installierte Chromium-Instanz (/usr/bin/chromium-browser), um die Performance zu optimieren und Ressourcen zu schonen (headless, no-sandbox, disable-gpu).

Frontend

Das Frontend ist ein modernes Dashboard, entwickelt mit Next.js 16 und React 19.

Tech Stack

• Framework: Next.js (App Router)
• Styling: Tailwind CSS v4
• Komponenten: Radix UI & Lucide React Icons
• Daten-Fetching: Integration der eigenen Backend-API

Projektübersicht

Das Dashboard bietet eine klare Übersicht über alle Druckprojekte. Nutzer können neue Projekte hinzufügen, indem sie einfach die URL eines Modells eingeben. Das System übernimmt den Rest.

Features

• 🚀 Schnelle Dateneingabe: URL-Paste genügt.
• 📱 Mobile First: Volle Funktionalität auch am Smartphone.
• 🔒 Geschützte API: Token-basierte Kommunikation mit dem Backend.

Projektstruktur

3d-druck-tagebuch/
├── backend/
│   ├── index.js                 # Express Server & API Routes
│   ├── scraper.js               # Puppeteer/Cheerio Logik
│   ├── ecosystem.config.js      # PM2 Konfiguration
│   └── package.json
├── frontend/
│   ├── app/                     # Next.js App Router
│   │   ├── dashboard/           # Hauptansicht
│   │   ├── api/                 # Next.js API Routes (Proxy)
│   │   ├── layout.tsx           # Globales Layout
│   │   └── page.tsx             # Landing Page
│   ├── components/              # UI Komponenten
│   │   ├── ui/                  # Shadcn/Radix Komponenten
│   │   └── ...
│   ├── lib/                     # Utilities
│   └── public/                  # Statische Assets

Einblicke

Drucker-Import

Leichter Drucker-Import

Fügen Sie neue 3D-Drucker mühelos hinzu.