Leda

Notable Features

• Sign in as a guest
• Sign in with Google
• Real-time updates of the home feed
• Chat with friends
• Create, edit and delete posts
• Like and comment on posts
• Send and receive friend requests
• Search for users by their name

Why was this built

I’ve always wanted a way to privately share moments of life with close ones, and this project was the result.

Note: this project was also part of The Odin Project (opens in a new tab)

Real-time updates of the home feed

Implementing this had its challenges, most notably synchronizing the state between the client and server.

The initial implementation had two states, one for posts fetched from the Express server (and posts from the current user) and the other for the Socket.IO (opens in a new tab) ones (to have real-time updates), which wasn’t pleasant to work with.

Diagram: showing the old structure of synchronizing state in Odinbook

As you can see we have two sources of posts, one from the Socket.IO server and the other from the Express (opens in a new tab) server. To get the complete timeline, we need to concatenate them while keeping in mind each post’s publishing date, which could introduce bugs.

But! it does not have to be this way.

Enter Query Invalidation (opens in a new tab)

As the app uses Tanstack Query (opens in a new tab) for its data fetching, switching to Query Invalidation (opens in a new tab) was super easy, we just invalidate the timeline

• If a friend creates a post
• If a friend updates a post
• If a friend deletes a post

The above we would receive from the Socket.IO (opens in a new tab) server

• If the current user creates a post
• If the current user friend updates a post
• If the current user deletes a post

And after the above we invalidate the timeline in onSuccess function of the mutation (opens in a new tab)

Diagram: showing the new structure of synchronizing state in Odinbook

The diagram might look more complex compared to the old one,

but what matters is that there is only one state! (see Single source of truth (opens in a new tab) )

Lessons Learned

One of the most important lessons learned from this project was utilizing Tanstack Query (opens in a new tab) to make custom hooks and use those anywhere in the code to get the data needed.

In addition to that, project structure was also a valuable lesson.