Muhammad Abdullah Awais

Muhammad Abdullah Awais to full stack developer: projektuje, tworzy i utrzymuje każde narzędzie w serwisie EasyToolbox: kalkulatory, narzędzia słowne i gry. Praca obejmuje cały stos technologiczny: interfejs, logikę stojącą za każdą liczbą i automatyczne kontrole uruchamiane przed każdą publikacją.

Celem są aplikacje webowe szybkie, dostępne i godne zaufania: czytelne interfejsy, sprawdzone dane i kod, który jest przetestowany, a nie tylko zakładany jako poprawny.

Przed publikacją narzędzia Muhammad Abdullah Awais czyta przepisy, które ono stosuje, u źródła: ustawę w oficjalnym serwisie, objaśnienia administracji skarbowej lub organu nadzoru i, jeśli istnieje, oficjalny przykład liczbowy. Kalkulator musi potem odtworzyć ten przykład co do grosza.

• Oficjalne przykłady jako przypadki testowe, na przykład tabela kontrolna podatku od wynagrodzeń niemieckiego Federalnego Ministerstwa Finansów, przykład brytyjskiego urzędu HMRC dotyczący top slicing relief i przykład francuskiej administracji skarbowej dotyczący wykupu polis na życie
• Wszystkie liczby narzędzia w jednym datowanym pliku danych; dla wartości zmieniających się w znanym terminie test blokuje publikację po tej dacie, dopóki nie zostaną ponownie sprawdzone
• Źródła pierwotne na każdej stronie narzędzia, z datą ostatniej weryfikacji

To praca badawcza i programistyczna, nie profesjonalne doradztwo: żadna kancelaria podatkowa, prawna ani firma doradcza nie sprawdzała tych stron. Wyjaśniają, jak działają przepisy, aby każdą liczbę można było sprawdzić samodzielnie; cały proces opisuje metodologia.

Frontend w React i Next.js, backend w Node.js i Express.js oraz przechowywanie danych w MongoDB, czyli razem stos MERN.

• Responsywne interfejsy z komponentów wielokrotnego użytku z pełnym typowaniem
• API REST i GraphQL projektowane pod potrzeby klienta
• Wydajność dzięki dzieleniu kodu, leniwemu ładowaniu i renderowaniu statycznemu
• Dostępność zgodna z WCAG 2.1 AA i optymalizacja pod wyszukiwarki (SEO) od początku

Po stronie frontendu Muhammad Abdullah Awais buduje interfejsy w React i Next.js. Strony są renderowane po stronie serwera albo generowane statycznie, więc treść widać od razu, także dla wyszukiwarek, a JavaScript w przeglądarce obsługuje tylko to, co naprawdę musi być interaktywne. Interfejs powstaje z małych komponentów pisanych w TypeScript, dzięki czemu niezgodne dane lub brakujące właściwości wychodzą na jaw już podczas kompilacji, a nie dopiero u użytkownika.

Style powstają w Tailwind CSS. Układ jest projektowany najpierw dla wąskich ekranów telefonów, a potem rozszerzany na tablety i komputery, tak aby tekst, tabele i pola formularzy mieściły się na ekranie także przy powiększonej czcionce. Przyciski, pola i menu są przygotowywane do obsługi samą klawiaturą, z widocznym fokusem, który pokazuje, gdzie aktualnie jesteś.

Praca po stronie backendu obejmuje usługi w Node.js i Express.js, API REST i GraphQL oraz modele danych w MongoDB. W API REST każdy zasób ma własny adres, a metody HTTP określają, co się z nim dzieje. GraphQL pozwala natomiast klientowi pobrać jednym zapytaniem dokładnie te pola, których potrzebuje. Muhammad Abdullah Awais dobiera jedno lub drugie do tego, jak aplikacja korzysta z danych.

Model danych w MongoDB układa się wokół sposobu, w jaki aplikacja je odczytuje: dokument grupuje to, co pobiera się razem, a indeksy przyspieszają najczęstsze zapytania. Integracja API to łączenie aplikacji z usługami zewnętrznymi, z obsługą ich błędów i limitów zapytań. Serwis EasyToolbox nie potrzebuje własnego backendu, bo wszystkie narzędzia działają w przeglądarce.

Testy automatyczne w Vitest powstają razem z kodem, a nie po nim. Sprawdzają obliczenia na wartościach o znanym wyniku, przypadki brzegowe i to, czy tekst strony zgadza się z danymi, z których powstał. Wytyczne WCAG są punktem odniesienia dla dostępności: kontrast, kolejność nagłówków, etykiety pól i działanie z czytnikiem ekranu są brane pod uwagę od pierwszej wersji, a nie poprawiane na końcu.

Wydajność i SEO także należą do projektu od początku: lekkie strony, czcionki ładowane z własnej domeny serwisu, poprawne nagłówki, adresy kanoniczne i dane strukturalne. Kod tego serwisu jest prowadzony w Git na GitHubie, gdzie każda zmiana ma swój opis i historię.

Serwis to statyczna, wielojęzyczna aplikacja Next.js, w której każde narzędzie jest jednym folderem z danymi, logiką, testami i siedmioma własnymi stronami językowymi.

• Next.js z App Routerem, każda strona generowana statycznie z wyprzedzeniem
• TypeScript w całym kodzie, a treści sprawdzane względem schematu podczas budowania
• Siedem języków, każdy z własnymi adresami URL, linkami hreflang i danymi strukturalnymi
• Automatyczne testy w Vitest dla każdego wzoru przed każdą wersją
• Narzędzia działające w przeglądarce, więc nic z tego, co wpisuje odwiedzający, nie trafia na serwer

W sprawie projektu webowego lub uwag do dowolnego narzędzia w serwisie napisz na adres [email protected]. Portfolio pod adresem www.abdullahawais.com pokazuje kolejne projekty, a profile na tej stronie prowadzą do kodu na GitHubie i aktualności zawodowych na LinkedInie.