Ich habe an einer Web-App namens „Heat“ gearbeitet. Der einzige Zweck der App besteht darin, mir beim Erlernen und Anwenden von JavaScript zu helfen und mein CSS sowie viele Backends zu verbessern. Der Plan bestand darin, eine optisch ansprechende Web-App mit einigen unterhaltsamen Funktionen zu erstellen.

Was ich dabei gelernt habe:

Das Frontend wurde mit React Js erstellt. Ich habe React nur aus Neugier und um herauszufinden, worum es geht, ausgewählt. Eines meiner Ziele war die Integration einiger Google APIs in das Projekt, das, für das ich mich entschieden habe, war Google Maps API, ich verwende sie für die AutoVervollständigung der Suchleiste. Die Implementierung war aufgrund der Bibliothek -> @react-google-maps/api von Reacts, die dabei hilft, Google Maps-Funktionen in React-Apps zu integrieren, nicht allzu schwierig. Die Suchkomponente wird in den Abschnitt „Restaurant hinzufügen“ integriert.

Das Frontend wird auf Netlify gehostet, das mit meinem Github verknüpft ist und die App bei jedem Push zum Remote-Repo automatisch aktualisiert, es war ziemlich einfach.

Heat ist eine Single Page Application (SPA) und die Implementierung wird über das React Router DOM verwaltet. Es ermöglicht die Navigation auf der Clientseite durch die Zuordnung von URLs zu Komponenten. Dies bedeutet, dass Benutzer verschiedene Teile der App über unterschiedliche URLs besuchen können, obwohl die gesamte Anwendung als einzelne HTML-Seite geladen wird.

Woran ich gerade arbeite:

Ich arbeite derzeit an den Registrierungs-, Anmelde- und Abmeldeelementen der App, die von Flask/Python unterstützt werden. Flask verfügt außerdem über einige Bibliotheken, die den Entwicklungsprozess unterstützen, z. B. SQLAlchemy und Login Manager. Die Back-End-Seite hat im Vergleich zur Front-End-Seite eine sanfte Lernkurve durchlaufen. Ich beschäftige mich immer noch mit useState und useEffect, die wichtige Hooks in React für die Statusverwaltung sind.

Nach Abschluss des Authentifizierungselements der App denke ich darüber nach, für das BackEnd auf Java zu migrieren. Gedanken?

Viel Lernen. #Reagieren #JavaScript #Flask #WebEntwicklung