Skip to content

aadhish16/VamsaTree

BranchesTags

Repository files navigation

VamsaTree - Family Tree Application

VamsaTree is a modern, full-stack family tree application that helps families preserve and visualize their lineage digitally. Built with React, Firebase, and Tailwind CSS, it provides an intuitive platform for families to connect, share, and maintain their genealogical records.

🌳 Features

Core Features

  • User Authentication - Google Sign-In and Email/Password registration
  • Family Creation - Create new family trees with unique Family IDs
  • Family Management - Join families using Family IDs with admin approval
  • Member Management - Add, edit, and manage family members with detailed information
  • Role-Based Access - Admin, Editor, and Viewer roles with appropriate permissions
  • Interactive Dashboard - View all joined families and recent activities
  • Family Tree Visualization - Interactive family tree display (expandable)
  • User Profile - Manage your profile information

Family Member Details

Each family member record includes:

  • Full Name
  • Gender
  • Date of Birth & Death
  • Family Relationships (Father, Mother, Spouse, Children)
  • Profile Photo
  • Occupation
  • Native Place
  • Personal Notes

Additional Features

  • Unique Family ID - Auto-generated 8-character family IDs (e.g., KMR7421X)
  • Activity History - Track who added/edited family members
  • Mobile Responsive - Works seamlessly on all devices
  • Dark/Light Mode - Toggle between dark and light themes
  • Modern UI - Clean, elegant, and intuitive interface

🛠️ Tech Stack

  • Frontend: React 18 + React Router v6
  • Styling: Tailwind CSS + Custom CSS
  • State Management: Zustand
  • Backend: Firebase
  • Database: Firestore
  • Authentication: Firebase Auth + Google Sign-In
  • Icons: React Icons
  • Visualization: React Flow (ready to integrate)
  • Additional Libraries:
    • Axios for API calls
    • date-fns for date handling
    • QRCode React for QR code generation
    • Framer Motion for animations

