Dieses Projekt ist ein MVP für eine KI-basierte Mentoring-Plattform für Austauschorganisationen. Das Produkt ermöglicht es Organisationen, KI-generierte Infoveranstaltungen direkt auf ihrer Website anzubieten. Schüler und Eltern können sich zu konkreten Austauschthemen informieren und in Echtzeit Fragen stellen.
Austauschorganisationen fehlt häufig die Kapazität für 24/7-Support oder wiederholte Live-Infoveranstaltungen für unterschiedliche Länder und Programme. Die Plattform löst dieses Problem durch konfigurierbare, KI-gestützte Veranstaltungen, die über ein eigenes Backend erstellt und verwaltet sowie als React-App in die Webseiten der Organisationen eingebettet werden.
Das Produkt befindet sich aktuell im MVP-Status und wird für den Launch vorbereitet.
- Konzeption eines klar strukturierten Backends, mit dem Austauschorganisationen KI-Mentor-Events einfach erstellen und verwalten können
- Entwicklung einer integrierbaren React-App, die verfügbare Events auf den Webseiten der Organisationen darstellt und Nutzer in die Audio-Sessions führt
- Sicherstellung einer einfachen und intuitiven Nutzung für Administratoren und Endnutzer im Rahmen eines MVPs
- Verantwortung für UI/UX-Design und Frontend Umsetzung des Backends sowie der eingebetteten React-App
- Gemeinsame Definition von Anforderungen, Struktur und Scope mit Full-Stack-Entwicklern und einem AI-Spezialisten
- Konzeption der Interfaces von Grund auf basierend auf funktionalen Anforderungen und User Flows
- Design der Backend-Struktur und App-Flows in Figma, anschließende Implementierung mit HTML, SCSS und Bootstrap
Figma | HTML | CSS | Bootstrap | React Bootstrap
Wird von Austauschorganisationen genutzt, um KI-Veranstaltungen zu erstellen und zu verwalten.
Wird von Schülern und Eltern genutzt, um verfügbare KI-Veranstaltungen zu entdecken und direkt über die Website der Organisation an Live-Audio-Sessions teilzunehmen.
Nachfolgend ausgewählte Code Beispiele aus dem Projekt, die zeigen, wie zentrale Komponenten in React umgesetzt wurden.
return (
<Form className="vstack gap-4">
<Form.Group>
<Form.Label className="text-secondary">E-Mail Adresse*</BSForm.Label>
<Form.Control name="email" required className="shadow-sm" />
</Form.Group>
<Form.Group controlId="termsAccepted">
<Form.Check
type="checkbox"
label={
<>
Ich akzeptiere die{" "}
<a href="/terms" target="_blank" rel="noopener noreferrer">
Nutzungsbedingungen
</a>
</>
}
/>
</Form.Group>
</Form>
){/*component with simple animation to indicate when the AI mentor is speaking*/}
<div className="animation-container">
<Image
className="animation-image"
src={event.avatarUrl}
alt="AI mentor avatar"
/>
{isSpeaking && (
<>
{[ -4, -2, 0 ].map((delay) => (
<div
key={delay}
className="animation-circle"
style={{ animationDelay: `${delay}s` }}
/>
))}
</>
)}
</div>