Skip to content
Ajit Blogs A working notebook India
AJITBLOGS

Field notes on software, cloud, and the work of shipping.

Build journal / week 7

Build journal: profiles, reactions, and a shared store

User details arrived, a contributor added a masonry listing, and one stubborn layout bug turned out to live in the content styles.

The community app now has a user details view and a reaction strip in the article experience. Both additions were small on the surface, but each one forced a decision about how state should be shared. A screen that looks like a collection of independent boxes usually is not. The interesting work happens in the relationships between them.

A user panel with a narrow job

The details panel presents the information the API makes available and stays out of the way of the article itself. That restraint is deliberate. A profile area can easily become a second application with its own navigation and settings. In this phase, the panel only needed to answer a simple question: who wrote this, and what else have they published?

The reaction strip was more complicated because the API did not offer a complete write path. The component could show the reaction vocabulary, but it could not honestly record a new reaction. That made it a read only display for the time being. A disabled or misleading control would have been worse than an interface that explains its boundary.

A shared store instead of scattered copies

The article detail view needed user information that was also useful to other parts of the page. Duplicating that data in each component would have created several copies of the same truth. A component store gave the feature one place to hold the current user context and one place to update it. The benefit was not just less code. It was a clearer answer to the question of where the data lives.

A contributor added the listings page with a masonry layout. The result was a good reminder that a project becomes more interesting when another person interprets the design. The masonry arrangement gave the listings a different reading rhythm from the article feed, and it was the first contribution to the project from someone outside the original build.

The layout bug was in the content

The article detail column refused to behave inside its grid. Images were sometimes wider than the body, and code samples had the same effect. After spending time on the grid tracks, the real source turned out to be the content styles. A maximum width on images solved the immediate problem. The broader lesson was to check the simplest explanation before building a more complicated layout model.

Notebook note: when a shared piece of state is copied into several components, the copies will eventually disagree. Decide where the truth lives before the next feature arrives.

What came next

The next pass would style the article details more carefully and finish the comments section. The project was also moving toward Nx, which would turn the growing pile of feature code into explicit libraries. The application was no longer only a lesson in Angular. It was becoming a lesson in how a codebase changes when the product starts to feel real.

Reference shelf

Selected external references for going deeper.

Type a title, subject, or phrase. Results appear as you type.

Press Escape to close25 entries indexed