Snapgram Saved Posts
Task 🎯
Your goal is to develop a completely functional “Saved Posts” page
Example 🧩
Visit the Figma Design and see how the feature should look like
Resources đź“–
Must Play ❤️‍🔥
I would recommend all of you to play this Flexbox game. This is really your gateway to building high-class responsive websites. If you master flex, you can flex anything!
Of course, that doesn't mean we won’t grid. Luckily, there is another game on that too. Definitely worth a shot. Do try the Grid Garden
Hint đź’ˇ
Stuck somewhere? No worries, we’re here!
Ask yourself —
What is expected (The Output)?
We want a new page where we’ll show the list of all posts saved by the user
What do we need in order to build that?
- A new page
- Post Card and its Grid
- Loader to show the status while doing the fetch
- ….?
Before getting started with the UI, do you see any kind of connection or similarity to what we have to build?
Yes, the complete structure of showing the list of posts is similar to what we did on the Explore page. Same Grid!!
So what are you waiting for? Get started with the UI right away,
- Create a new component inside the
pages
directory - Go to the
App.jsx
and configure the created component with a new route, say,**saved\*\*
. Read the React Router Documentation for more.<Route path='/saved' element={<Saved />} /> - Write the head text with the icon at the top. Do follow the Figma closely for the styles
- Reuse the
GridPostList
component we have created before
Now there are two ways of getting the info we want, i.e., saved posts by the user
-
Create a new hook that’ll call the saved collection and filter out the posts that have the user ID matching the ID of the user we’ll pass using the queries
-
Through the currentUser. Thanks to the Relationship model of Appwrite.
Call the
useGetCurrentUser
hook and console log what kind of data we’re gettingAnd to your surprise, you’ll notice that apart from the user info, we’ll also get the saved posts array.
Now you have the freedom to choose between any of these two. Both will return the same result.
-
New Hook
- Create a new react query hook using the
useQuery
that will handle the call to the Appwrite backendexport const useGetSavedPosts = () => {return useQuery({queryKey: [QUERY_KEYS.GET_RECENT_POSTS],queryFn: getSavedPosts,});}; - Create the function
getSavedPosts
Appwrite API function to fetch the saved posts of a user Again, take it step by step:- Create the function setup with try-catch
- Call the
databases.listDocuments
and pass thedatabaseId
along withsavedCollectionId
as the first two arguments - Now we have to filter this result but using Appwrite Queries. Which one do you think we’ll need?
And that’s it. As usual, you can then call this new hook
useGetSavedPosts
inside the page to get the list of posts.Regarding the second step, it should be a straightforward call to the hook we have already created, i.e.,
useGetCurrentUser
, and then simply mapping it - Create a new react query hook using the
Got it? If you're not familiar with the queries and the Appwrite API, invest some time in understanding them. Keep experimenting and learning, as that's where the true achievement lies 🚀
These challenges or features are more logic-oriented, and there may be other solutions. So take your time, think carefully, develop your logical abilities, and give it a try.
We believe in your capabilities ❤️