Software Desing für myBay §

[Beschreiben Sie hier die intendierte Code-Struktur Ihrer Anwendung. Notieren Sie wesentliche Module oder Konzepte, entlang derer sich Ihre Anwendung strukturieren lässt. Gehen Sie dabei auch auf grundlegende Architekturen, z.B. die Unterscheidung von Server- und Client-Anwendung ein und beschreiben Sie die Art und Weise, wie Teilkomponenten miteinander kommunizieren werden. Entwerfen Sie Strukturen und Vorgaben für zentrale Datenobjekte und geben Sie an, welche Teilbereiche der Anwendung unter Verwendung externe APIs oder Bibliotheken umgesetzt werden sollen. Erweitern und Überarbeiten Sie dieses Dokument im Verlauf des Projektes. Hier soll stets eine aktuelle Dokumentation des aktuell geplanten bzw. umgesetzten Software Designs einsehbar sein.]

Frontend (Client side) §

• Libraries:
  • Bootstrap für UI elemente
  • Nivo für Graphen/Analyse
  • React für generelle Struktur
• Components
  • UI
    • Navbar
    • Card View
      • Content:
        • Listings List View
        • Analytics View
      • Buttons/whatever für Interaktionsmöglichkeit (z.b. edit)
    • AddQuery View (Eingabeformular um neue Queries hinzuzufügen)
    • QueryCategory View (Card overview)
    • Login View
  • Helper
    • APIQuery
    • StorageManager

UI §

Navbar §

• Main way to navigate the dashboard (e.g. between QueryCategory Views)
• Displays all QueryCategories

QueryCategory View §

• Displays all Card Views of a category and allows organizing them

Card View §

• buttons (e.g. edit) and a name
• contentArea that displays either:
  • listings (e.g. as a list) → retrieved from activeListings route
  • analytics (e.g. as a line graph) → retrieved from endedListings route

AddQuery §

• Allows users to specify filters such as
  • keyword(s)
  • listing type
  • price
  • …
• Creates a new APIQuery object on submit → StorageManager

Helper §

APIQuery §

• Helper object for building API calls
• toString() → returns API call as as string

StorageManager §

• Helper class that manages localstorage/server side saving of data

Backend (Server) §

• Libraries
  • Express
  • Firebase
• Components
  • Routes
    • GET “/activeListings”
    • GET “/endedListings”
    • GET “/login”

Routes §

GET activeListings §

• Route for retrieving active listings

GET endedListings §

• Route for retrieving ended listings

login §

• route for logging in
• uses Firebase as a login provider