Future X

FutureX — Corporate Innovation & Training Platform

Role: Frontend Developer

Tech Stack: Nuxt 3, Vue 3, TypeScript, Pinia, Nuxt UI v3, VeeValidate + Yup, i18n (Arabic/English), GSAP, AOS, Swiper, SCSS, Google Maps API

Built a full-featured bilingual (Arabic RTL / English LTR) web platform for a corporate innovation and training company, supporting services including consultations, professional certifications, training & qualification programs, skills development, and an e-commerce store.

Architected a scalable, modular frontend using Nuxt 3 with file-based routing, auto-imported composables, a centralized API plugin with token-based authentication and request/response interceptors, and organized service layers for each domain module.

Implemented a complete authentication system with login, registration, OTP verification (email), forgot/reset password flows, remember-me functionality, and route-guarding middleware (auth, guest, verification).

Developed a user profile dashboard with multiple sub-pages: personal data management, email/mobile/password change with OTP verification modals, and sections for tracking enrolled courses, purchased books, earned certificates, and payment history.

Built an e-commerce module with product listing, product details (dynamic slug routing), shopping cart (slide-over modal with backend sync), checkout flow with address management, and a favorites/wishlist system.

Created reusable, theme-consistent UI components by configuring Nuxt UI v3's global design tokens (buttons, inputs, carousels, pagination, accordion, timeline, breadcrumbs, dropdowns, radio groups) via app.config.ts, ensuring brand consistency across the entire application.

Integrated rich animations and micro-interactions using GSAP, AOS (scroll-triggered animations), typing effects triggered by Intersection Observer, particle effects (nuxt-particles), counter animations (vue-countup-v3), and smooth page/layout transitions.

Designed and implemented a responsive multi-section homepage featuring a hero section, about section, statistics counters, expert showcase carousel, contact section, and a join-us form.

Implemented SEO optimization using @nuxtjs/seo, social sharing support, and optimized image delivery (AVIF/WebP formats with quality tuning via @nuxt/image).

Set up form validation schemas using VeeValidate + Yup for auth forms, contact forms, checkout, profile updates, and join-us applications, with per-module schema organization.

Configured Content Security Policy headers and security best practices within Nitro route rules.