Firebase-RealtimeDatabase & Self-assesment

Hi!, its been a wild month, jumping all over the places, future me reading!, keep your composure. Coming to other things, I’ve been doing work from home for the past year, but recently (the past 3 months) I was asked to come office atleast a week or two. Although some of my friends are still doing WFM, I had to go chennai, Which I felt was bad, but this is not a major consern.

Time Management upuntill now

I’ve been managing three different workflows in my life(tech side),

• office
• hobbies (this is where I maintain my public journal, posting here )
• learning new stuff

Which often makes me wana take a break from everything(like the one I’m about to take, 20-30 days), after an assesment that I made myself, I’ve decided its not good for me to continue this way, I am juggling too much things at once.

Time management going forward

• office
• hobbies & learning new stuff (combining hobbies and learning new stuff as a public journal)

Due to the said change, The jorunal will now contain

• Scrum of hobby & learning projects.
• where did I spent my time (on tech)each month.
• Reverse engineering/Modding/Programming/Competitions.

Things I have completed in this month in my freetime.

• design & implement searching/adding friends in an RN app that I am building.
• create an animation from scratch for RN using RN reanimated.
• restructure RealtimeDatabase to manage follow requests and friends.
• managing firebase rules for differnet roots/refs.
• refactor firebase connection

design and implement searching/adding friends

I took inspiration from twitter and this is how Im panning it out.

creating an animation similar to twitter’s search and trending from scratch.

code link

following the documentation, it was pretty simple to implement.

const translateX = useSharedValue(0);
const scrollHandler = useAnimatedScrollHandler((event) => {
  translateX.value = -event.contentOffset.x;
});
const activeTab = useDerivedValue(() => interpolate(translateX.value, [0, -wWidth / 2], [0, 1], Extrapolate.CLAMP));
const animatedStyle = useAnimatedStyle(() => {
  return {
    transform: [{ translateX: -translateX.value / 2 }],
  };
});

above code handles the animation logic, then incorporating this into our style makes it perfect.

Further tweaking was done just by using the ‘activeTab’ variable. ex: changing color during animation, etc.

restructuring firebase & rules.

structuring

My initial design holds up pretty good since I already had an experience. I only had to design the new data to store in exisiting structure.

my hypothetical design looks like below(for extending existing to add feature friends)

users/user[]

user:{
  ..details,
  friends:friend[]
}

frind{
  status: requeststed/accepted
  friendssince: accpeted date
  userid: from userid in the given list
}

users/friends/frind[]

users-list:{
  user:
  profile:
  email:
}

I avoided creating a new api, & preferred to use workaround in firebase, cuz it would have consumed a lot of my time in backend.

This article was greatly helpful in making decisions

bellow exchange pretty much sums it up.

rules

• any logged in user can access ‘new-ref’
• only owner of the uid can access the uid and its properties

• any logged in user can access another-ref, (this is based on above article)

  "ref":{
    "$uid": {
    	".read": "auth.uid != null && auth.uid == $uid",
    	".write": "auth.uid != null && auth.uid == $uid",
      "new-ref": {
        ".read": "auth.uid != null",
        ".write": "auth.uid != null"
      }
  	}
  },
  "another-ref": {
    ".read": "auth.uid != null",
    ".write": "auth.uid != null"
  }
  
  

Refactoring Firebase

Since the RN app was getting bigger, It was time for refactoring the firebase part.

from /root/Firebase.ts(single file) to following folder strucutre,

Link to code/files

End

I planned to take a break, ill update on it next month. untill then seeya. tc <3.