An interactive tool for exploring Arabic linguistic categories based on functional classification rather than form-based grouping.
This project showcases three fundamental Arabic linguistic categories that group objects by their function:
- مَركَبٌ (Markab) - "Everything that is ridden in/on"
- مَسكَنٌ (Maskan) - "Everything that is dwelt in"
- مَضجَعٌ (Maḍjaʿ) - "Everything that is lain upon"
- 🔍 Interactive Category Browser - Switch between the three main categories
- 🎲 Random Item Generator - Discover random items from each category
- 🔎 Search Functionality - Find specific items within categories
- 📚 Verb Conjugations - Learn related Arabic verbs for each category
- 🎨 Beautiful UI - Gradient design with Arabic typography support
Related verbs:
رَكِبَ − يَركَبُ(getting on)نَزَلَ − يَنزِلُ(getting off)ساقَ − يَسُوقُ(driving/riding)رَكَّبَ − يُرَكِّبُ(putting someone on)نَزَّلَ − يُنَزِّلُ(dropping someone off)
Related verbs:
سَكَنَ − يَسكُنُ(dwelling in)أَقامَ − يُقيمُ(staying/residing)نَزَلَ − يَنزِلُ(lodging)
Related verbs:
اضْطَجَعَ − يَضطَجِعُ(lying on side)اسْتَلقَى − يَستَلقِي(lying on back)نَهَضَ − يَنهَضُ(getting up)نامَ − يَنامُ(sleeping)
- Node.js (v14 or higher)
- npm or yarn
git clone https://github.com/yourusername/arabic-categories-explorer
cd arabic-categories-explorer
npm install
npm start- Select a Category: Click on one of the three category buttons at the top
- Browse Items: Scroll through the grid of items in the selected category
- Search: Use the search box to filter items within a category
- Random Discovery: Click "عَيِّنَةٌ جَديدَة" to get a random item
- 🗺️ مَركَب (Blue) - Transportation and mounts
- 📖 مَسكَن (Green) - Housing and shelters
- 🛏️ مَضجَع (Purple) - Beds and resting places
Each category displays its related Arabic verbs with English translations to help understand the functional relationships.
- Items are displayed in a responsive grid
- Click any item to select it as the current random item
- Items are searchable and filterable
- React 18
- Tailwind CSS
- Lucide React Icons
src/
├── components/
│ └── ArabicCategoriesExplorer.jsx
├── data/
│ └── categories.js
├── styles/
│ └── globals.css
└── App.js
const [selectedCategory, setSelectedCategory] = useState('مَركَب');
const [searchTerm, setSearchTerm] = useState('');
const [randomItem, setRandomItem] = useState('');const categories = {
'مَركَب': {
title: 'مَركَبٌ - كُلُّ ما رُكِبَ فيهۥ',
icon: <MapPin className="w-6 h-6" />,
color: 'bg-blue-500',
items: [...],
verbs: {...}
}
// ... other categories
}This tool is based on the Arabic grammatical concept of functional categorization. Unlike English which might group things by physical similarity, Arabic groups items by their function or use case:
- A مَركَب can be anything from a donkey to a spaceship - what matters is that you ride in/on it
- A مَسكَن can be a tent or a palace - what matters is that you dwell in it
- A مَضجَع can be a simple mat or a luxurious bed - what matters is that you lie on it
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
To add a new category:
- Add the category object to the
categoriesconstant - Include appropriate verbs and items
- Add an icon from Lucide React
- Update the documentation
Items should be added to the appropriate category's items array. Consider the functional purpose rather than physical appearance when categorizing.
GNU License - see LICENSE for details
- Based on traditional Arabic grammatical categorization
- Inspired by functional linguistics principles
- UI design influenced by Arabic calligraphy aesthetics
Arabic Text Support: This application requires a font that supports Arabic script. The interface is designed to work with both RTL and LTR text flows.
Browser Compatibility: Modern browsers with ES6+ support recommended.