Inspiration
"Friends!" is more than just a social network visualization tool; it's a journey into understanding connections, both digital and personal. This project was born from a desire to explore how our social circles intersect and evolve, moving beyond simple contact lists to a dynamic, interactive representation of relationships.
The initial spark for "Friends!" came from a fascination with the intricate web of human connections. In an increasingly digital world, our social lives often feel fragmented across various platforms. I wanted to create a single, intuitive space where one could visually grasp their network, see who knows whom, and understand the events that bring people together. The idea was to build a personal, private "social graph" that puts the user in complete control of their data, contrasting with the data-hungry nature of many mainstream social platforms. The elegance of network graphs and the power of data visualization to reveal hidden patterns were strong motivators.
I wanted to easily show good friends, which other friends groups i have.
What it does
It can map your connections and events on an interactive graph.
How we built it
"Friends!" is built on a robust and modern web stack, leveraging the strengths of several key technologies:
Angular (v19): As the primary framework, Angular provided a structured and component-based approach to building the user interface. Its reactive programming capabilities, especially with Signals, were instrumental in managing the complex state of the application, ensuring that changes in data instantly reflected in the UI and the graph.
D3.js (Data-Driven Documents): The heart of the visualization lies with D3.js. This powerful JavaScript library allowed for direct manipulation of the SVG elements that form the network graph. It enabled the creation of dynamic nodes (friends) and links (shared events), with forces and physics simulations that make the graph interactive and visually engaging.
Angular Material: For a consistent and polished user experience, Angular Material was chosen for its rich set of UI components. From toolbars and sidebars to dialogs and form fields, it provided a beautiful and accessible design system that accelerated development and ensured a professional look and feel.
Dexie.js (IndexedDB Wrapper): Data persistence was a critical aspect, but without a backend server, the solution needed to be client-side. Dexie.js, a wrapper for IndexedDB, offered a robust and efficient way to store all friend and event data directly in the user's browser. This choice reinforced the privacy-first approach, as all data remains on the user's device. LocalStorage was also used as a fallback and for settings.
Angular CDK (Component Dev Kit): The drag-and-drop functionality, crucial for managing attendees in events and moving friends around, was implemented using Angular CDK's DragDropModule. This provided a highly customizable and performant solution for interactive elements.
Challenges we ran into
No project is without its hurdles, and "Friends!" presented several interesting challenges:
Integrating D3.js with Angular's Change Detection: This was perhaps the most significant challenge. D3.js often performs direct DOM manipulation, which can conflict with Angular's change detection mechanism. The solution involved carefully managing when D3 updates the SVG and when Angular updates its components, often by wrapping D3 logic within ngAfterViewInit and using effect to trigger D3 updates based on Angular signal changes, while preventing infinite loops.
Optimizing Graph Performance: As the number of friends and events grows, force-directed graphs can become computationally intensive. Optimizing the D3 simulation, managing node and link updates efficiently, and debouncing user interactions were crucial for maintaining a smooth user experience.
Complex Drag-and-Drop Logic: Implementing the drag-and-drop functionality for friends and event attendees, including dragging friends from a list onto an event, dragging attendees between events, and dragging them off to remove them, required careful state management within the DragService to ensure correct behavior and visual feedback.
Mobile-First Design and Overlays: Creating a seamless experience across desktop and mobile devices, especially with the full-screen mobile dialogs and sidebars, involved intricate CSS and Angular component logic to manage visibility, transitions, and prevent body scrolling.
Data Migration and Backward Compatibility: While not explicitly implemented for this version, the thought process around how to handle future data schema changes for locally stored data (e.g., adding new fields to friends or events) was a conceptual challenge that influenced the data service design.
Accomplishments that we're proud of
- Drag and Drop
- Mobile Responsive Design
- Client-Side Privacy
What we learned
Deep Dive into D3.js: While I had some prior exposure to D3, this project pushed me to understand its force-directed graph layouts, custom rendering, and event handling in much greater detail. Integrating D3's imperative nature with Angular's reactive paradigm was a particularly insightful challenge.
Advanced Angular Concepts: I gained a deeper appreciation for Angular's change detection, especially with OnPush strategy, and the power of Signals for fine-grained reactivity. Building complex computed signals for filtering and data aggregation was a key learning.
Client-Side Data Management: Working with IndexedDB via Dexie.js provided valuable experience in designing client-side database schemas, handling asynchronous operations, and ensuring data integrity and persistence without a traditional backend.
Responsive Design with CSS Container Queries: The application heavily relies on responsive design, particularly for the mobile overlay system and the dynamic sizing of graph elements. Exploring and implementing CSS container queries for more granular control over component-level responsiveness was a new and exciting area.
Accessibility (A11y) Considerations: Throughout the development, attention was paid to making the application accessible, from keyboard navigation to screen reader compatibility, ensuring a usable experience for a wider audience.
What's next for Friends!
- Backend for Sync
- Connected Friends Accounts
Log in or sign up for Devpost to join the conversation.