Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based platform designed to help users create and manage a visually appealing family tree. Each family member will have a dedicated page that features a timeline highlighting significant life events, such as places lived, educational achievements, and career milestones. The app will provide a secure online experience, accessible only with a password.

## CORE FEATURES
1. **Family Tree Builder**: An intuitive interface allowing users to easily add family members, define relationships, and organize their family tree visually.
2. **Individual Life Timeline Pages**: Each family member will have a dedicated page displaying a timeline that captures key life events, with user-friendly navigation for easy exploration.
3. **Event Customization**: Users can add specific events such as education, career milestones, and locations, with options for dates and descriptions.
4. **Secure Login**: A password-protected area ensuring that sensitive family information remains private and accessible only to authorized users.
5. **Export/Share Functionality**: Users can export their family tree and individual timelines in PDF format or share them with other users securely.
6. **Mobile Responsiveness**: A fully responsive design that ensures a seamless experience across devices, from desktop to tablet to mobile.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design emphasizes a clean and simple aesthetic with ample white space, allowing content to stand out and enhancing readability.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high contrast for readability and a welcoming interface.
- **Layout**: 
  - The main layout features a sidebar for navigation and a central content area. 
  - The family tree will be displayed in a hierarchical format with collapsible sections for each family member. 
  - Individual life timeline pages will present events on a horizontal axis for easy chronological viewing.
- **Typography**: 
  - Primary Font: 'Inter' for body text, ensuring clarity and modernity.
  - Headings: Bold variations of 'Inter' to establish a clear visual hierarchy (H1, H2, H3).
  - Text sizes will be responsive, adapting to different screen sizes for optimal readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and type-safe application.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design iterations.
- **UI Components**: Utilize shadcn/ui for cohesive and customizable UI elements.
- **State Management**: Use React Context or Zustand for managing user state and data across the application.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any state management libraries needed (e.g., Zustand).
3. **Create Folder Structure**: Organize folders for components, pages, and styles.
4. **Build Navigation**: Implement a sidebar navigation using shadcn/ui components, linking to Family Tree and individual timelines.
5. **Develop Family Tree Component**: Create a component to visualize the family tree structure, allowing for dynamic additions of family members.
6. **Create Timeline Component**: Build a timeline component to display individual life events, implementing horizontal scrolling for events.
7. **Implement Authentication**: Set up a secure login system to protect user data.
8. **Add Export Functionality**: Use libraries like jsPDF to enable PDF exports of the family tree and timelines.
9. **Test Responsiveness**: Ensure all components are responsive and test across various devices.
10. **Deploy Application**: Host the application on a reliable platform with SSL for security.

## USER EXPERIENCE
The user will begin by logging into the application through a clean, minimal login interface. Upon entering, they will be greeted with the family tree view, where they can easily add family members and establish relationships. Clicking on a family member will navigate them to the individual timeline page, where they can scroll through a visually engaging timeline of that member's life events. The design will ensure fluid transitions and responsive layouts, enhancing the overall user experience and making navigation intuitive and enjoyable.