Prophets Family Tree 🌳

An interactive Next.js visualization of the prophets' family tree with multilingual support (Arabic/English) and an elegant, interactive graph interface.

📋 Overview

This project provides a beautiful, interactive visualization of the prophets' family connections using React Flow. Built with Next.js 16, TypeScript, and modern web technologies, it offers:

• Interactive Graph: Click on prophet nodes to explore their stories
• Multilingual Support: Switch between Arabic and English seamlessly
• Dark/Light Mode: Built-in theme switcher
• Responsive Design: Works on desktop and mobile devices
• Rich Information: Stories, miracles, verses, and historical details for each prophet

✨ Features

• 🎨 Beautiful interactive node graph visualization
• 🌍 Arabic and English language support
• 🌓 Dark and light theme modes
• 📱 Fully responsive design
• 🔍 Search functionality to find prophets quickly
• 📖 Detailed information sidebar with stories, miracles, and verses
• 🎯 Smooth animations and transitions
• ♿ Accessible UI components

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm/yarn/pnpm/bun
• Basic knowledge of Next.js and React

Installation

1. Clone the repository

   git clone https://github.com/F-47/Prophets.git
   cd prophets

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser

   Navigate to http://localhost:3000

📦 How to Customize the Data

Adding New Prophets

1. Edit services/data.ts

   Add a new prophet entry to the prophetsData object:

   newProphet: {
     id: "newProphet",
     x: 0,                    // X coordinate on the graph
     y: layers["layer5"],     // Y coordinate (layer)
     parentId: "parentProphetId", // Optional: parent prophet ID
     isReference: false,      // Set to true for non-clickable reference nodes
     isFromUlulAzm: false,    // Set to true for Ulul Azm prophets
     moreVerses: false,       // Set to true if prophet has many verses
   }

2. Add Translations

   Edit messages/en.json and messages/ar.json:

   "prophets": {
     "newProphet": {
       "name": "New Prophet",
       "title": "The Prophet Title",
       "period": "Time period",
       "location": "Location",
       "summary": "Brief summary",
       "story": "Detailed story...",
       "miracles": ["Miracle 1", "Miracle 2"],
       "verses": [
         { "surah": "Surah Name", "reference": "1:1" }
       ],
       "arabicName": "الاسم بالعربية"
     }
   }

3. Update Connections

   Connections are automatically generated from parentId in services/data.ts. The services/connections.ts file handles edge creation.

Modifying Graph Layout

• Adjust x and y coordinates in services/data.ts
• Modify step and totalLayers constants in services/data.ts to change layer spacing
• Update layers object for custom layer positions

Styling

• Main styles: app/[locale]/globals.css
• Component styles: Tailwind CSS classes in component files
• Theme colors: Configured via next-themes in layout

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines on:

• Forking the project
• Creating branches
• Adding new prophet data
• Submitting pull requests

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🚀 Deployment on Vercel

The easiest way to deploy this Next.js app is using Vercel:

1. Push your code to GitHub

2. Import your repository on Vercel

   • Go to vercel.com/new
   • Click "Import Project"
   • Select your GitHub repository

3. Deploy

   • Click "Deploy"
   • Your app will be live in minutes!

For more details, see Next.js deployment documentation.

🎯 Demo

Coming soon! A live demo will be available here.

📚 Tech Stack

• Framework: Next.js 16
• Language: TypeScript
• UI Library: React
• Graph Visualization: React Flow
• Internationalization: next-intl
• Styling: Tailwind CSS
• UI Components: Radix UI
• Theme: next-themes

📝 Project Structure

prophets/
├── app/
│   └── [locale]/          # Locale-based routing
│       ├── layout.tsx     # Root layout with providers
│       ├── page.tsx       # Main page component
│       └── globals.css    # Global styles
├── components/            # Reusable React components
│   ├── Sidebar.tsx        # Prophet information sidebar
│   ├── ProphetNode.tsx    # Prophet node component
│   └── ui/                # UI primitives (Radix UI)
├── services/              # Data and business logic
│   ├── data.ts           # Prophets data definitions
│   └── connections.ts    # Graph connections/edges
├── messages/              # Translation files
│   ├── en.json           # English translations
│   └── ar.json           # Arabic translations
├── i18n/                  # Internationalization config
├── lib/                   # Utility functions
└── public/                # Static assets

💡 Tips

• Use the search function (top bar) to quickly find prophets
• Click on prophet nodes to view detailed information
• Toggle controls visibility with the eye icon (right side)
• Switch languages and themes using the header controls
• Legend explains node and edge types

🙏 Acknowledgments

This project was created to help visualize and understand the prophets' family connections in an accessible, interactive way. All information has been carefully researched and verified from multiple reliable sources.

📧 Contact

For questions, suggestions, or feedback, please open an issue on GitHub.

---

Made with ❤️ for educational purposes