Muhammad Abdullah Awais

Full-stackontwikkeling van snelle, toegankelijke webapplicaties met React, Next.js, Node.js en TypeScript.

Laatst bijgewerkt op

Profiel

Muhammad Abdullah Awais werkt als full stack developer en ontwerpt, bouwt en onderhoudt elke tool op EasyToolbox: rekenhulpen, woordtools en spellen. Het werk beslaat de hele stack: de interface, de logica achter elk cijfer en de automatische controles die draaien voordat er iets online gaat.

De nadruk ligt op webapplicaties die snel, toegankelijk en betrouwbaar zijn: heldere interfaces, kloppende gegevens en code die getest is in plaats van aangenomen.

Hoe de cijfers worden onderzocht

Voordat een tool online gaat, leest Muhammad Abdullah Awais de regels die het toepast bij de bron: de wet op de officiële wettensite, de uitleg van de belastingautoriteit of toezichthouder en, als het bestaat, een officieel rekenvoorbeeld. De rekenhulp moet dat voorbeeld daarna tot op de cent nadoen.

  • Officiële voorbeelden als testgevallen, zoals de controletabel voor de loonbelasting van het Duitse ministerie van Financiën, het voorbeeld van de Britse belastingdienst HMRC over top slicing relief en dat van de Franse belastingdienst over afkopen van levensverzekeringen
  • Alle cijfers van een tool in één gedateerd gegevensbestand; voor waarden die op een bekende datum veranderen, houdt een test de publicatie na die datum tegen tot ze opnieuw zijn gecontroleerd
  • De primaire bronnen op elke toolpagina, met de datum van de laatste controle

Dit is onderzoeks- en softwarewerk, geen professioneel advies: geen belasting-, juridisch of financieel adviesbureau heeft de pagina's gecontroleerd. Ze leggen uit hoe de regels werken, zodat iedereen een bedrag zelf kan nagaan; het hele proces staat op de pagina werkwijze.

Vaardigheden en technologieën

Frontendontwikkeling met React en Next.js, backendontwikkeling met Node.js en Express.js en gegevensopslag met MongoDB, samen de MERN-stack.

GebiedTechnologieën
TalenJavaScript, TypeScript, PHP, SQL, HTML5, SCSS/SASS
Frontendframeworks en -bibliothekenReact, Next.js, Vue, Angular, jQuery
State managementRedux Toolkit, React Redux, VueX, Zustand
UI-frameworksTailwind CSS, Material UI, Bootstrap, shadcn/ui
Backend en API'sNode.js, Nest.js, Express.js, REST APIs, API-integratie
Data ophalenTanStack Query
DatabasesMongoDB, MySQL, PostgreSQL
Tools en DevOpsGit, GitHub, Swagger, Postman
Full stackMERN stack: MongoDB, Express.js, React, Node.js
  • Responsieve interfaces opgebouwd uit herbruikbare, typeveilige componenten
  • REST- en GraphQL-API's ontworpen rond wat de client nodig heeft
  • Prestaties via code splitting, lazy loading en statische rendering
  • Toegankelijkheid volgens WCAG 2.1 AA en zoekmachineoptimalisatie (SEO) vanaf het begin

Frontend: interfaces met React en Next.js

Aan de voorkant bouwt Muhammad Abdullah Awais interfaces met React en Next.js. Pagina's worden op de server gerenderd of vooraf statisch gegenereerd, zodat de inhoud al in de HTML staat voordat er JavaScript draait. Dat maakt een pagina sneller zichtbaar en goed leesbaar voor zoekmachines.

De interface bestaat uit kleine componenten in TypeScript, die elk één taak hebben en op meerdere plekken terugkomen. De types vangen een verkeerde waarde al bij het bouwen op, in plaats van pas in de browser. De opmaak gebeurt met Tailwind CSS, en elke lay-out wordt opgezet vanaf het smalste telefoonscherm en daarna uitgebreid naar tablet en desktop. Knoppen, keuzelijsten en invoervelden worden zo gebouwd dat ze ook met alleen het toetsenbord te bedienen zijn.

Backend: Node.js, API's en gegevens

Aan de serverkant werkt Muhammad Abdullah Awais met Node.js en Express.js: services die verzoeken ontvangen, de invoer controleren en een duidelijk antwoord of een duidelijke foutmelding teruggeven. De keuze tussen REST en GraphQL hangt af van de toepassing. REST past bij eenvoudige bronnen met vaste adressen, GraphQL bij schermen die gegevens uit meerdere bronnen in één verzoek nodig hebben.

Gegevens komen in MongoDB terecht, met datamodellen die aansluiten bij hoe de toepassing ze leest en schrijft. Bij het koppelen van externe API's blijven sleutels op de server, en een trage of falende dienst levert een nette melding op in plaats van een kapotte pagina. Deze site zelf heeft geen backend nodig: alle tools rekenen in de browser, en de pagina's worden vooraf gegenereerd.

Kwaliteit: tests, toegankelijkheid en snelheid

Kwaliteit wordt vanaf het begin ingebouwd en niet achteraf toegevoegd. Formules en logica worden met Vitest getest, en de tests draaien vóór elke publicatie; faalt er één, dan gaat de nieuwe versie niet online.

Toegankelijkheid volgt WCAG als maatstaf: voldoende kleurcontrast, labels bij invoervelden, koppen in een logische volgorde en bediening zonder muis. Snelheid en SEO horen bij het ontwerp: weinig JavaScript in de browser, vooraf gegenereerde pagina's, gestructureerde gegevens en eigen adressen per taal. De code wordt met Git bijgehouden op GitHub, met elke wijziging als aparte, beschreven stap.

Hoe deze site is gebouwd

De site is een statische, meertalige Next.js-toepassing waarin elke tool één map is met gegevens, logica, tests en zeven eigen taalpagina's.

  • Next.js met de App Router, elke pagina vooraf statisch gegenereerd
  • Overal TypeScript, met inhoud die bij het bouwen tegen een schema wordt gecontroleerd
  • Zeven talen, elk met eigen URL's, hreflang-links en gestructureerde gegevens
  • Automatische tests met Vitest voor elke formule vóór elke release
  • Tools die in de browser werken, zodat niets wat een bezoeker invult naar een server gaat

Contact

Voor een webontwikkelingsproject of feedback op een tool van deze site kunt u mailen naar [email protected]. Het portfolio op www.abdullahawais.com toont meer projecten, en de profielen op deze pagina leiden naar de code op GitHub en naar professionele updates op LinkedIn.