WayzFinder & FadFit | Web Project Case Studies by Sijo Jose

WayzCore Technologies Website

Company website and brand for a Dubai IT firm, designed and built from scratch. Visit Website

Brand identity, design system, front end, back end, SEO and hosting · October to November 2026

Home page of wayzcore.com on a laptop screen: the headline IT that moves your business forward, with the contact details and opening hours beside it

The same page on a phone, with the call, WhatsApp and quote bar fixed to the bottom of the screen

Executive Summary

Wayz Core Technologies is an IT company in Dubai offering web development, web apps, cloud hosting and business email. I handled the whole project: the logo, a design system built from it, the website, the contact form, SEO, hosting and launch. The site is hand-coded HTML, CSS and JavaScript with a PHP contact form, with no framework and no page builder, and the whole site weighs 1.1 MB. I also wrote the Node.js tools that generate the pages, screenshots, share images and social banners.

Pages in the sitemap

1.1 MB

Whole site

4.6 KB

JavaScript

Frameworks or trackers

Social covers made

Brand and Design System

Logo: Designed from scratch in code. A navy wordmark with a green-to-blue ring and a red arrow core, exported as a full kit for light and dark backgrounds, icons and favicons.
Style: Swiss editorial with flat colour. White pages, navy type, thin rules instead of boxes, square corners and no shadows.
Colour from the logo: Each service has its own colour, taken from the three parts of the logo's ring. Every value lives in one file of design tokens.
Contrast: Every colour pair checked against WCAG AA. Body text on white is 11.9:1.
Type: Two self-hosted variable fonts, Archivo for headings and IBM Plex Sans for body text.

Front End and Speed

Core: Hand-written semantic HTML5, CSS custom properties and vanilla JavaScript. The stylesheet is about 32 KB.
Accessible menus: The phone menu traps keyboard focus and closes with Escape. The services mega menu opens on hover and keyboard focus in plain CSS, so it works without JavaScript.
Images: Responsive srcset and sizes. Only the hero loads first; the rest load lazily.
Caching: HTML re-checked on every visit, CSS and JS for a week, images for 30 days, fonts for a year.

SEO

Unique title and description on every page, plus a generated 1200 x 630 share image.
JSON-LD for ProfessionalService (with an OfferCatalog of the 3 services), WebSite, Service, FAQPage and BreadcrumbList.
One address per page: www, /index.html and the second domain all redirect to the clean URL.
When the services went from 7 to 3, every old page was redirected (301) to its closest match, so no links or rankings were lost.

Security and Spam Protection

Security headers, no folder listings, and hidden, backup and settings files blocked at the server.
Contact form protected three ways: a hidden honeypot field, a timing check and a limit of 5 messages per visitor per hour.
The rate limit stores only a SHA-256 hash of the visitor's IP address, never the address itself.
Every field is reduced to one line to block email header injection, and a redirect after sending stops double sends.

Tools I Wrote for the Project

A page generator that builds the pages from data (services, industries, FAQs and photos), with one helper that writes every responsive image, its alt text and its photo credit.
A sync tool that keeps the shared header and footer identical on every page, with a check mode that reports any page that has drifted.
An uploader that sends only the changed files to the host, stops at the first failure and refuses to upload the private form settings.
Screenshot, share-image and social-banner scripts using headless Chrome, plus an audit script for contrast, tap targets, heading order and layout shift.
A careful launch routine: build and test locally, upload only what changed, clear the cache, compare every live file byte for byte, then send one real test message through the form.

Web Project · Current Role

WayzFinder Mortgage Broker Website

Production mortgage-brokerage platform for the UAE market. Visit Website

Executive Summary

WayzFinder is an independent mortgage brokerage's complete digital presence, a 17-page marketing and lead-generation site, a self-service mortgage calculator driven by live interbank rate data, a bilingual AI chat assistant, and the backend systems that turn visitor interest into a managed pipeline of sales leads. Built as a hand-authored, framework-free HTML/CSS/JS frontend on a thin PHP/MySQL API layer, backed by a genuinely production-grade operations layer: two independent GitHub Actions pipelines keep interbank rate data current every business day and deploy every commit to the live server automatically, with redundancy engineered into every step.

Also Managing WayzFinder's Instagram

