Interactive Family Tree Web App Development

**Family Tree Website Builder - Developer Instructions**

We are building a dynamic family tree web app that allows family members to interact with their genealogy in an intuitive, visually engaging way. The platform will enable users to explore, expand, and collapse family branches, view family members’ profiles, and contribute to the growing tree by submitting requests for additions. Below are the detailed specifications to guide the development of the site.

### 1. **Family Tree Structure and Navigation**
- **Interactive Family Tree:**
- The tree should display all male and female family members. Female descendants should be displayed in a different color unless they have the same family name (e.g., when cousins marry).
- Users must be able to expand and collapse the tree branches to navigate between family generations and relatives.

- **Card View:**
- Each family member should have a profile card that, when clicked, displays the following:
- Name
- Spouse’s name (if applicable)
- Photo (optimized for size to ensure fast page loading)
- Contact details: social media icons (Facebook, Instagram, LinkedIn, etc.), email, phone number. These should only display if added by the member or admin.

- **Dynamic Profile Management:** Family members can submit requests to add missing family members or descendants. These requests will be reviewed and approved by the admin before being added.

### 2. **User Accounts and Permissions**
- **User Registration and Authentication:**
- Users must create an account with a username and password.
- After registration, users should select the card that represents them in the family tree (e.g., their personal ancestor or relative).
- Once the admin approves their identity, users gain access to the privilege of adding or editing their photos, contact details, and submitting requests to add new family members.

- **Admin Role and Approvals:**
- The admin panel will allow admins to approve or deny requests from family members to add new entries, edit profiles, and manage tree branches.
- Admins can manage permissions and restrict access, including adding a password to view certain parts of the family tree.

### 3. **Admin Panel and Features**
- **Admin Access:**
- The admin panel should allow administrators to:
- Add, edit, or delete family members or branches within the family tree.
- Approve requests from users to add or modify their information.
- Generate family statistics (e.g., total number of family members, male/female ratio, most common family names).
- Set passwords to restrict access to parts of the tree.

- **Statistics:**
- The admin panel should provide a feature that shows family statistics:
- Total family members (males and females).
- Most common female and male names.
- Other relevant data points to provide insight into the family structure.

### 4. **Features for User Interaction**
- **Photo and Contact Info Upload:**
- Users should be able to upload photos and contact information (social media, email, phone). These uploads should be optimized for size to ensure fast website loading times.

- **Request System:**
- Family members can submit requests to add new descendants or relatives. Admins will receive notifications when a new request is submitted, and the admin can approve or deny these requests.

- **Personalized Family Pages:**
- Each family member or branch will have its own dedicated page explaining the family tree, its purpose, and how users can interact with it.
- There should be a thank-you note to contributors for their involvement in building the tree.

### 5. **Mobile and Web App Compatibility**
- **Mobile-First Experience:**
- The website must be optimized for mobile navigation (iPhone and Android), ensuring that users can seamlessly interact with the family tree on smaller screens.
- Family members should be able to navigate, view, and interact with the family tree as efficiently as they would on desktop.

- **Web App Design:**
- The platform should be designed as a responsive web app, ensuring users can access it from any device (desktop, tablet, mobile).
- Design the tree layout and member profiles to scale well across various screen sizes, with special attention to touch interaction on mobile devices.
- The website should be able to support arabic (RTL) and english (LTR)

### 6. **Tree Generation and Visualization**
- **Tree/Branch/Leaf Generator:**
- Include a feature that allows users to request a custom tree or branch. The system should generate a printable version of the family tree (or individual branch) on demand, visually representing the family members within the specified range (ancestor to descendant).
- This generator should allow users to select the scope of the tree (e.g., only immediate descendants, extended family, etc.).

### 7. **Additional Functionalities**
- **Tree Visual Design:**
- The family tree should be visually appealing and easy to navigate, with clear distinctions between male and female family members, color-coded branches, and responsive interaction elements like hover and click actions.
- Family member cards should contain icons for social media, email, and phone, but only appear if the information is available.
- Family news: allows registered family members to share news about their family, and all registered families get notified via email

- **Performance:**
- Ensure that the website’s performance is optimized for speed. This includes image optimization (for photos and profile images) and the use of efficient data storage and retrieval methods.

- **Scalability:**
- As the family grows, the system should be able to handle new branches and generations without performance degradation.

### 8. **Tech Stack and Security**
- **Backend:**
- Use a robust backend to handle user registrations, permissions, tree data, and request approval processes (e.g., Node.js, Django, or Ruby on Rails).
- Ensure secure data storage and retrieval, especially for personal information (photos, emails, social media, etc.).
- Implement secure authentication and data validation systems for new users.

- **Frontend:**
- The frontend should be built using modern web technologies (e.g., React, Angular, or Vue.js) to ensure a dynamic and responsive user interface.
- Ensure smooth animations and transitions for expanding and collapsing the tree branches.

By following these specifications, the developers will create a user-friendly, interactive family tree website that serves as a central hub for the Attar family to connect, share their history, and preserve their legacy.

As the super admin, it will allow me to create a sub-domain with the family name, allow me to set the admin of that family. It will also give me admin access on all sub-domains to be able to fix any problems they might be facing

I added some code that I worked on that wasn't mobile friendly but was an MVP to building the family tree part only. This is an example of an app that has some of the similar features https://awraq.app/