Building secure, bilingual web applications for Qatar-based businesses โ from internal employee tools to client-facing platforms
Attendance Dashboard
Real-time attendance monitoring
Website Homepage
Landing page hero section
Full-Stack Developer, UX-UI Designer
~6 weeks combined
Web (Mobile-First)
HTML/CSS/JS, Firebase, PHP, MySQL, Figma
This case study covers two distinct web projects I developed for Qatar-based businesses. While serving different purposes โ one internal, one external โ both share common challenges: bilingual support (English/Arabic), security requirements, and the need for mobile-responsive design that works for users with varying technical comfort levels.
Together, they demonstrate my range as a developer: from building internal tools that solve day-to-day operational problems, to creating polished client-facing platforms that represent a company's brand.
An internal employee attendance management solution with GPS verification, ensuring employees are physically present when clocking in.
A professional bilingual website for a Investor Club, handling startup applications with pitch deck uploads and investor inquiries.
Both projects required full English/Arabic support for Qatar's diverse workforce and audience.
Handling sensitive data โ employee locations, pitch decks โ demanded proper security architecture.
Users access both systems primarily via mobile devices, requiring responsive, touch-friendly interfaces.
Problem Space
A Qatar-based company with 10โ20 employees was struggling with manual attendance tracking. Paper sign-in sheets led to lost records, and there was no way to verify if employees were actually present when they claimed. HR spent hours each week compiling data for payroll.
No location verification
Manual report compilation
No late arrival tracking
English-only system
Key constraint
I wanted a friction-free experience with zero installation or onboarding overhead. They just needed to open a link and check in. That led me to build a streamlined web app instead of a native one, utilizing Firebase for quick authentication and the browser's built-in Geolocation API.
Solution Space
I built a web-based attendance system with GPS verification. Employees check in via their mobile phones, and the system confirms they're within 200 meters of the office before recording their attendance. Late arrivals (after 9:05 AM) are automatically flagged and require a reason.
Simple authentication via Firebase
Must be within office radius to check in
Automatic flagging after 9:05 AM
One-click PDF/CSV export for payroll
Employee Check-In (Mobile)
Simple, touch-friendly attendance check-in interface
200m radius check using Haversine formula. No check-in possible from outside the office.
Full English/Arabic support with language toggle. LTR layout preserved for data tables.
Daily, weekly, monthly PDF reports with company branding. CSV export for payroll systems.
Automatic flagging with mandatory reason capture. Creates accountability without manual tracking.
Firestore onSnapshot listeners for live updates. No manual refresh needed.
Configurable flag to bypass time/location checks during development and QA.
Attendance Data Dashboard
Real-time attendance statistics and employee status overview
Attendance PDF Report
Automatically generated attendance reports ready for export
Admin dashboard providing real-time statistics, detailed attendance records with late status indicators, and downloadable PDF reports for payroll and compliance.
Build Process
The stack was chosen to keep infrastructure minimal while meeting the GPS, bilingual, and reporting requirements. I avoided back-end servers wherever possible โ Firebase handled auth and real-time data, while the Geolocation API and jsPDF ran entirely client-side.
HTML5/CSS3
Frontend
Vanilla JS
No frameworks
Firebase
Auth + Firestore
Geolocation API
GPS Verification
jsPDF
Report Generation
cPanel
Hosting
Problem Space
A Qatar-based Investor Club firm needed a professional digital presence that reflected their unique brand identity rooted in Arabic coffee culture. They required bilingual functionality, secure handling of pitch decks, and a platform that worked equally well for Arabic-speaking founders and international investors.
Unique brand identity needed
Full RTL Arabic support
Secure document handling
What made this hard
RTL Arabic isn't just translating text โ it requires mirroring layouts, reversing directional elements (arrows, alignment), and ensuring typography choices hold up in both scripts. The client's brand was also abstract ("Arabic coffee culture") which needed to translate into concrete visual language.
Solution Space โ Diverge
The design went through multiple iterations based on client feedback, evolving from a busy logo-focused layout to a clean, editorial magazine-style design that better reflected the firm's sophisticated brand.
Iteration 1
Hero with Illustration circles โ rejected as too busy on mobile
Iteration 2
Bold typographic approach with brand colors
Iteration 3
Refined headline to reflect coffee culture story
Final โ
Editorial magazine-style with narrative sections
Solution Space โ Converge
Homepage โ English (LTR)
Left-to-right layout optimized for international audiences
Homepage โ Arabic (RTL)
Full right-to-left support with localized typography
Final bilingual website design featuring seamless language switching, fully mirrored RTL layouts, and a consistent visual identity across English and Arabic versions.
Build Process
Handling sensitive pitch decks and investor information required a multi-layer security approach. Every security claim was personally verified through attempted access.
Database credentials and pitch decks stored in /private directories, completely inaccessible via browser.
Token-based form submission preventing cross-site request forgery attacks.
3 submissions per 10 minutes prevents spam and abuse.
5 failed login attempts = 30-minute IP lockout.
Only PDF/PPT/DOC allowed, max 10MB. Server-side validation.
Server-level blocking of sensitive directories and files.
Rather than maintaining separate HTML files for each language, I built a centralized translation system using a single JavaScript file (translations.js) as the source of truth. This approach ensures consistency and makes updates straightforward.
// translations.js structure
const translations = {
en: {
hero_title: "Brewing Success",
hero_subtitle: "Where tradition...",
nav_startups: "For Startups",
// 100+ more keys...
},
ar: {
hero_title: "ูุตูุน ุงููุฌุงุญ",
hero_subtitle: "ุญูุซ ููุชูู ุงูุชุฑุงุซ...",
nav_startups: "ููุดุฑูุงุช ุงููุงุดุฆุฉ",
// Arabic translations...
}
};
Startup Application Form
Multi-step form for startups to apply and submit key business information
Founder fills application form
CSRF token fetched
Server validates & stores
Pitch deck saved securely
Admin reviews in dashboard
Status: Live & Operational
Status: Production Deployed
Chrome desktop geolocation can be unreliable. Mobile devices are the preferred platform for GPS-dependent features.
For data-heavy bilingual applications, keeping LTR layout while translating content prevents table organization issues.
Centralizing all translations in one JS file ensures consistency and makes updates across languages straightforward.
Every security feature should be personally tested. Attempting to access protected files reveals real vulnerabilities.