Kinship
Next.js family tree web app with an AI assistant, user profiles, and interactive tree visualisation powered by Firebase and Genkit
Kinship
Overview
Kinship is a Next.js family tree web app that helps users build and explore their family connections. It combines interactive tree visualisation, user profiles, and an AI assistant, with a Firebase backend and Genkit-powered AI flows.
Key Features
- Family Tree Visualisation: Interactive family tree rendering for exploring relationships
- User Profiles: Profiles for family members with their details and information
- AI Assistant: Genkit-powered AI assistant for help with family data and queries
- Firebase Backend: Authentication and data storage handled by Firebase
- Validated Forms: Form handling and validation backed by Zod
- Accessible UI: Components built with Radix UI primitives and styled with Tailwind CSS
Technical Stack
- Frontend: Next.js, React, Tailwind CSS, Radix UI
- AI: Genkit
- Backend: Firebase
- Validation: Zod
Architecture
- Frontend: Next.js App Router with React components, Radix UI primitives, and Tailwind CSS styling
- AI Layer: Genkit flows powering the in-app assistant
- Backend: Firebase for authentication and data persistence
- Visualisation: Interactive tree components for rendering family relationships
- Validation: Zod schemas for validating user input
Challenges & Solutions
- Relationship Visualisation: Built interactive tree rendering for family connections
- AI Integration: Wired Genkit flows into the app as an assistant
- Data Handling: Used Firebase for auth and storage with Zod-validated input
Impact & Results
- Family Connection: Helps families maintain and strengthen their connections
- Historical Preservation: Enables preservation of family history and stories
- Educational Value: Provides educational tools for understanding genealogy
- Memory Keeping: Offers platform for documenting and sharing family memories