⚽ Salalah Sports Club – Modern Sports Management Platform I developed Salalah Sports Club, a comprehensive digital hub for one of Oman’s most prominent sports teams. This modern web platform brings together events, news, merchandise, memberships, and user accounts into a unified, high-performance experience built with Next.js 16, React 19, and cutting-edge frontend tooling. 🌐 Live at: https://www.salalah-club.com/ 🏆 Designed for fans, players, and administrators alike — this is more than a website; it’s a digital ecosystem for a growing sports community. 🚀 Key Features & My Role 🔹 Comprehensive Content Management Built dynamic sections for news articles, upcoming events, and product store listings, enabling seamless content updates without developer intervention. Used Server Components to optimize loading and SEO. 🔹 User Authentication & Personalization Implemented secure JWT-based authentication using httpOnly cookies and refresh token rotation. Users can sign in, manage favorites, view order history, and access exclusive member benefits. 🔹 Shopping Cart & Favorites System Designed a full-featured cart and wishlist (favorites) system using React Context and TanStack Query, ensuring real-time sync between client and server while maintaining performance. 🔹 Type-Safe API Architecture Created a robust, three-tier API layer: Server-side fetchers (SSR) Authenticated server actions Client-side authenticated requests All services follow a modular pattern with dedicated routes, types, queries, mutations, and server actions — ensuring scalability and maintainability. 🔹 Search, Filters & URL State Integrated nuqs for type-safe URL search parameters, enabling powerful filtering by category, price, date, and status — all preserved in the URL for easy sharing. 🔹 Responsive & Accessible UI Crafted a mobile-first interface using shadcn/ui, Radix UI, and Tailwind CSS, ensuring accessibility, keyboard navigation, and flawless UX across devices. 🔹 Dark Mode & RTL Support Added light/dark theme toggle via next-themes, and full RTL support for Arabic content — making the site inclusive for regional audiences. 🔹 Performance Optimization Leveraged Next.js 16 App Router features like: Automatic code splitting Image optimization Server Actions for mutations React Compiler for automatic optimizations Result: Fast FCP, LCP, and interactivity — optimized for Core Web Vitals. 💼 Skills Demonstrated Modern Frontend Engineering ⚛️ Built with Next.js 16 + React 19, utilizing Server Components, Server Actions, and the latest React compiler for peak performance. UI/UX with Design Systems 🎨 Used shadcn/ui and ReUI to build a consistent, accessible component library. Customized with Tailwind CSS, Lucide, and Remixicon for rich visuals. State & Data Management 🔁 Combined TanStack Query for server-state management with Context API for local state (cart, auth), reducing boilerplate and improving data consistency. Form Handling & Validation ✅ Integrated React Hook Form + Zod for type-safe, performant forms — used in login, signup, and product filters. Authentication & Security 🔐 Implemented secure session flow with JWT, refresh tokens, and httpOnly cookies — protecting user data and preventing XSS attacks. SEO & Internationalization 🔍 Optimized metadata, supported Arabic RTL layout, and ensured SSR for maximum search engine visibility. Developer Experience & Tooling 🛠️ Enforced code quality with ESLint, Prettier, Husky, and Commitlint. Used pnpm, shadcn CLI, and Vite-like DX for rapid development. Architecture & Scalability 🏗️ Structured the app with clean separation: api/, components/, schemas/, services/, and feature-based modules — ready for team collaboration and future expansion. 🏁 Conclusion Salalah Sports Club isn’t just a fan site — it’s a production-ready, scalable web application that demonstrates my ability to build complex, full-featured platforms with modern React practices. From secure authentication to type-safe APIs, performance tuning, and inclusive design, every decision was made with user experience, maintainability, and growth in mind. This project reflects how I blend technical precision with real-world usability — delivering software that works today and scales tomorrow. 💼🚀