I engineered a comprehensive Full-Stack educational management platform designed for Quranic institutes. The system facilitates the entire educational process through three distinct dedicated portals (Admin, Teacher, and Student). The project is currently hosted on my personal server as a live demonstration of complex system architecture. Key Contributions & Features Developed: Smart Student Portal: Automated enrollment and gender-based class separation. Students have access to dynamic weekly schedules, media-rich lesson archives (video and audio), and time-boxed discussion boards. Advanced Anti-Cheat Exam Engine: Built a highly secure exam environment featuring disabled "Inspect Element", real-time auto-saving of answers, forced focus lock (redirects users back if they navigate away or drop connection), and auto-submission upon timeout. Teacher Dashboard & Analytics: Empowered teachers with tools for attendance tracking, lesson scheduling, and a hybrid exam grading system (one-click auto-grading for objective questions and manual grading for written ones). Included a comprehensive analytics dashboard for student performance. Data & Media Optimization: Designed an algorithmic custom user ID generator [role][year][gender][birth_day][sequence]. Implemented a robust image upload system (max 5MB) that automatically crops and converts images to WebP format for optimal storage and rendering speed. Performance & Security Engineering: Leveraged Next.js Server Components heavily for blazing-fast performance, paired with Skeleton loaders for smooth UX. Implemented strict HTTP Security Headers along with JS Nonce for top-tier application security. Live Demo Credentials: Teacher ID: t12345678 Student ID: s12345678 Admin ID: a12345678 Password (All): 12345678

Multilingual Website (Hawari) - Next.js Migration & SEO Optimization I took an existing React template, tailored it into two core pages (Home and About), and fully migrated the project to Next.js. This strategic shift was made to fully leverage advanced Search Engine Optimization (SEO) capabilities and achieve superior web performance. Key Contributions & Features Developed: Next.js Migration: Successfully refactored and transferred the codebase from React to Next.js, ensuring lightning-fast load times and taking advantage of server-side capabilities. Advanced SEO Implementation: Thoroughly configured essential SEO components, including sitemap.xml, robots.txt, and web manifest files, to significantly boost organic search rankings. Strict Security Headers: Implemented robust HTTP security headers to fortify the application and protect against common web vulnerabilities. 4-Language Support: Integrated a complete internationalization (i18n) system using next-intl, seamlessly delivering the website's content in four different languages to cater to a global audience.

I developed "Yemi" (which means "near me" in the Iraqi dialect), a comprehensive mobile classified ads platform designed to provide a browsing and shopping experience similar to the popular Turkish app "Sahibinden." The application has been successfully launched and is currently available on both the Google Play Store and the Apple App Store. Key Contributions & Features Developed: Mobile Development from Scratch: Built the entire application using the Expo framework, ensuring a seamless, modern user interface and high-performance experience across both iOS and Android platforms. Real-time Messaging: Contributed to the development of specific backend components and integrated them to build a real-time user-to-user chat system using Socket.io. Push Notification System: Implemented and managed push notifications to keep users instantly updated regarding their messages and listing activities. UI & Complex Form Management: Utilized modern libraries to build responsive screens and manage complex forms for posting, filtering, and searching listings efficiently.

I developed a comprehensive web platform for Sezerchina, a company specializing in electrical products distribution to retailers and merchants. The Challenge: Sezerchina faced significant operational challenges in managing customer orders. The company relied on sending multiple files back and forth, creating a disorganized and confusing process for both the business and its clients. This manual workflow was inefficient, time-consuming, and hindered scalability. The Solution: I built a professional web platform that transformed their entire ordering process through: Advanced Product Browsing System: Merchants can now easily search and browse products through intuitive categories, catalogs, and brand filters, making product discovery seamless and efficient. Enhanced User Experience (UX): The platform was designed with a user-first approach, providing merchants with all essential information at their fingertips—from detailed service descriptions to contact information—ensuring a smooth and professional experience. Dynamic Content Management: Leveraging Strapi as a Headless CMS, I developed a powerful admin dashboard that empowers the Sezerchina team to add, update, and manage products, categories, and catalogs effortlessly without technical dependencies. High Performance & Professional SEO: Built with Next.js to ensure lightning-fast load times and optimal performance. I implemented SEO best practices with full bilingual support (Arabic and English), significantly improving search engine visibility and organic reach. Impact: This project transformed a complex, manual import process into a streamlined digital experience. The platform improved operational efficiency for Sezerchina, reduced administrative overhead, and elevated customer satisfaction by providing merchants with a modern, professional ordering system.

Sometime ago, I collaborated with two friends on developing a comprehensive web platform. Due to copyright and NDA constraints, I am only sharing a high-level overview and a couple of images that completely respect the project's and owners' privacy. Key Contributions & Features Developed: Role-Based Access Control: Designed and implemented distinct environments for 3 user types: Admin (full permissions), Image Creator, and Regular User. Advanced Image Editor: Leveraged Konva to build an interactive image editing tool. Users can scale, resize, add styled text, and seamlessly export/download their final images. Smart Search Engine: Implemented a robust fuzzy search functionality supporting specific queries—using @ to find specific users and # to search for products associated with particular hashtags. Cloud Storage Migration: Initially integrated Amazon S3 for file storage, and later successfully migrated the system's infrastructure to another storage provider based on evolving project needs.

I developed a comprehensive e-commerce platform for Nasma Hydramist, a company specializing in deodorants and personal care products. The platform was designed to streamline product discovery and provide customers with a seamless shopping experience. The Challenge: The client needed a professional online presence that would showcase their product line effectively while providing customers with detailed information and easy access to purchase options. They also required a system to manage content independently without technical dependencies. The Solution: Advanced Product Discovery: Built an intuitive browsing system with powerful filtering and search capabilities, allowing customers to quickly find products that match their specific needs and preferences. Multi-Language Support: Implemented full internationalization with support for three languages, expanding the brand's reach and accessibility to diverse customer segments. Comprehensive Product Information: Each product page provides complete details, specifications, and direct purchase links, ensuring customers have all the information they need to make informed decisions. Dynamic Content Management: Developed a custom admin dashboard powered by Firebase, enabling the Nasma team to manage products, catalogs, and content updates in real-time without technical assistance. Catalog System: Organized products into structured catalogs for better navigation and product categorization, enhancing the overall user experience. Modern UI/UX: Leveraged Shadcn UI components and Tailwind CSS to create a clean, modern interface that reflects the brand's premium positioning while ensuring fast load times and smooth interactions.