Select AI
A curated directory of AI tools and agents with search, filters saved in the URL, and a monochrome dark/light interface in English and Arabic.
Certificates
Tech Stack :
1 / 2
Project Overview
Select AI is a curated directory of AI tools and agents. Choosing the right tool from thousands of options is overwhelming: existing directories suffer from poor categorization and weak visual hierarchy, forcing users to compare features across scattered sources.
The platform tackles this with structured browsing, filtering and search, and a monochrome interface. The whole interface is available in English and Arabic with a proper RTL layout, while the directory content itself is in English.
I built it on top of next-shadcn-dashboard-starter by Kiranism (MIT License), which provided the shadcn/ui components, the layout shell, the kbar command palette and theme switching. In place of the starter's demo dashboard, kanban and product pages, I built the directory, a new sidebar, the monochrome theme and the home page.
Key Features
- AI tools and agents directory: browse, filter, and search 30 tools and 25 agents
- Explore page and collections: a discovery page and 6 hand-picked collections of tools and agents
- Category pages: 10 tool categories and 10 agent categories, with counts computed from the data
- Grid and table views: sort by name, date, rating or popularity, with rows per page and pagination
- Command palette: keyboard-driven navigation with kbar
- Shareable filters: search, category, pricing and featured-only filters kept in the URL
- Bilingual experience: English and Arabic with automatic RTL layout
- Dark/light mode: system-aware theme switching
Technical Highlights
- Next.js 15 App Router: locale-prefixed routes through next-intl middleware, with client-side filtering over typed data
- Bilingual i18n: 330 translation keys at full parity in English and Arabic, with RTL handling across the layout
- Design system: monochrome black theme with glass morphism, documented as design tokens, built on the starter's shadcn/ui (Radix UI) primitives
- URL-synced state: a custom useUrlState hook keeps page, filters, sort and view in the query string
- Reusable directory UI: one set of filter, sort, grid, table and pagination components shared by the tools and agents pages
- Motion: Framer Motion for the loader, cards, table rows and sidebar switch, plus animated headings with a BlurText component
- Legacy routes: permanent (308) redirects from the old /ai-tools URLs to /tools in every locale
My Contributions
- Turned a dashboard starter into an AI tools directory, replacing its demo pages with the tools, agents, explore and collections sections
- Built the browsing, filtering, sorting and search experience for tools and agents
- Implemented the internationalization layer: English and Arabic messages, locale routing, and RTL
- Rebuilt the sidebar with a tools and agents switch and per-category counts
- Created the monochrome black theme and glass-morphism component styling
- Added permanent redirects for the legacy /ai-tools routes
Challenges & Solutions
Challenge: Making a directory of tools and agents easy to navigate in two languages, without it degrading into endless scrolling.
Solution: Structured categories with filtering, sorting and search, paginated grid and table views, and a custom hook that stores filter state in the URL.
Result: Every filtered view has its own URL in either language, so filters survive navigation and reloads, and the exact view can be shared.
Tech Stack
Frontend: Next.js 15, React 19, TypeScript 5.7, Tailwind CSS 4, Radix UI (shadcn/ui), next-intl, Framer Motion
State & Data: URL search params (custom hook), static TypeScript data
Starter: next-shadcn-dashboard-starter by Kiranism (MIT)
Infrastructure: Vercel
Tools: kbar, ESLint, Prettier, pnpm
Need something like this?Tell me about your project