Saya ingin membuat aplikasi silsilah keluarga, seperti pohon keluarga
Generated Prompt
## APPLICATION OVERVIEW This project is a web application designed to create a family tree, allowing users to visualize and manage their family history in an interactive and user-friendly manner. Users can add family members, create relationships, and explore their lineage through a clean and minimalist interface. ## CORE FEATURES 1. **Family Member Profiles**: Users can create and edit profiles for each family member, including details such as name, date of birth, and photos. 2. **Relationship Mapping**: Users can define relationships between family members, allowing for a clear visual representation of the family tree. 3. **Interactive Family Tree**: A dynamic, visual family tree that users can navigate, zoom in and out, and click on members for more details. 4. **User Accounts**: Authentication system to allow users to create accounts, save their family trees, and access them from any device. 5. **Collaboration Features**: Options for users to invite family members to contribute to the family tree, allowing for a more comprehensive family history. 6. **Export & Share Options**: Ability to export the family tree as a PDF or image file and share it via social media or email. ## DESIGN SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography. - **Color Mode**: Light theme with dark text on light backgrounds. - **Primary Color**: #1978E5 (accent for buttons, links, highlights). - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements. - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs. - **Layout**: The main layout will feature a header with navigation, a central area for the family tree visualization, and a sidebar for profile management and settings. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux (optional, for managing user authentication and family tree state) ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. 2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and any other necessary libraries (e.g., React Router for navigation). 3. **Create Authentication Flow**: Implement user registration and login functionality using a suitable authentication method. 4. **Design the Layout**: Build out the main components (header, family tree, sidebar) with Tailwind CSS for styling. 5. **Develop Family Member Profiles**: Create forms for adding and editing family member details. 6. **Implement Relationship Mapping**: Create the logic and UI for defining and displaying relationships between family members. 7. **Build Interactive Tree Visualization**: Use a library like d3.js or a similar tool to create an interactive family tree diagram. 8. **Add Export & Share Functionality**: Implement features to export the family tree and share it. ## USER EXPERIENCE Users will have a simple and straightforward experience, beginning with a clean login page. Once logged in, they will be greeted by a minimalist dashboard where they can access their family tree. Adding members and defining relationships will be intuitive, with easy-to-use forms and drag-and-drop functionalities. The family tree will allow users to click on members for details, making navigation seamless. Collaboration features will encourage family engagement, and sharing options will enable users to easily distribute their family histories with relatives. This prompt gives a comprehensive overview and plan for creating a functional web application that meets the user's vision for a family tree application.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
