Building a Localized Family Tree System with Vibe Coding in 3 Days

Project Background: Why Create a Family Tree App?

Pain Points

Emotional Need: Family memories are a core emotional anchor for Chinese people, yet traditional paper family trees are fragmented and hard to pass down to younger generations, risking the loss of elders’ lives, photos, and stories.
Product Gap: Existing family tree tools are either overly complex, high-barrier, or heavily commercialized, lacking a lightweight, easy-to-use, locally deployable, and privacy-secure family tree tool.
Personal Value: As a product manager, building a complete full-stack project validates the ability to implement “product thinking + AI development” while creating a personal portfolio for transitioning to an AIGC product manager.
Technical Feasibility: The emergence of vibe coding allows non-technical individuals to drive AI development through natural language descriptions, significantly lowering the technical barrier for personal projects.

Product Positioning

A lightweight, locally deployable family tree management tool targeting individual and family users with zero-code barriers and one-click deployment. Key features include:

Member information management, family tree visualization, photo/life record, and local storage of private data.
Core advantages: privacy security (data not stored in the cloud), simplicity of operation, and customizable extensions.

Underlying Architecture Design

As a product manager, I designed a layered architecture with front-end and back-end separation based on product requirements, ensuring the system is extensible, maintainable, and meets long-term iteration needs. The core logic revolves around “product functionality realization”.

Overall Architecture Diagram

Core Functions of Each Layer:

Front-End Layer: React + TypeScript + Vite (the core carrier of user experience)

Technical Selection Logic:

Chose React + TypeScript for component-based development, facilitating future iterations and new features (like family tree visualization and permission management), ensuring type safety to reduce bugs and enhance user experience.
Selected Vite for its fast hot reload, high development efficiency, small package size, and quick local access, aligning with the lightweight product positioning.

Core Product Functions:

Family tree homepage, member list, and search functionality.
Add/edit member forms (name, birth/death years, life descriptions, photo uploads).
Admin login and permission control.

Technical Principle: The front end serves as the “product interface” that users directly interact with, converting user actions (like adding members and searching) into requests sent to the back end, which then renders the returned data into pages for users to visually access family tree information.

Back-End Layer: Flask Python (the core brain of business logic)

Technical Selection Logic:

Chose Flask, a lightweight Python web framework, for its low learning curve and fast development speed, suitable for quickly launching personal projects while supporting future API expansions and service integrations.
The front-end and back-end are completely decoupled, allowing for independent iterations, such as optimizing front-end interfaces or adding back-end features without mutual interference.

Technical Selection Decision: Many suggest Python + Django, but I explicitly ruled out Django during the selection phase. The core reason is that product positioning determines technical boundaries:

Django is a heavyweight enterprise-level framework with built-in ORM, admin backend, user systems, permissions, middleware, and form validation, suitable for medium to large platforms, enterprise management systems, high-concurrency applications, and complex permission systems. However, for a lightweight, locally running, simple family tree tool, it is too heavy, redundant, slow to start, complex to configure, and cumbersome to deploy.

Flask, being a micro-framework, aligns better with the product positioning of flexibility, simplicity, and on-demand plugin integration, making it ideal for:

Personal projects/small tools
Rapid API development
Local deployment with a simple structure

Vibe coding quickly generates and allows easy debugging with a clean structure and small footprint, fully meeting the needs of the family tree project without writing unnecessary code.

Core Product Functions:

Member CRUD (Create, Read, Update, Delete) interfaces.
Family relationship management and data validation (e.g., legality of birth/death years).
File uploads (photos stored in the local uploads folder).
User login authentication and permission control.

Technical Principle: The back end acts as the “central brain” of the product, processing all requests sent from the front end. For example, when a user adds a member, the back end validates the data, stores it in the database, and returns a success result. When a user views the family tree, the back end retrieves data from the database and formats it for the front end, acting as a bridge between the front end and the database.

Data Layer: SQLite Local Database (the core guarantee of data security)

Technical Selection Logic:

Chose SQLite, a lightweight local file-based database, requiring no installation of database services, allowing for one-click deployment, and fully local storage, ensuring user data is completely under their control, addressing the privacy security pain point of family tree data (this is the product’s core competitive advantage).
The data storage structure includes member tables, family relationship tables, and user tables, clearly storing member information, kinship relations, and admin accounts, facilitating future expansions.

Core Product Functions:

Persistent storage of all member information, life details, and photo paths.
Storage of family kinship relations to support family tree visualization.
Storage of admin account passwords to ensure login security.

Technical Principle: The database serves as the product’s “data warehouse”, permanently storing all family tree information added by users in a local database file. Even if the browser is closed or the computer is restarted, the data will not be lost, and local storage ensures data is not leaked, fully meeting family privacy needs.

