An interactive web application for learning Arabic through stories. This app displays stories in Arabic, allowing users to click on individual words to see their English translations.
- Interactive stories in Arabic with clickable words
- Word translations shown in real-time
- Learned words tracking
- Multiple stories to choose from
- Mobile-responsive design
- Create your own Arabic stories with custom vocabulary
- Select difficulty level and Arabic dialect for your stories
The app is built using:
- Next.js (React framework)
- TypeScript
- Tailwind CSS for styling
- The app displays Arabic text with each word made clickable
- When a user clicks on a word, its translation appears in a popup
- Clicked words are highlighted and added to a "Learned Words" panel
- Users can clear their learned words list or switch between stories
- Node.js 18.x or higher
- npm or yarn
- (Optional) Supabase account for the story creation feature
- Clone this repository
- Install dependencies:
npm install - (Optional) For the story creation feature, copy the
.env.local.examplefile to.env.localand add your Supabase credentials:cp .env.local.example .env.local - Run the development server:
npm run dev - Open http://localhost:3000 in your browser
/src/components- React components/src/data- Story data and translation mappings/src/pages- Next.js pages/src/lib- Utility functions and services/src/styles- CSS modules for styling
To add more built-in stories, edit the stories.ts file in the /src/data directory, following the existing format with parallel Arabic and English content.
Users can create their own stories through the "Create Story" feature, which allows them to:
- Select a difficulty level (simple, easy, normal)
- Choose an Arabic dialect (hijazi, saudi, jordanian, egyptian)
- Enter Arabic vocabulary words they want to include in the story
- Generate a custom story that incorporates those words
User-generated stories are stored in Supabase, and require proper setup of the database as described in the .env.local.example file.
MIT