FAMTREE
Interactive Family Tree Builder with Role-Based Access Control
The Problem Statement
“Digital genealogy tools are either oversimplified (static family tree forms) or prohibitively complex (desktop genealogy software with steep learning curves). FamTree fills the gap with a web-native interactive family tree builder that enables users to dynamically add, position, and connect family members, assign access roles to collaborators, and upload family photos — all within a modern Next.js application with a TypeScript Express backend. The platform is designed as the collaborative middle ground between a private family archive and a public genealogy database.”
The Architecture Layout
The frontend is a Next.js 15 application (with Turbopack) using React 19, Redux Toolkit for global state management, TailwindCSS for styling, and MUI for component primitives. Tree rendering uses a custom canvas or SVG-based component with Redux-managed node and edge state for dynamic repositioning. The backend is a TypeScript Express server with distinct route modules for auth (JWT + bcrypt + cookie-parser), tree management, and node operations. MongoDB stores tree documents with nested member arrays. Cloudinary handles image uploads via multer-storage-cloudinary. Upstash Redis provides caching and session storage. A cronService module runs scheduled background maintenance jobs. CORS is configured to accept requests only from the configured FRONTEND_URL for production isolation.
Architecture Design Diagram