Deployment Layer: Localhost Deployment

Deployment Logic:

Local deployment: Users need no server; they can start the service on their computer and access it via http://localhost, with all data stored locally, ensuring zero privacy risk.
One-click start: A simple command can start both front-end and back-end services, allowing even non-technical users to quickly get started.

Product Value: This completely resolves the pain points of traditional family tree tools regarding “cloud storage, privacy leakage, and paid usage”, allowing users to fully control their family data, truly realizing “my family, my control”.

Core Technical Principles

Vibe Coding Development Principle

The essence of vibe coding is the closed loop of “product requirements → natural language → AI code generation → product realization”. The core principle includes:

The product manager describes product requirements in natural language (e.g., “I want to create a family tree app with member addition, photo upload, and admin login functions”);
AI automatically generates front-end and back-end code, architecture design, and interface definitions based on the requirements;
The product manager verifies whether the code meets the requirements, optimizes functional details, and adjusts interaction logic from a product perspective;
Ultimately achieving rapid transformation from “product requirements → realizable product”, significantly lowering the technical barrier for product managers, allowing them to directly lead full-stack project development.

Front-End and Back-End Interaction Principles

The front end and back end communicate through RESTful API, with the core interaction process (corresponding to product functions) as follows:

User Action: The user clicks “Add Member”, fills in information, uploads a photo, and clicks “Submit”;
Front-End Request: The front end packages the user’s input (name, birth year, photo file, etc.) into an HTTP request and sends it to the back-end API (e.g., POST /api/members);
Back-End Processing: The back end receives the request, validates the data (e.g., whether the birth year is a number, whether the photo format is correct), stores the data in the SQLite database, and saves the photo in the uploads folder;
Back-End Response: The back end returns a success result (e.g., {“code”:0,“msg”:“Added successfully”}) to the front end;
Front-End Rendering: After receiving the success response, the front end refreshes the member list to display the newly added member, completing a full product interaction.

Core Function Technical Principles

1) Member Information Management

Technical Implementation: The back end designs member CRUD interfaces, with corresponding forms and list pages on the front end;
Product Logic: Meets the user’s core need to “add, edit, and delete family members”, supporting life descriptions and birth/death year records, fully restoring family member information;
Data Validation: The back end validates input data for legality (e.g., birth year cannot be later than death year) to avoid invalid data entry and enhance product experience.

2) Photo Upload Function

Technical Implementation: The back end designs file upload interfaces, with the front end implementing file selection and upload components, storing photos in the local uploads folder and saving photo paths in the database;
Product Logic: Meets the emotional need to “add photos for family members”, making the family tree more vivid and warm;
Risk Control Logic: Limits photo formats (only supports common formats like jpg, png) and sizes to prevent malicious file uploads and ensure system security.

3) Admin Login and Permission Control

Technical Implementation: The back end designs user authentication interfaces, using session management to control login status, allowing only admin accounts to add/edit members;
Product Logic: Ensures the security of family tree data, preventing unauthorized personnel from modifying family information and ensuring the authority of family tree data;
Security Logic: Passwords are stored encrypted (not in plaintext) to prevent password leakage and enhance system security.

Project Directory Structure (Product Perspective Interpretation)

Back-End Directory

The back-end directory is designed around “business logic + data storage”, with routes.py being the core where all product functions (adding members, uploading photos, logging in) correspond to API interfaces. The instance stores core family tree data, and uploads store photos, ensuring data security.

Front-End Directory

The front-end directory is designed around “user interaction + page display”, with src being the core that includes all pages and components, ensuring the interactive experience of the product interface. The package.json defines front-end dependencies, ensuring the project can be installed and started with one click.

Product Function Design (Core Realization, Corresponding to Demand Pain Points)

Core Product Functions (User Perspective)

Core Interaction Process (Product Perspective)

Start Service: Users start the front-end and back-end services via simple commands and open the browser to access http://localhost;
Admin Login: Input username and password to log into the family tree system;
Add Member: Click “Add Member”, fill in information, upload a photo, and click “Add” to complete member entry;
View Family Tree: View all members on the homepage and quickly search for target members using the search box;
Edit/Delete Members: Admins can edit member information and delete members to maintain family tree data.

Vibe Coding Development Full Process

As a product manager, I led the project development throughout, with the core process as follows, suitable for those looking to undertake personal projects:

Requirement Breakdown (Core Product Action)

First, break down the vague requirement of “creating a family tree app” into a realizable product requirement list:

Core functions: member management, photo upload, login permissions, local storage;
Non-functional requirements: lightweight, easy deployment, privacy security, simple operation;
Technical requirements: front-end and back-end separation, Flask + React, vibe coding development.

Architecture Design

