🏃‍♂️ Oman Athletics Association – National Sports Digital Hub I developed the official digital platform for the Oman Athletics Association, a modern, high-performance web application that serves athletes, coaches, event organizers, and fans across the Sultanate. Built with Next.js 16, React 19, and Turbopack, this site unifies events, competitions, memberships, news, and athlete registrations into a single, accessible, and SEO-optimized experience. 🌐 Live at: https://www.oaa.om/ 🏅 Designed to support the growth of athletics in Oman, this platform empowers users with real-time information, seamless registration, and a professional digital presence. 🚀 Key Features & My Role 🔹 Comprehensive Event & Competition Management Built dynamic pages for upcoming events, training courses, and national competitions, using Server Components to deliver fast-loading, SEO-friendly content. Integrated React Day Picker for intuitive date filtering and calendar navigation. 🔹 Secure Authentication & User Profiles Implemented robust user authentication with NextAuth.js patterns, enabling athletes and members to sign in, manage personal data, view participation history, and register for events securely. 🔹 Membership & Registration System Designed forms for membership applications and competition requests, powered by React Hook Form + Zod for type-safe validation and smooth UX. Submissions are handled via Next Safe Action for secure server-side processing. 🔹 E-Commerce Store Integration Developed a lightweight product store for merchandise and registration fees, featuring cart functionality, currency formatting, and structured checkout flows — all optimized for conversion. 🔹 Type-Safe API Architecture Architected a scalable service-based API layer with dedicated modules for: Events & Calendar News & Announcements Memberships & Forms Competitions & Athletes Each service includes TypeScript types, API routes, and reusable fetchers — ensuring consistency and maintainability. 🔹 Responsive & Accessible UI Used Radix UI primitives and Tailwind CSS to build a fully accessible, mobile-first interface with: Keyboard navigation ✅ Screen reader support ✅ Dark/light mode toggle (via next-themes) 🌓 RTL-ready structure for future Arabic expansion 🔹 Performance from Day One Leveraged Next.js 16 App Router features: Server Components for zero-bundle static content Streaming & Suspense for progressive loading Turbopack for ultra-fast dev builds ⚡ Automatic image, font, and script optimization 🔹 Rich Media & Interactions Enhanced engagement with: Embla Carousel for athlete galleries and event highlights 🖼️ Sonner for elegant toast notifications on form success/failure 🔔 Vaul for mobile-friendly drawer menus and dialogs 📱 💼 Skills Demonstrated Modern Frontend Engineering ⚛️ Built with Next.js 16 + React 19, leveraging Server Actions, React Compiler, and Turbopack for cutting-edge performance and DX. UI/UX with Accessibility First ♿ Used Radix UI for WAI-ARIA compliant components, ensuring full accessibility without sacrificing design freedom. Form Handling & Validation ✅ Combined React Hook Form and Zod for performant, type-safe forms — reducing re-renders and catching errors early. State & Data Flow 🔁 Leveraged Next Safe Action for secure, typed server mutations, avoiding traditional API routes while maintaining clarity. Developer Experience & Tooling 🛠️ Enforced code quality with ESLint, Prettier, Husky, and Commitlint. Used pnpm workspaces for efficient dependency management. Architecture & Scalability 🏗️ Organized the app with clean separation: api/services, components/ui, schemas, hooks — ready for team collaboration and feature scaling. SEO & Internationalization Ready 🔍 Structured metadata, enabled SSR, and prepared the app for multi-language support and RTL layout — critical for regional reach. 🏁 Conclusion The Oman Athletics Association website is more than a digital brochure — it’s a national platform built for impact, connecting athletes, administrators, and fans through technology. This project showcases my ability to build complex, secure, and accessible applications using the latest in React and Next.js tooling — where performance, usability, and scalability are not afterthoughts, but core principles. From server actions to type-safe APIs, accessible components to smooth animations, every detail was crafted to serve real users and elevate Omani sports on the digital stage. 💼🚀