Meteor + React - Social Network with graphic transitions

122 views Asked by At

Context

I'm building a social network based on a parent/children relationship. It looks like a hierarchical pyramidal tree like this : enter image description here

User Interface

Here is a first shot at the user interface :

enter image description here

  • The main part (big white block in the middle) is the user "wall" (as the facebook wall), with some specific fonctionalities.
  • The top home button is a link to the parent user.
  • The bottom buttons are links to children users

Navigation Animations / Transitions

I just discovered Meteor and React and feel now able to make the navigation awesome ! The idea is that when you click on a user button (parent or child), the button becomes the central wall div, a new parent user button appears from the top, old children buttons disappear and new children button appaears from aside. If needed, i'll try to make a gif.

The problem

User buttons and member wall are the same component with different state, "parent'/"current"/"child" with associated css class. Clicking a children button or parent button will change the URL, we will go from "member/iduser1" to "member/iduser2". So the idea is to load the missing components and change the state of the ones already present on the page.

I can pass an array of children ids, the current id and the parent id to the wrapper in order to build the different components, but won't they be completly rebuild ? My goal is just to change their status

0

There are 0 answers