familytree - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #machine-learning #macos #windows #awesome #cli #vue #awesome-list #security #mcp #openai

familytree

(★ 555)

A minimalist open-source family tree website project.

파일 탐색기

최종 버전 다운로드 (.zip)

- - claude-code-review.yml
  - claude.yml
- .gitignore
- familytree.iml
- modules.xml
- vcs.xml
- family-data.example.json
- family-data.json
- file.svg
- globe.svg
- next.svg
- robots.txt
- vercel.svg
- window.svg
- - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx
- - familyDataWithIds.ts
- - exportManualData.mjs
- - family.ts
- - config.ts
  - constants.ts
  - familyTree.ts
  - search.ts
.env.local.example
.gitignore
CLAUDE.md
dokploy.json
eslint.config.mjs
LICENSE
next.config.ts
package-lock.json
package.json
pnpm-lock.yaml
postcss.config.mjs
README.md
README.zh.md
tsconfig.json

🚀 설치 가이드

1. 코드 내려받기

git clone https://github.com/qiaoshouqing/familytree

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd familytree

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

pnpm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run dev

개발/실행 서버를 켭니다.

yarn dev

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Family Tree

English | [中文](./README.zh.md)

A family tree visualization project built with [Next.js](https://nextjs.org) for displaying and managing your family history and member relationships.

## Demo Website

You can visit [https://familytree.pomodiary.com/](https://familytree.pomodiary.com/) to see an online demonstration of this project.

## Features

- Visual representation of multiple generations of family members
- Relationship connections between family members
- Detailed personal information records
- Optional login authentication mechanism
- Fully customizable interface and data

## Quick Start

### Install Dependencies

```bash
npm install
# or
yarn install
# or
pnpm install
# or
bun install
```

### Configure the Project

1. Copy the environment variable template and configure it:

```bash
cp .env.local.example .env.local
```

2. Set your configurations in the `.env.local` file:

```
# Whether login authentication is required (true/false)
NEXT_PUBLIC_REQUIRE_AUTH=false

# Authentication mode (all: allow all family members, specific: only allow specific names)
AUTH_MODE=specific
# Specific user login name
SPECIFIC_NAME=白景琦

# Surname configuration (for website title, description, and footer)
NEXT_PUBLIC_FAMILY_NAME=白

# Application port configuration
PORT=3000
```

### Add Family Data

1. Create your family data file `family-data.json` in the `config` directory, you can refer to `family-data.example.json` or `family-data.json`.

2. Add your family member information in the following format:

```json
{
  "generations": [
    {
      "title": "First Generation",
      "people": [
        {
          "id": "person-id",
          "name": "Name",
          "info": "Person description",
          "fatherId": "Father's ID",
          "birthYear": 1900,
          "deathYear": 1980
        }
      ]
    }
  ]
}
```

Field descriptions:
- `id`: Unique identifier for each person, used to establish relationships
- `name`: Name
- `info`: Personal description, life summary, etc.
- `fatherId`: Father's ID, used to establish generational relationships
- `birthYear`: Birth year (optional)
- `deathYear`: Death year (optional)

### Run the Project

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Visit [http://localhost:3000](http://localhost:3000) to view your family tree.

## Data Format Details

Family data is stored in JSON format, organized by generations:

- Each generation has a title and a group of people
- Each person includes ID, name, information, and father's ID
- Parent-child relationships are established through `fatherId`
- You can add spouse, children, and other important information in the info field

Example:
```json
{
  "generations": [
    {
      "title": "First Generation",
      "people": [
        {
          "id": "ancestor",
          "name": "Ancestor",
          "info": "Family founder, born in 1850",
          "birthYear": 1850
        }
      ]
    },
    {
      "title": "Second Generation",
      "people": [
        {
          "id": "second-gen-1",
          "name": "First Son",
          "info": "Born in 1880, wife Wang",
          "fatherId": "ancestor",
          "birthYear": 1880,
          "deathYear": 1950
        },
        {
          "id": "second-gen-2",
          "name": "Second Son",
          "info": "Born in 1885, wife Li",
          "fatherId": "ancestor",
          "birthYear": 1885,
          "deathYear": 1960
        }
      ]
    }
  ]
}
```

## Using AI to Generate Family Data

If you have a large amount of family data to organize, you can use AI to help you quickly generate JSON data in the correct format:

1. Prepare your family information text, including names, relationships, and relevant information for each generation
2. Provide the following format guide to AI (such as DeepSeek, ChatGPT, Claude, etc.):

```
Please organize the family information I provide into the following JSON format:
{
  "generations": [
    {
      "title": "Xth Generation",
      "people": [
        {
          "id": "unique-identifier",
          "name": "Name",
          "info": "Detailed information",
          "fatherId": "Father's ID",
          "birthYear": birth year,
          "deathYear": death year
        }
      ]
    }
  ]
}

Requirements:
1. Generate a unique id for each person (such as first-gen-1, second-gen-2, etc.)
2. Correctly set fatherId to establish parent-child relationships
3. Categorize people by generation
4. Include spouse, achievements, etc. in the info field
5. Use birthYear and deathYear to record birth and death years (if available)
6. Ensure the JSON format is valid and can be directly imported into the system
```

3. Copy the AI-generated JSON to the `config/family-data.json` file
4. Check and adjust the generated data to ensure relationships are accurate and the format is correct

This method can quickly convert unstructured family information into the JSON format required by the system, particularly suitable for large amounts of data.

## Customization and Extension

- Adjust the data file in `config/family-data.json` to update family information
- Edit the `.env.local` file to change configuration and authentication methods

## Deployment

It is recommended to deploy your family tree project using the [Vercel platform](https://vercel.com/new):

1. Push your code to GitHub/GitLab/Bitbucket
2. Import your repository on Vercel
3. Set environment variables
4. Deploy

## Related Services

**[FateMaster.AI](https://www.fatemaster.ai)** - AI Chinese astrology website, providing intelligent fortune analysis services.

## Contribution

Pull Requests and Issues are welcome to improve this project.

## License

MIT