Stop 22 · Build Portfolio ProjectsProjects · 10/15

Social Media Clone

In short

Feeds, likes, comments and profiles. A social media clone teaches you infinite scroll, nested data and the trick that makes apps feel instant: updating the UI before the server replies.

A feed-based app with posts, likes, comments and profiles — practice for complex nested data, infinite scroll, and optimistic UI updates.

The jaadu pins a colourful note on a busy college notice board.

Think of it like this

The college notice board, but alive

Anyone can pin a notice, others scribble comments and add a tick if they agree. The newest notices go on top, and there are always more below. That's your feed.

Watch it happen

An optimistic like that fails

You

UI state

API

tap like

1/5You tap like on a post. The old posts array is kept as 'before'.

The big ideas

What you need to know

Infinite scroll

Load more posts as the user nears the bottom. Proves you understand pagination and IntersectionObserver.

Optimistic likes

The heart turns red instantly and rolls back if the request fails. Shows you care about feel.

Nested comments

Replies under comments test how you shape and render nested data.

Profiles and auth

How it works

Build plan

1
Auth and profiles
Use a service like Supabase or Firebase to skip writing auth from scratch.
2
Create and list posts
Text and image posts, newest first.
3
Infinite scroll
Cursor-based pagination plus IntersectionObserver.
4
Likes and comments
Optimistic updates with rollback.
5
Follow and polish
Following feed, empty states, deploy.

See it in code

Walk through the code

1async function toggleLike(postId) {2  const before = posts;3 4  // 1. Update the UI right away5  setPosts((prev) => prev.map((p) =>6    p.id === postId7      ? { ...p, liked: !p.liked, likes: p.likes + (p.liked ? -1 : 1) }8      : p9  ));10 11  // 2. Tell the server, and undo if it fails12  const res = await fetch(`/api/posts/${postId}/like`, { method: "POST" });13  if (!res.ok) setPosts(before);14}

1/4Keep a copy of the current posts in case we need to undo.

The user sees the change instantly. If the request fails, the saved copy restores the old state. Libraries like TanStack Query have this pattern built in.

Save yourself the pain