Projektbeispiel
Mabasian News ist ein schneller Echtzeit-Nachrichten-Aggregator, der kuratierte Schlagzeilen aus sieben Kategorien – Welt, Wirtschaft, Technik, Sport, Wissenschaft, Gesundheit und Unterhaltung – in einer hochwertigen, vollständig responsiven Oberfläche mit integrierten Hell-, Dunkel- und System-Themes bereitstellt.
Projektbeschreibung
Mabasian News ist ein Single-Page-Nachrichtenleser, gebaut mit React 19 und Vite, gestaltet mit handgefertigtem Glassmorphism-CSS und einem von mabasian.dev inspirierten Tech-Purple-/Indigo-Designsystem. Über Axios streamt es live kategorisierte Schlagzeilen aus einer eigenen REST-API (api.mabasian.dev), mit robusten Lade-, Leer- und Fehlerzuständen sowie Skeleton-Platzhaltern für ein flüssiges Empfinden. Ein dreifacher Theme-Umschalter (hell / dunkel / System) speichert die Wahl des Besuchers und folgt dem Farbschema des Betriebssystems ohne Flackern beim Laden, während ein barrierefreies Artikel-Lese-Modal – schließbar per Button, Overlay-Klick oder Escape-Taste – die vollständige Story, Quelle und das Veröffentlichungsdatum zeigt. Die Oberfläche ist von Mobil bis Ultra-Wide vollständig responsiv und mit Open-Graph- und Twitter-Card-Metadaten SEO-optimiert, deployt auf Vercel unter news.mabasian.dev.