Project Overview
Select AI is a curated directory of 200+ AI tools. Choosing the right tool from thousands of options is overwhelming — existing directories suffer from poor categorization, weak visual hierarchy, and neglected internationalization, forcing users to compare features across scattered sources.
The platform solves this with structured browsing, advanced filtering and search, and a premium monochrome interface — delivered fully in English and Arabic with proper RTL support.
Beyond the directory itself, the application includes a complete product surface: an analytics dashboard, a drag-and-drop kanban board, a filterable product catalog, and an admin panel.
Key Features
- AI tools directory — browse, filter, and search 200+ tools
- Analytics dashboard — overview with metrics and data visualizations
- Kanban board — drag-and-drop task management
- Product catalog — data table with advanced filtering and sorting
- Command palette — keyboard-driven navigation with kbar
- User profile and admin panel — account management and administrative controls
- Bilingual experience — English and Arabic with automatic RTL layout
- Dark/light mode — system-aware theme switching
Technical Highlights
- Next.js 15 App Router — server components and streaming for fast initial rendering
- Type-safe i18n — fully typed translation keys with locale-based routing and hreflang tags
- Premium design system — monochrome black theme with glass morphism, built on Radix UI primitives for WCAG compliance
- State architecture — TanStack Query for server state, Zustand for client state, nuqs for URL-synced state
- Data-heavy UI — TanStack Table for the catalog, Recharts for visualizations, dnd-kit for the kanban board
- Type-safe forms — React Hook Form with Zod schemas
- Production readiness — Sentry error tracking and SEO-friendly 301 redirects for legacy routes
My Contributions
- Designed and built the entire application, from design system to deployment
- Built the directory browsing, filtering, and search experience for 200+ tools
- Implemented the internationalization layer: typed translations, locale routing, and RTL
- Developed the dashboard, kanban board, and data-table catalog features
- Created the premium black theme and glass-morphism component styling
- Set up production monitoring, error tracking, and SEO redirects
Challenges & Solutions
Challenge: Making a 200+ item directory genuinely navigable — in two languages — without degrading into endless scrolling.
Solution: Structured categories with advanced filtering and search, URL-synced state via nuqs so filtered views are shareable, and TanStack Query caching to keep navigation instant.
Result: Users can reach a relevant tool in a few interactions in either language, with filter state preserved across navigation and reloads.
Tech Stack
Frontend: Next.js 15, React 19, TypeScript 5.7, Tailwind CSS 4, Radix UI (shadcn/ui), Framer Motion, GSAP
State & Data: TanStack Query, Zustand, nuqs, TanStack Table, Recharts, dnd-kit
Forms: React Hook Form, Zod
Infrastructure: Vercel, Sentry
Tools: kbar, ESLint, Prettier, Husky, lint-staged, pnpm