📋 Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn
  • Firebase Project (free tier available at https://firebase.google.com)
  • Google OAuth 2.0 credentials

🚀 Getting Started

1. Clone or Create the Project

# If not already done, navigate to your project directory
cd VamsaTree

2. Install Dependencies

npm install

3. Firebase Setup

  1. Create a Firebase Project:

    • Go to Firebase Console
    • Click "Create a new project"
    • Follow the setup steps
    • Enable Firestore Database (Start in test mode for development)
    • Enable Firebase Authentication (Google provider)

  2. Get Firebase Configuration:

    • In Firebase Console, go to Project Settings
    • Copy your config object

  3. Set Environment Variables:

    # Copy example env file
cp .env.example .env

# Edit .env with your Firebase credentials
REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_GOOGLE_CLIENT_ID=your_google_client_id

4. Firestore Database Structure

Create the following collections in Firestore (or they'll be created automatically):

Users Collection:

{
  uid: "user_id",
  name: "User Name",
  email: "user@email.com",
  photoUrl: "url_or_empty",
  joinedFamilies: [
    {
      familyId: "KMR7421X",
      role: "admin|editor|viewer",
      joinedAt: timestamp
    }
  ],
  createdAt: timestamp
}

Families Collection:

{
  familyId: "KMR7421X",
  familyName: "Smith Family",
  description: "Description of family",
  createdBy: "user_id",
  createdAt: timestamp,
  admins: ["user_id1"],
  editors: ["user_id2"],
  viewers: ["user_id3"],
  memberCount: 15
}

Persons Collection:

{
  familyId: "KMR7421X",
  name: "John Smith",
  gender: "male|female|other",
  dob: date,
  dod: date_or_null,
  fatherId: "person_id_or_null",
  motherId: "person_id_or_null",
  spouseId: "person_id_or_null",
  childrenIds: ["person_id1", "person_id2"],
  photoUrl: "url_or_empty",
  occupation: "Occupation",
  nativePlace: "Place Name",
  notes: "Personal notes",
  createdAt: timestamp,
  updatedAt: timestamp
}

JoinRequests Collection:

{
  familyId: "KMR7421X",
  userId: "user_id",
  userName: "User Name",
  userEmail: "user@email.com",
  status: "pending|approved|rejected",
  requestedAt: timestamp,
  respondedAt: timestamp_or_null
}

5. Start Development Server

npm start

The application will open at http://localhost:3000

📁 Project Structure

VamsaTree/
├── src/
│   ├── components/
│   │   ├── common/              # Reusable components (Header, Loading, etc.)
│   │   ├── auth/                # Auth-related components
│   │   ├── family/              # Family management components
│   │   └── tree/                # Tree visualization components
│   ├── pages/                   # Page components
│   ├── services/                # Firebase services
│   ├── store/                   # Zustand stores
│   ├── hooks/                   # Custom React hooks
│   ├── utils/                   # Utility functions
│   ├── styles/                  # Global CSS
│   ├── config/                  # Configuration files
│   ├── App.jsx                  # Main app component
│   └── main.jsx                 # Entry point
├── public/                      # Static files
├── index.html                   # HTML template
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── .env.example

🔐 Security Rules

Set up the following Firestore security rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Users can only read/write their own documents
    match /Users/{userId} {
      allow read: if request.auth.uid == userId;
      allow write: if request.auth.uid == userId;
    }

    // Families can be accessed by authorized members
    match /Families/{document=**} {
      allow read: if request.auth.uid in resource.data.admins || 
                     request.auth.uid in resource.data.editors ||
                     request.auth.uid in resource.data.viewers;
      allow write: if request.auth.uid in resource.data.admins;
    }

    // Persons can be accessed if user is in the family
    match /Persons/{document=**} {
      allow read: if request.auth.uid in get(/databases/$(database)/documents/Families/$(resource.data.familyId)).data.admins ||
                     request.auth.uid in get(/databases/$(database)/documents/Families/$(resource.data.familyId)).data.editors ||
                     request.auth.uid in get(/databases/$(database)/documents/Families/$(resource.data.familyId)).data.viewers;
      allow write: if request.auth.uid in get(/databases/$(database)/documents/Families/$(resource.data.familyId)).data.admins ||
                     request.auth.uid in get(/databases/$(database)/documents/Families/$(resource.data.familyId)).data.editors;
    }

    // Join requests
    match /JoinRequests/{document=**} {
      allow create: if request.auth != null;
      allow read: if request.auth.uid in get(/databases/$(database)/documents/Families/$(resource.data.familyId)).data.admins;
      allow update: if request.auth.uid in get(/databases/$(database)/documents/Families/$(resource.data.familyId)).data.admins;
    }
  }
}

🎯 Usage Guide

Creating a Family

  1. Go to Dashboard
  2. Click "Create New Family"
  3. Enter family name and description
  4. Submit - you'll get a unique Family ID

Inviting Members

  1. Share the Family ID with relatives
  2. They use "Join Family" with the ID
  3. As admin, approve their requests in Admin Panel
  4. Assign roles (Viewer, Editor, Admin)

Adding Family Members

  1. Go to Family Tree
  2. Click "Add Member"
  3. Fill in their information
  4. Link relationships (parents, children, spouse)
  5. Save

Managing Family

  1. Family settings (Admin only)
  2. Manage member roles
  3. View activity history
  4. Export family data

🚀 Deployment

Firebase Hosting

  1. Install Firebase CLI:
npm install -g firebase-tools
  1. Build the project:
npm run build
  1. Deploy:
firebase login
firebase init hosting
firebase deploy

Using Docker (Optional)

Create a Dockerfile:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Build and run:

docker build -t vamsa-tree .
docker run -p 3000:3000 vamsa-tree

📱 Available Scripts

  • npm start - Start development server
  • npm run build - Build for production
  • npm test - Run tests
  • npm run eject - Eject from Create React App (not reversible)

🔄 Future Enhancements

  • Tree visualization with React Flow
  • PDF/Image export functionality
  • QR code sharing
  • Voice notes from family members
  • AI-generated family stories
  • Photo restoration
  • Timeline history
  • Birthday reminders
  • Notifications system
  • Advanced search and filters
  • Multi-language support
  • Mobile app (React Native)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

💬 Support

For support, email aadhishcpat@gmail.com or open an issue in the repository.

🙏 Acknowledgments

  • Firebase for backend infrastructure
  • Tailwind CSS for beautiful styling
  • React community for amazing libraries
  • All contributors and users

Built with ❤️ to preserve family legacy

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages