mockup of the web app for mobile, desktop and tablet

MeinOrganizer

(Organisations-Web-App)

Ich hatte das Bedürfnis, die Funktionalität verschiedener Apps, die ich bereits benutze, in einer einzigen zu gruppieren. Deshalb habe ich die MeinOrganizer Web-Applikation programmiert. Mit dieser Anwendung kann man ganz einfach Listen und Notizen erstellen, Budgets verwalten, Projekte organisieren, Termine in den Kalender eintragen und seine Produktivität mit dem Fokus-Timer steigern.

Planung und Anforderungsanalyse
Während der Planungsphase habe ich die Ziele des Projekts festgesetzt und die geeigneten Technologien ausgewählt (Javascript, Node.js, Express.js, EJS und MongoDB).

Frontend-Entwicklung
Die Benutzeroberfläche gestaltete ich mithilfe von HTML, CSS und JavaScript und achtete dabei besonders auf ein responsives Webdesign, das auf verschiedenen Geräten optimal funktionierte.

Backend-Entwicklung
Im Backend entwickelte ich Eine RESTful API mit Express.js, integrierte EJS für serverseitige Template-Renderung und verband die Anwendung erfolgreich mit einer MongoDB-Datenbank.

Testing
Zur Sicherstellung der Benutzerfreundlichkeit und Funktionalität führte ich Cross-Browser- und Mobile-Tests durch.

Deployment
Die Anwendung wurde schliesslich über Heroku veröffentlicht.

Durch dieses Projekt konnte ich wertvolle Erfahrungen in der Planung, Entwicklung und Bereitstellung von Webanwendungen sammeln. Besonders habe ich mein Verständnis für die serverseitige Renderung mit EJS vertieft und gelernt, wie man eine RESTful API mit einer MongoDB-Datenbank verbindet. Zudem habe ich meine Fähigkeiten im responsive Design und in der Durchführung von Cross-Browser-Tests gestärkt, was mir ein besseres Gespür für Benutzerfreundlichkeit und plattformübergreifende Funktionalität gegeben hat. Der gesamte Entwicklungsprozess hat mir geholfen, meine Problemlösungsfähigkeiten zu verbessern und mein Wissen in Full-Stack-Technologien weiter auszubauen.

Kenntnisse, Werkzeuge und Technologien, die ich in diesem Projekt verwendet habe:

  • HTML5
  • CSS3
  • Javascript
  • Node.js
  • Express.js
  • NPM
  • MongoDB
  • Heroku
  • Git
  • Photoshop