untitled-7989
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
The frontend is a React application that provides an intuitive interface for building family trees.
Main application component that manages the overall state and navigation between form and tree views.
Step-by-step form component that guides users through:
- Adding the first family member
- Adding additional family members with relationships
- Reviewing and completing the family tree
Visualization component that displays the family tree in two modes:
- Tree View: Organized by generations with clickable person cards
- List View: Tabular display of all family members
- Person details: First name, last name, birth year, gender
- Relationship mapping between family members
- Support for various relationship types (parent, child, spouse, sibling, etc.)
- Form validation and error handling
- Generation-based tree layout
- Interactive person cards with hover effects
- Detailed person information panel
- Responsive design for mobile and desktop
- Local storage persistence
- Export functionality (JSON format)
- Reset/clear functionality
- Real-time updates
Uses TailwindCSS for styling with custom CSS for:
- Smooth transitions and hover effects
- Step indicator animations
- Family tree node styling
- Responsive grid layouts