SocialOK

A Next.js mock of an X (Twitter) style feed whose posts are generated by xAI's Grok model, with a Grok chat drawer on the side.

Features

• A single-page feed of post cards (name, handle, verified badge, text, time, likes, reposts, replies and views) laid out like an X timeline.
• Topic tabs (Trending, Tech, AI, Crypto, Sports, Science, Politics, Fun). Picking a topic asks Grok for 8 posts on it through the app's API route.
• If the API call fails or returns nothing usable, the feed falls back to a built-in set of sample posts.
• Like and bookmark toggles on each post. These only exist in the page's state and reset when you change topic or reload.
• A chat drawer for talking to Grok, sent through the same API route.
• A desktop sidebar (profile, trending topics, suggested accounts) and a mobile bottom nav bar. The sidebar content is static placeholder data.

Note that the posts are text generated by a language model, not real posts fetched from X. The app does not use the X API, and generated posts may be made up.

Tech stack

• Next.js 16 (App Router), React 19, TypeScript
• Tailwind CSS 4
• xAI chat completions API (grok-3 model), called from a server route

Getting started

Prerequisites

• Node.js and npm
• An xAI API key

Setup

Create .env.local in the project root with:

GROK_API_KEY=

There is no .env.example file. Without this variable the API route returns an error and the feed shows the sample posts.

Run

npm install
npm run dev     # development server at http://localhost:3000
npm run build   # production build
npm run start   # serve the production build
npm run lint

Project structure

src/app/
├── page.tsx            The whole client UI: feed, topic bar, post cards, sidebar, Grok drawer
├── layout.tsx          Root layout and page metadata
├── globals.css         Tailwind import and theme colors
└── api/grok/route.ts   POST endpoint that calls the xAI API ("fetch_tweets" action or chat)
public/                 Static assets

Status

Personal project in an early stage. Most of the UI lives in one file, and profile, follow, search and navigation buttons are not wired up yet.