Based on the requirements, design a layered architecture with front-end and back-end separation, determining the technical selection (Flask + React + SQLite) to ensure the architecture meets both initial and long-term iteration needs.

Natural Language Driven AI Development

Describe requirements to AI in natural language, such as “Help me use Flask for the back end, React + TypeScript + Vite for the front end, to develop a family tree app that supports adding members, uploading photos, admin login, and local data storage,” allowing AI to automatically generate front-end and back-end code, directory structure, and interface definitions.

Product Verification and Optimization

After AI generates the code, I verify it from a product perspective:

Does the functionality meet the requirements: Does it satisfy core functions like adding members and uploading photos?
Is the interaction reasonable: Are form designs, button placements, and prompts user-friendly?
Is the experience smooth: Are page load speeds and operation feedback timely?
Are risks controllable: Are privacy security, data validation, and permission control adequate?

Debugging and Realization

Fix bugs in the AI-generated code, optimize interaction details, complete front-end and back-end integration, and ultimately realize a locally deployable, fully functional family tree app.

Project Realization Effects and Product Review

Realization Effects

Development Cycle: 3 days, from requirements to realization, entirely driven by vibe coding and led by the product manager;
Functionality Completeness: 100% realization of core functions, supporting member management, photo uploads, login permissions, and local storage;
Deployment Difficulty: Zero technical barriers, one-click start, allowing ordinary users to quickly get started;
Privacy Security: Data is entirely stored locally, with zero risk of cloud leakage, meeting family data privacy needs;
Scalability: The architecture supports future iterations, allowing for the addition of family tree visualization, kinship management, PDF export, and more.

Product Review

Product Thinking is Core: Vibe coding is just a tool; the core value of a product manager lies in “requirement breakdown, architecture design, experience optimization, and risk control”. Without product thinking, AI-generated code is merely a collection of useless functions;
Technical Selection Must Align with Product: Choosing Flask + React + SQLite is not due to the technology being the most advanced, but because it best fits the product positioning of “lightweight, local deployment, and privacy security”;
Vibe Coding Empowers Product Managers: AI significantly lowers the technical barrier, enabling product managers to directly lead full-stack project development, transforming from “demand proposers” to “product realizers”, enhancing personal core competitiveness;
Privacy Security is the Core Competitive Advantage of the Product: The core pain point of the family tree product is privacy, with local storage and permission control being the product’s essential moat, which must be prioritized;
Continuous Iteration is the Lifeblood of the Product: The project is not a one-time realization; future iterations can be based on user feedback, adding features like family tree visualization, kinship diagrams, multi-user permissions, and family tree exports, continuously enhancing product value.

Version Iteration Planning (Product Perspective, Aligning with Long-Term Development)

Short-Term Iteration (1-2 Months, V1.1 Version)

Iteration Goals: Optimize user experience and improve core functions;

Core Actions:

Add family tree visualization to intuitively display kinship relations;
Optimize member search functionality to support multi-dimensional searches by name, relationship, and birth year;
Add member relationship management to support adding parents, spouses, and children.

Product Value: Enhances the intuitiveness and usability of the family tree, improving core functions.

Mid-Term Iteration (3-6 Months, V1.2 Version)

Iteration Goals: Expand functional scenarios and enhance product value;

Core Actions:

Add multi-user permission management to support tiered permissions for family members (e.g., admin, regular member);
Add family tree export functionality to support exporting to PDF and Excel for printing physical family trees;
Add family chronicle and family story modules to fully preserve family memories;
Optimize deployment processes to support one-click packaging and cross-platform deployment (Windows/Mac).

Product Value: Expands product usage scenarios to meet the collaborative needs of multiple family members, enhancing product practicality.

Long-Term Iteration (6-12 Months, V2.0 Version)

Iteration Goals: Intelligent and personalized, creating a family memory ecosystem;

Core Actions:

Introduce AI functions to support automatic generation of member biographies and family stories;
Add family album and family video modules to fully preserve family multimedia memories;
Support optional cloud synchronization to meet multi-device access needs while ensuring privacy;
Create family social functions to support online interaction and messaging among family members.

Product Value: Upgrades from a “family tree tool” to a “family memory ecosystem platform”, enhancing long-term product competitiveness.

Conclusion

As a product manager, I firmly believe that the core of a product is to solve user needs, while technology is a tool for achieving those needs. The emergence of vibe coding allows product managers to transcend technical barriers, directly turning their product ideas into usable products.

If you also want to undertake personal projects, use AI-assisted development, build a product portfolio, or have an interest in family tree apps, Flask + React full-stack development, or vibe coding, feel free to reach out for discussion! I can share the complete project code, deployment documentation, and PRD requirement documents, and we can explore how product managers can leverage AI for personal growth.