Muhammad Abdullah Awais
Desarrollo full stack de aplicaciones web rápidas y accesibles con React, Next.js, Node.js y TypeScript.
Última actualización:
Perfil
Muhammad Abdullah Awais trabaja como full stack developer y diseña, desarrolla y mantiene cada herramienta de EasyToolbox: calculadoras, herramientas de palabras y juegos. El trabajo abarca todo el stack: la interfaz, la lógica que produce cada cifra y las comprobaciones automáticas que se ejecutan antes de publicar nada.
El foco está en aplicaciones web rápidas, accesibles y fiables: interfaces claras, datos contrastados y código probado en lugar de darse por bueno.
Cómo se investigan las cifras
Antes de publicar una herramienta, Muhammad Abdullah Awais lee las normas que aplica en su fuente: la ley en el boletín oficial, las indicaciones de la administración tributaria o del supervisor y, cuando existe, un ejemplo oficial resuelto. La calculadora tiene que reproducir después ese ejemplo al céntimo.
- Ejemplos oficiales convertidos en casos de prueba, como la tabla de comprobación de la retención sobre el salario del Ministerio Federal de Finanzas alemán, el ejemplo de la HMRC británica sobre la top slicing relief y el de la administración tributaria francesa sobre los rescates de seguros de vida
- Todas las cifras de cada herramienta en un único archivo de datos fechado; para los valores que cambian en una fecha conocida, una prueba impide publicar después de esa fecha hasta que se revisan de nuevo
- Las fuentes primarias en cada página de herramienta, con la fecha de la última verificación
Es trabajo de investigación y de software, no asesoramiento profesional: ninguna asesoría fiscal, jurídica ni financiera ha revisado las páginas. Explican cómo funcionan las normas para que cualquier cifra pueda comprobarse; el proceso completo está en la metodología.
Conocimientos y tecnologías
Desarrollo frontend con React y Next.js, desarrollo backend con Node.js y Express.js y almacenamiento de datos con MongoDB, que juntos forman el stack MERN.
| Área | Tecnologías |
|---|---|
| Lenguajes | JavaScript, TypeScript, PHP, SQL, HTML5, SCSS/SASS |
| Frameworks y librerías frontend | React, Next.js, Vue, Angular, jQuery |
| Gestión del estado | Redux Toolkit, React Redux, VueX, Zustand |
| Frameworks de interfaz | Tailwind CSS, Material UI, Bootstrap, shadcn/ui |
| Backend y API | Node.js, Nest.js, Express.js, REST APIs, Integración de API |
| Obtención de datos | TanStack Query |
| Bases de datos | MongoDB, MySQL, PostgreSQL |
| Herramientas y DevOps | Git, GitHub, Swagger, Postman |
| Full stack | MERN stack: MongoDB, Express.js, React, Node.js |
- Interfaces responsive construidas con componentes reutilizables y tipados
- API REST y GraphQL diseñadas según lo que necesita el cliente
- Rendimiento con división de código, carga diferida y renderizado estático
- Accesibilidad WCAG 2.1 AA y posicionamiento en buscadores (SEO) desde el inicio
El frontend, con React y Next.js
En el frontend, el trabajo gira en torno a React y Next.js. Las páginas se renderizan en el servidor o se generan de antemano, de modo que el contenido llega como HTML ya terminado: un móvil lento o un buscador pueden leerlo enseguida, y el JavaScript solo se carga en las partes que reaccionan a lo que se introduce.
Cada interfaz se monta con componentes pequeños y reutilizables escritos en TypeScript, así que el compilador revisa un cambio en todos los lugares donde se usa ese componente. Los estilos se escriben con Tailwind CSS, y los diseños responsive parten de la pantalla de móvil más estrecha para crecer hacia el ordenador, en lugar de encoger un diseño de escritorio.
El uso con teclado se plantea desde el principio: cada control se alcanza y se maneja sin ratón, y lleva una etiqueta que un lector de pantalla puede anunciar.
El backend, con Node.js y API
En el backend, los servicios se escriben en Node.js, normalmente con Express.js, y ofrecen API REST o GraphQL pensadas para lo que el cliente necesita mostrar. REST encaja con recursos que corresponden a direcciones concretas, mientras que GraphQL permite pedir en una sola consulta exactamente los campos que usa una pantalla.
Los datos se modelan en MongoDB con esquemas que siguen la forma en que la aplicación los lee. Lo que llega a un servicio se valida a la entrada, para rechazar los datos mal formados en el borde y no en lo más profundo del código.
La integración de API de terceros forma parte del mismo trabajo: peticiones y respuestas tipadas, errores tratados allí donde se producen y endpoints documentados con Swagger y probados con Postman.
Pruebas, accesibilidad, rendimiento y SEO
Las pruebas automáticas se escriben con Vitest junto al código que cubren, de modo que una fórmula, un analizador o un componente demuestran que funcionan antes de publicarse. Si una prueba falla, la versión no sale: las pruebas forman parte de la compilación y no son una tarea aparte.
La accesibilidad se mide con WCAG, las Pautas de Accesibilidad para el Contenido Web, desde el primer borrador de una página: contraste legible, encabezados de verdad, campos con su etiqueta y diseños que aguantan cuando se amplía el texto.
La velocidad y la visibilidad en buscadores (SEO) se tratan como parte del diseño, no como un arreglo final. Una página con poco JavaScript carga antes en el móvil, y cuando el título, la descripción, los datos estructurados y los enlaces entre idiomas salen de los mismos datos que el contenido, no pueden desajustarse.
El código se gestiona con Git y se aloja en GitHub, y cada cambio queda registrado con un mensaje que lo describe.
Cómo está construido este sitio
El sitio es una aplicación Next.js estática y multilingüe en la que cada herramienta es una carpeta con datos, lógica, pruebas y siete páginas propias.
- Next.js con App Router y todas las páginas generadas de forma estática
- TypeScript en todo el código, con el contenido validado contra un esquema al compilar
- Siete idiomas, cada uno con sus propias URL, enlaces hreflang y datos estructurados
- Pruebas automáticas con Vitest para cada fórmula antes de cada versión
- Herramientas que funcionan en el navegador, de modo que nada de lo que se introduce llega a un servidor
Contacto
Para un proyecto de desarrollo web o para comentar cualquier herramienta de este sitio, escribe a [email protected]. El portafolio en www.abdullahawais.com muestra más proyectos, y los perfiles de esta página enlazan al código en GitHub y a la actividad profesional en LinkedIn.