Social feed

Build with Vlak
Studio 03A shared work journal
Tuesday, 8 September

In the studio

7 updates · Work in progress

Studio update

First proofs for the autumn poster series. The heavier paper keeps the black beautifully sharp.

Studio update

Taking the posters outside this afternoon to check the type at a distance. Studio walls only tell you so much.

Studio update

Three directions from yesterday’s print session. I’m leaning toward the second composition.

Studio update

The new batch is ready. Registration looks consistent across all 200 copies.

Studio update

A few sheets from this morning’s press check. The small details survived the first run.

Studio update

Does anyone have a favourite uncoated stock for a folded programme? Looking for something around 120 gsm.

Studio update

Final selection for the foyer. These go up on Friday, just in time for opening night.

Fictional studio · Changes stay in this tabNo connected social account

Browse posts → read comments → view a contributor

View source
About this download

A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

People, posts and comments are sample content. Publishing, likes and follows update local state; there is no account or social network connection.

Installation and base examples

Inside the interface

A studio feed for reviewing work in progress. Large images sit above short updates, with authors and discussion counts close to each post. Comments and contributor profiles open in the same side pane, keeping the feed in view.

Publish a text update, filter contributors, like posts, add comments or follow a profile locally. The people, posts, and comments are fictional sample content.

Watch the 20-second walkthrough

A short walkthrough of the working social feed study.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed

Download the Social feed starter

Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Card groups each post, with Avatar for authors and Button for likes and discussion. Full-width photographs meet the post boundaries.
  • Select and Toggle group filter the feed. Input composes comments and Textarea writes a new post, each with a fixed-height send action.
  • A shared context pane hosts comments, profiles and publishing. Mobile navigation gives each destination a focused screen with Back and restored focus.
  • On mobile, Feed and People sit in bottom navigation. A post opens into a full-width comments screen with a pinned reply field; profiles use the same focused navigation. The feed remains one readable column.