An interactive, responsive family tree application built with React, TypeScript, and Vite. This application visualizes family relationships and allows users to search, view, and safely suggest edits to the family data.
- Interactive Visualization: Zoom, pan, and click on nodes to fluidly navigate the family tree.
- Search Functionality: Quickly find family members by their first or last name.
- Edit Mode: Users can propose additions, edits, or deletions directly from the UI. Submissions are verified via Google reCAPTCHA to prevent spam.
- Responsive Design: Fully optimized for both desktop and mobile viewing with a native app-like full-screen layout.
- Modern Aesthetic: A sleek, dark-themed UI built for comfortable viewing.
- Framework: React + TypeScript
- Build Tool: Vite
- Charting Engine: family-chart (f3)
- Security: Google reCAPTCHA v2
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/akshayxml/ayancheri.git cd ayancheri -
Install dependencies:
npm install
-
Configure Environment Variables (Optional): Create a
.envfile in the root directory if you need to override the default reCAPTCHA site key:VITE_RECAPTCHA_SITE_KEY=your_recaptcha_site_key
Run the local development server with hot-module replacement:
npm run devTo build the application for production:
npm run buildFamily data is managed in src/data.ts. The application expects an array of objects representing individuals, containing their IDs, relationships, names, birthdays, and avatar links.
- Family Data: Switch to "Edit Mode" in the application to securely submit changes or additions to the family tree directly.
- Code: For codebase contributions, please fork the repository and submit a pull request.