Muhammad Abdullah Awais

Full stack developer building fast, accessible web applications with React, Next.js, Node.js and TypeScript.

Last updated

Profile

Muhammad Abdullah Awais is a full stack developer who designs, builds and maintains every tool on EasyToolbox: calculators, word tools and games. The work covers the whole stack: the interface people use, the logic that produces each figure, and the automated checks that run before anything is published.

The focus is on web applications that are fast, accessible and easy to trust: clear interfaces, reliable data and code that is tested rather than assumed to work.

How the figures are researched

Before a tool is published, Muhammad Abdullah Awais reads the rules it applies at their source: the statute on the official legislation site, the guidance of the tax authority or regulator and, where one exists, an official worked example. The calculator then has to reproduce that example to the cent.

  • Official examples reproduced as test cases, such as the German Federal Ministry of Finance's wage tax test table, HMRC's worked example for top slicing relief and the French tax administration's example for life insurance withdrawals
  • Every figure a tool uses kept in one dated data file; for values that change on a known date, a test stops the site building after that date until the value is checked again
  • The primary sources listed on each tool page, with the date its figures were last verified

This is research and software work, not professional advice: no tax adviser, lawyer or financial adviser has reviewed the pages. They explain how the rules work so that anyone can check a figure; the methodology describes the whole process.

Skills and technologies

Frontend development with React and Next.js, backend development with Node.js and Express.js, and data storage with MongoDB, which together make up the MERN stack.

AreaTechnologies
LanguagesJavaScript, TypeScript, PHP, SQL, HTML5, SCSS/SASS
Frontend frameworks and librariesReact, Next.js, Vue, Angular, jQuery
State managementRedux Toolkit, React Redux, VueX, Zustand
UI frameworksTailwind CSS, Material UI, Bootstrap, shadcn/ui
Backend and APIsNode.js, Nest.js, Express.js, REST APIs, API integration
Data fetchingTanStack Query
DatabasesMongoDB, MySQL, PostgreSQL
Tools and DevOpsGit, GitHub, Swagger, Postman
Full stackMERN stack: MongoDB, Express.js, React, Node.js
  • Responsive user interfaces built from reusable, type safe components
  • REST and GraphQL APIs designed around what the client needs
  • Performance work such as code splitting, lazy loading and static rendering
  • Accessibility to WCAG 2.1 AA and search engine optimisation (SEO) built in from the start

Frontend work with React and Next.js

On the frontend, the work centres on React and Next.js. Pages are rendered on the server or generated ahead of time, so the content arrives as finished HTML that a slow phone or a search engine can read at once. JavaScript is loaded only for the parts that need to react to input.

Interfaces are assembled from small, reusable components written in TypeScript, so a change to one component is checked by the compiler everywhere it is used. Styling is done with Tailwind CSS, and layouts are designed from the narrowest phone screen upwards rather than squeezed down from a desktop design.

Keyboard use is planned from the start, so that every control can be reached and operated without a mouse and carries a label that a screen reader can announce.

Backend work with Node.js and APIs

On the backend, services are written in Node.js, usually with Express.js, and expose REST or GraphQL APIs shaped around what the client needs to show. REST suits resources that map cleanly to addresses, while GraphQL lets a client ask for exactly the fields a screen uses in a single request.

Data is modelled in MongoDB with schemas that follow the way the application reads it. Input is validated as it arrives, so malformed data is turned away at the edge of a service rather than deep inside it.

Integrating third party APIs belongs to the same work. Requests and responses are typed, errors are handled where they occur, and endpoints are documented with Swagger and tried out with Postman.

Tests, accessibility, performance and SEO

Automated tests are written with Vitest next to the code they cover. A formula, a parser or a component is shown to work before it ships rather than assumed to. A test that fails stops the release, which makes the tests part of the build instead of a separate chore.

Accessibility is measured against WCAG, the Web Content Accessibility Guidelines, from the first draft of a page. That means readable contrast, real headings, labelled inputs and layouts that still hold together when the text is enlarged.

Speed and search visibility are treated as part of the design rather than fixed at the end. A page that loads little JavaScript is quicker on a phone. When a page's title, description, structured data and language links come from the same data as its content, they cannot drift out of step with it.

Work is kept under version control with Git and hosted on GitHub, so every change is recorded with a message that describes it.

How this site is built

The site is a static, multilingual Next.js application in which every tool is one folder of data, logic, tests and seven native pages.

  • Next.js with the App Router, every page generated statically ahead of time
  • TypeScript throughout, with content validated against a schema at build time
  • Seven languages, each with its own URLs, hreflang links and structured data
  • Automated tests with Vitest for every formula before a release is built
  • Tools that run in the browser, so nothing a visitor enters is sent to a server

Get in touch

For a web development project, or for feedback on any tool on this site, write to [email protected]. The portfolio at www.abdullahawais.com shows further projects, and the profiles on this page link to the code on GitHub and to professional updates on LinkedIn.