How to Build a Social Media Feed with Replit

1// Paste this into Replit Agent:
2// Build a social media feed app with Express and PostgreSQL using Drizzle ORM.
3// Schema: profiles (id, user_id unique, username unique, display_name, bio, avatar_url, follower_count default 0, following_count default 0, created_at),
4// posts (id, author_id references profiles, content, image_url, like_count default 0, comment_count default 0, created_at),
5// follows (id, follower_id references profiles, following_id references profiles, created_at, UNIQUE follower_id+following_id),
6// likes (id, post_id references posts, user_id references profiles, created_at, UNIQUE post_id+user_id),
7// comments (id, post_id references posts, author_id references profiles, content, created_at).
8// Add a compound index on posts(author_id, created_at DESC).
9// API routes: GET /api/feed (timeline from followed users, cursor pagination by post ID),
10// GET /api/feed/explore (all recent posts), POST /api/posts, DELETE /api/posts/:id,
11// POST /api/posts/:id/like (toggle), GET /api/posts/:id/comments, POST /api/posts/:id/comments,
12// GET /api/profiles/:username, POST /api/profiles/:id/follow (toggle),
13// GET /api/profiles/:id/followers, GET /api/profiles/:id/following.
14// On first Replit Auth login, auto-create a profile with a generated username.
15// React frontend: two-column layout with main feed and suggested profiles sidebar,
16// post cards with avatar, username, timestamp, content, like button with count, comment icon with count,
17// post composer at the top of feed, profile pages with follower/following counts and post grid.
18// Bind server to 0.0.0.0. Use process.env.DATABASE_URL for DB connection.

1// server/schema.js — key parts to verify
2const { pgTable, serial, text, integer, timestamp, uniqueIndex, index } = require('drizzle-orm/pg-core');
3
4const profiles = pgTable('profiles', {
5  id: serial('id').primaryKey(),
6  userId: text('user_id').notNull().unique(),
7  username: text('username').notNull().unique(),
8  displayName: text('display_name'),
9  bio: text('bio'),
10  avatarUrl: text('avatar_url'),
11  followerCount: integer('follower_count').default(0).notNull(),
12  followingCount: integer('following_count').default(0).notNull(),
13  createdAt: timestamp('created_at').defaultNow().notNull(),
14});
15
16const posts = pgTable('posts', {
17  id: serial('id').primaryKey(),
18  authorId: integer('author_id').references(() => profiles.id).notNull(),
19  content: text('content').notNull(),
20  imageUrl: text('image_url'),
21  likeCount: integer('like_count').default(0).notNull(),
22  commentCount: integer('comment_count').default(0).notNull(),
23  createdAt: timestamp('created_at').defaultNow().notNull(),
24}, (t) => [
25  index('posts_author_created_idx').on(t.authorId, t.createdAt),
26]);
27
28const follows = pgTable('follows', {
29  id: serial('id').primaryKey(),
30  followerId: integer('follower_id').references(() => profiles.id).notNull(),
31  followingId: integer('following_id').references(() => profiles.id).notNull(),
32  createdAt: timestamp('created_at').defaultNow().notNull(),
33}, (t) => [
34  uniqueIndex('follows_pair_idx').on(t.followerId, t.followingId),
35]);

1// server/routes/feed.js
2const express = require('express');
3const { desc, lt, inArray, eq } = require('drizzle-orm');
4const { db } = require('../db');
5const { posts, profiles, follows } = require('../schema');
6
7const router = express.Router();
8
9router.get('/api/feed', async (req, res) => {
10  const userId = req.user?.id;  // from Replit Auth middleware
11  const cursor = req.query.cursor ? parseInt(req.query.cursor) : null;
12  const limit = 20;
13
14  // Get IDs of users this person follows
15  const followedRows = await db.select({ followingId: follows.followingId })
16    .from(follows)
17    .where(eq(follows.followerId, userId));
18
19  const followedIds = followedRows.map(r => r.followingId);
20  if (followedIds.length === 0) {
21    return res.json({ posts: [], nextCursor: null });
22  }
23
24  // Build query with optional cursor
25  let query = db.select()
26    .from(posts)
27    .where(inArray(posts.authorId, followedIds));
28
29  if (cursor) {
30    query = query.where(lt(posts.id, cursor));
31  }
32
33  const results = await query
34    .orderBy(desc(posts.createdAt))
35    .limit(limit + 1);
36
37  const hasMore = results.length > limit;
38  const paginated = hasMore ? results.slice(0, limit) : results;
39  const nextCursor = hasMore ? paginated[paginated.length - 1].id : null;
40
41  res.json({ posts: paginated, nextCursor });
42});
43
44module.exports = router;

1// server/routes/likes.js
2const express = require('express');
3const { and, eq } = require('drizzle-orm');
4const { db } = require('../db');
5const { likes, posts } = require('../schema');
6
7const router = express.Router();
8
9router.post('/api/posts/:id/like', async (req, res) => {
10  const postId = parseInt(req.params.id);
11  const userId = req.user.profileId;  // numeric profile ID from middleware
12
13  // Check if like already exists
14  const existing = await db.select()
15    .from(likes)
16    .where(and(eq(likes.postId, postId), eq(likes.userId, userId)))
17    .limit(1);
18
19  if (existing.length > 0) {
20    // Unlike
21    await db.delete(likes)
22      .where(and(eq(likes.postId, postId), eq(likes.userId, userId)));
23    await db.update(posts)
24      .set({ likeCount: db.sql`like_count - 1` })
25      .where(eq(posts.id, postId));
26    return res.json({ liked: false });
27  }
28
29  // Like
30  await db.insert(likes).values({ postId, userId });
31  await db.update(posts)
32    .set({ likeCount: db.sql`like_count + 1` })
33    .where(eq(posts.id, postId));
34
35  res.json({ liked: true });
36});
37
38module.exports = router;

1// .replit — verify deployment config
2// entrypoint = "server/index.js"
3// [deployment]
4// deploymentTarget = "autoscale"
5// run = "node server/index.js"
6//
7// Also confirm server/index.js binds correctly:
8const PORT = process.env.PORT || 3000;
9app.listen(PORT, '0.0.0.0', () => {
10  console.log(`Social feed server running on port ${PORT}`);
11});