Beyond building the website, I run WayzFinder's Instagram presence end-to-end, content planning, posting, and audience engagement for the brand.

@wayzfinder

HTML Pages

PHP Files

~26.5K

Lines of Code

Lead Sources Unified

CI/CD Pipelines

Frontend Architecture

Core: Hand-authored HTML5, CSS3, vanilla JavaScript, no framework, no bundler, no build step.
Design system: Custom emerald/gold palette with a "liquid glass" glassmorphism token set; fluid typography via CSS clamp().
Live data: Sticky auto-scrolling EIBOR interbank rate ticker, refreshed daily by CI with static fallback values baked in.
Accessibility: Semantic HTML, full ARIA labelling, and site-wide prefers-reduced-motion support.

Backend Architecture

Server: Hostinger, PHP (PDO) + MySQL, 16 single-purpose endpoint/library files.
Lead pipeline: One unified leads table merging 6 intake sources into a single admin dashboard.
Notifications: Every new lead triggers an authenticated SMTP email and a WhatsApp Business API alert.
Documents: Branded amortization-schedule PDFs generated and emailed on demand.

Bilingual AI Chatbot

Claude-powered assistant, English/Arabic aware with automatic RTL rendering.
Grounded in live rate data and curated FAQ content, never a hallucinated number.
Tool-based lead capture that writes straight into the CRM.
Per-IP and site-wide daily message caps to keep API cost bounded.

Automated CI/CD

Two independent GitHub Actions pipelines: rate refresh and deployment.
Rate scraper drives a real headless browser past a government WAF, 6×/day with an external cron backup.
Deploys via rsync over SSH within ~2 minutes of every commit, with a 30-minute safety-net re-run.

Engineering Challenges Solved

FTP deploys reporting success while silently failing, switched to rsync over SSH, which diffs directly against the real remote filesystem instead of trusting a cached transfer state.
A scheduled bot's own commits never triggering deployment, GitHub's anti-recursion protection was silently blocking it; fixed by explicitly re-dispatching the deploy workflow via the API.
A government rate page blocking every scripted request, drove an actual headless browser (Playwright) so the fetch is indistinguishable from a real visitor's.
The host's image optimizer silently corrupting an animated PNG, served it under a .apng extension so the optimizer no longer touches it.

Featured Project

FadFit E-Commerce Platform

Custom-built Gen-Z streetwear platform with seamless SPA routing. Visit Website

Executive Summary

FadFit is a custom-built, high-performance e-commerce web application designed specifically for the Gen-Z streetwear market in India. The platform has been engineered to deliver a seamless, "app-like" user experience without the need for page reloads. It features a sleek "dark mode" aesthetic, complete with dynamic product loading, secure user authentication, interactive profile management, and an integrated PayPal checkout system.

Frontend Architecture

Core: HTML5, Vanilla JavaScript (ES6), CSS3.
Styling: Tailwind CSS (Dark palette #121212 with Electric Green & Cyber Purple accents).
Routing: Custom SPA hash-routing for instant, zero-reload navigation.
UI/UX: Google Fonts (Space Grotesk, Inter), Phosphor Icons, and Real-time "type-ahead" search.

Backend Architecture

Server: Hostinger, PHP 8+ with custom JSON API endpoints.
Database: MySQL with PDO Prepared Statements to prevent SQL injection.
Security: Secure password hashing and local storage session caching.
Dynamic UI: Categories and IG Feed grids fetched directly from the DB.

Authentication System

Email & Password with functioning secure reset links.
Firebase Mobile Number OTP (Supports IN, UAE, US).
Google OAuth One-Click login.

E-Commerce Features

Dynamic Product Catalog & Interactive PDP.
Customer 5-star Review Engine.
Sliding "Mini Cart" & Full Cart with persistent caching.
Integrated PayPal Smart Buttons (INR to USD conversion).

Profile Management & Scalability

User Profile: Dedicated sliding panel for updating delivery info, custom Base64 profile picture uploads, and an API-driven Gen-Z stock avatar gallery.

Scalability: The vanilla JS and custom API architecture ensures maximum scalability, allowing easy future integration of Admin Dashboards, inventory tracking, and regional payment gateways like Razorpay with minimal friction.