Dieses Projekt implementiert das Front-End für eine einfache To-Do-List-Webanwendung unter Verwendung der React JS-Bibliothek sowie gestalteter Komponenten, die reines CSS ersetzen.
Es umfasst die Anmeldeseite und die allgemeine Benutzeroberfläche der App.
Die Login-Authentifizierungslogik und die Aufgabendatenbank für jeden Benutzer sind nicht implementiert, da es sich bei diesem Projekt nur um eine Front-End-Studie handelt.
Die Anmeldeseite wurde in diesem Design von Jordan Hughes inspiriert. Die Homepage wurde in diesem Design von Mik Skuza inspiriert.
• Anmeldeseite, einschließlich Anmeldeschaltfläche, die zur Hauptanwendung weiterleitet;
• Anwendungs-Benutzeroberfläche mit Navigationsseitenleiste und Bereich für die To-Do-Liste;
• Neue Aufgabe hinzufügen, Namens- und Kategorieeigenschaften festlegen;
• Aufgabe löschen, mit einem Modal zum Bestätigen der Aktion;
• Aufgabe per Kontrollkästchen als erledigt prüfen;
• Filtern Sie die in der Aufgabenliste angezeigten Aufgaben nach „erledigt“, „nicht erledigt“ oder „alle“;
• Filtern Sie Aufgaben, die in der Aufgabenliste angezeigt werden, nach ihrer Kategorie, indem Sie sie in der Seitenleiste auswählen.
• Autorisierung: Der Benutzer kann vor der Anmeldung nicht auf die Startseite zugreifen und nach der Anmeldung auch nicht auf die Anmeldeseite.
Anmerkung: Derzeit sind die Funktionen „Aufgabe bearbeiten“ und „Kategorien hinzufügen oder entfernen“ nicht implementiert, da ich der Meinung bin, dass dies nicht so viel zu meinem persönlichen Lernen beitragen würde und sehr zeitaufwändig wäre. Vielleicht werde ich das später umsetzen.
Wenn Sie dieses Projekt selbst ausprobieren möchten:
sudo npm install -g yarn
yarn install
auf dem Terminal in dem Ordner aus, in den Sie das Projekt heruntergeladen haben, um alle verwendeten Abhängigkeiten zu installieren.yarn start
aus, um das Projekt in Ihrem Browser auszuführen.