Muhammad Abdullah Awais

Muhammad Abdullah Awais ist Full Stack Developer und gestaltet, entwickelt und pflegt jedes Tool auf EasyToolbox: Rechner, Worttools und Spiele. Die Arbeit umfasst den gesamten Stack: die Oberfläche, die Logik hinter jeder Zahl und die automatischen Prüfungen, die vor jeder Veröffentlichung laufen.

Im Mittelpunkt stehen Webanwendungen, die schnell, barrierearm und vertrauenswürdig sind: klare Oberflächen, verlässliche Daten und Code, der getestet statt nur angenommen wird.

Bevor ein Tool online geht, liest Muhammad Abdullah Awais die Regeln, die es anwendet, an ihrer Quelle: das Gesetz auf der amtlichen Gesetzesseite, die Hinweise der Steuerverwaltung oder Aufsicht und, wo es eines gibt, ein amtliches Rechenbeispiel. Der Rechner muss dieses Beispiel dann auf den Cent genau nachrechnen.

• Amtliche Beispiele als Testfälle, etwa die Prüftabelle des Bundesministeriums der Finanzen zur Lohnsteuer, das Rechenbeispiel der britischen Steuerbehörde HMRC zur Top Slicing Relief und das Beispiel der französischen Finanzverwaltung zu Rückkäufen aus Lebensversicherungen
• Alle Zahlen eines Tools in einer datierten Datendatei; für Werte, die sich zu einem bekannten Termin ändern, stoppt ein Test nach diesem Termin die Veröffentlichung, bis der Wert erneut geprüft ist
• Die Primärquellen auf jeder Tool-Seite, mit dem Datum der letzten Prüfung

Das ist Recherche- und Softwarearbeit, keine Beratung: Keine Steuerberatung, Rechtsberatung oder Finanzberatung hat die Seiten geprüft. Sie erklären, wie die Regeln funktionieren, damit sich jede Zahl selbst nachprüfen lässt; den vollständigen Ablauf beschreibt die Methodik.

Frontend-Entwicklung mit React und Next.js, Backend-Entwicklung mit Node.js und Express.js sowie Datenhaltung mit MongoDB, zusammen der sogenannte MERN-Stack.

• Responsive Benutzeroberflächen aus wiederverwendbaren, typsicheren Komponenten
• REST- und GraphQL-APIs, ausgerichtet auf das, was der Client braucht
• Performance durch Code-Splitting, Lazy Loading und statisches Rendering
• Barrierefreiheit nach WCAG 2.1 AA und Suchmaschinenoptimierung (SEO) von Anfang an

Im Frontend entstehen Oberflächen mit React und Next.js. Seiten werden auf dem Server gerendert oder vorab erzeugt, sodass Text und Überschriften schon im ersten HTML stehen und nicht erst nach dem Laden von JavaScript erscheinen. Interaktive Teile wie ein Rechner sind eigene Komponenten, die nur dort Code in den Browser bringen, wo er gebraucht wird.

Die Komponenten sind in TypeScript geschrieben, damit falsche Daten und Eigenschaften schon beim Entwickeln auffallen, und mit Tailwind CSS gestaltet. Layouts sind responsiv und funktionieren vom kleinen Smartphone bis zum großen Bildschirm. Bedienelemente werden so gebaut, dass sie sich auch allein mit der Tastatur erreichen und benutzen lassen.

Im Backend entstehen Dienste mit Node.js und Express.js: Schnittstellen, die Anfragen annehmen, Eingaben prüfen und Daten an das Frontend zurückgeben. Je nach Projekt sind das REST-APIs mit klar abgegrenzten Endpunkten oder GraphQL-APIs, bei denen der Client genau die Felder abfragt, die er braucht.

Für die Datenhaltung dient MongoDB, mit Datenmodellen, die sich nach den Abfragen der Anwendung richten. Dazu kommt die Anbindung externer APIs, mit einer Fehlerbehandlung für den Fall, dass ein Dienst nicht oder verspätet antwortet. Endpunkte werden mit Postman ausprobiert und mit Swagger dokumentiert, damit andere sie ohne Rückfrage nutzen können.

Qualität wird von Anfang an eingeplant und nicht erst am Ende nachgeprüft. Automatische Tests mit Vitest prüfen Logik und Rechenwege bei jeder Änderung, bevor eine Version veröffentlicht wird. Maßstab für die Barrierefreiheit sind die WCAG: ausreichende Kontraste, Beschriftungen für Screenreader, eine sinnvolle Gliederung der Überschriften und eine Bedienung ohne Maus.

Performance und SEO gehören ebenso zum Entwurf: wenig JavaScript im Browser, Schriften und Bilder, die das Layout beim Laden nicht verschieben, sprechende URLs sowie Metadaten und strukturierte Daten für jede Seite. Der Code wird mit Git versioniert und auf GitHub verwaltet, sodass jede Änderung nachvollziehbar bleibt.

Die Seite ist eine statische, mehrsprachige Next.js-Anwendung, in der jedes Tool ein Ordner aus Daten, Logik, Tests und sieben eigenen Sprachseiten ist.

• Next.js mit dem App Router, jede Seite vorab statisch erzeugt
• Durchgehend TypeScript, Inhalte werden beim Build gegen ein Schema geprüft
• Sieben Sprachen, jede mit eigenen URLs, hreflang-Verweisen und strukturierten Daten
• Automatische Tests mit Vitest für jede Formel, bevor eine Version gebaut wird
• Tools, die im Browser laufen, sodass keine Eingabe an einen Server gesendet wird

Für ein Webentwicklungsprojekt oder Rückmeldungen zu einem Tool dieser Seite schreiben Sie an [email protected]. Das Portfolio unter www.abdullahawais.com zeigt weitere Projekte; die Profile auf dieser Seite führen zum Code auf GitHub und zu beruflichen Neuigkeiten auf LinkedIn.