Forem: Marcin

Would you take a bag of cash from a VC or stay bootstrapped?

Marcin — Thu, 15 Jan 2026 14:54:49 +0000

Assume app you are making is a huge success. Everybody's calling to congratulate you and offering to invest. Would you take the money? Why or why not?

Motia: make backend development boring (and that's the point)

Marcin — Wed, 07 Jan 2026 16:15:00 +0000

Most teams stick to the backend framework they already know — until scaling pain hits. I’ll show you Motia patterns that save your future self (you’ll sleep better).

Typical stack (gets painful at scale)

API framework (Express/Nest)
queue/workers (BullMQ/Celery)
cron scheduler
workflow/orchestration
state/cache (Redis)
realtime layer (WebSocket/SSE)
logging/observability glue

With Motia: API routes, background/cron jobs, workflows, events, shared state, and streams — all built in.

What is Motia?

It’s unified, composable, and intelligent by default. At least that’s how they put it in their manifesto. Motia has api routes, durable workflows, background and cron jobs, shared state, and events — the whole package.

Motia flow editor

And if you’re on the fence: Motia lets you build in both TypeScript and Python — under the same backend model. Yes: one framework, two languages.

Defining config object —Motia turns it into an API route.

export const config: ApiRouteConfig = {  
  name: 'HelloStep',  
  type: 'api',  
  path: '/hello',  
  method: 'GET',  
  emits: []  
};  

export const handler: Handlers['HelloStep'] = async (req, { logger }) => {  
  logger.info('Hello endpoint called');  
  return { status: 200, body: { message: 'Hello world!' } };  
};

One more thing: logger produces structured logs and attaches runtime context, which makes debugging way less painful.

Wait, there is more

At the heart of Motia is a single primitive: the step. If you’ve used tools like Inngest or Trigger.dev, the concept will feel familiar. Think of a step as a unit of work — one discrete thing your backend does. A step runs, produces an output, and that output can either be returned or passed into the next step to build a workflow.

Splitting steps

By emitting a topic, you can defer sending emails to another step. This is a common practice: we typically rely on a third-party SMTP provider, and we want the registration flow to feel snappy — without slowing down the endpoint response.

// register.step.ts  

export const config: ApiRouteConfig = {  
  name: 'RegisterStep',  
  type: 'api',  
  path: '/register',  
  method: 'POST',  
  emits: ['email.welcome'],  
  flows: ['emails']  
};  

export const handler: Handlers['RegisterStep'] = async (req, { emit, logger }) => {  
  logger.info('Register started');  

  const { name, email } = req.body  
  // register code  

  await emit({ topic: 'email.welcome', data: { email } });  
  logger.info('Welcome e-mail sent');  

  return { status: 200, body: { message: 'Registered' } };  
};

Keeping state

Motia lets you keep state between steps. This is handy for caching data you’ve already processed (for example, responses from an external API), so you don’t have to recompute or pass it through every step. You can also use state to track progress when multiple asynchronous tasks are running in parallel.

// checkout.step.ts  
import { ApiRouteConfig, Handlers } from 'motia'  

export const config: ApiRouteConfig = {  
  name: 'CheckoutStep',  
  type: 'api',  
  path: '/checkout',  
  method: 'POST',   
  emits: ['checkout.summary'],  
  flows: ['checkout']  
}  

export const handler: Handlers['CheckoutStep'] = async (req, { emit, logger, state }) => {  
  logger.info('Checkout started');  

  const { userId, cart } = req.body  

  // cache cart in state  
  const cart = await state.set('carts', cartId, cart);  

  // we can use 'cart' state in 'checkout.summary'   
  // without explictly passing it here  
  await emit({ topic: 'checkout.summary' });   

  return { status: 201, body: 'Products bought' };  
}  

// summary.step.ts  
export const config: EventConfig = {  
  name: 'CheckoutSummaryEmail',  
  type: 'event',  
  subscribes: ['checkout.summary'],  
  emits: ['email.send'],  
  flows: ['email']  
}  

export const handler: Handlers['CheckoutSummaryEmail'] = async (input, { logger, state, emit }) => {  
  logger.info('E-mail summary started');  

  const cart = await state.get('carts', cartId);  

  // summary code  

  await emit({ topic: 'email.send', data: { cart, template: 'checkout-summary' }})  
}

Under the hood, state is stored as key–value data in a local file by default, but you can switch the state adapter to Redis when you need a shared store.

Durable streaming

When you’re building AI apps, you often want to stream the model output to the user. Motia makes this straightforward with streams. Under the hood, Motia uses websockets to deliver those updates to the client.

Streams need more setup. First we need to install npm install @motiadev/stream-client-react in our project. Then connect project to the server endpoint:

// layout.tsx  
import { MotiaStreamProvider } from '@motiadev/stream-client-react'  

function Layout() {  
  const authToken = useAuthToken() // e.g. from cookies or local storage  

  return (  
    <MotiaStreamProvider address="ws://localhost:3000" authToken={authToken}>  
      <App />  
    </MotiaStreamProvider>  
  )  
}  

// app.tsx  
import { useStreamGroup } from '@motiadev/stream-client-react'  
import { useChatEndpoints, type Message } from './hook/useTodoEndpoints'  

function App() {  
  const { channelId } = useParams();  
  const { sendMessage } = useChatEndpoints()  

  // Subscribe to all messages in the 'channelId' group  
  const { data: messages } = useStreamGroup<Message>({  
    groupId: channelId,  
    streamName: 'chatMessage'   
  })  

  const handleSendMessage = async (message: string) => {  
    await sendMessage(message)  
    // No need to manually update UI - stream does it automatically!  
  }  

  return (  
    <div>  
      <h1>Messages</h1>  
      {messages.map((message) => (  
        <div key={message.id}>{message.message}</div>  
      ))}  
    </div>  
  )  
}

And on the backend, the step needs to look like this to support sending messages.

// chat-messages.stream.ts  
import { StreamConfig } from 'motia'  
import { z } from 'zod'  

export const chatMessageSchema = z.object({  
  id: z.string(),  
  message: z.string(),  
  createdAt: z.string(),  
})  

export type ChatMessage = z.infer<typeof ChatMessageSchema>  

export const config: StreamConfig = {  
  name: 'chatMessage',  
  schema: chatMessageSchema,  
  baseConfig: { storageType: 'default' },  
}  

// send-message.step.ts  
import { ApiRouteConfig, Handlers } from 'motia'  
import { z } from 'zod'  
import { v4 as uuidv4 } from 'uuid'  
import type { ChatMessage } from './chat-messages.stream'  

export const config: ApiRouteConfig = {  
  type: 'api',  
  name: 'SendMessage',  
  method: 'POST',  
  path: '/send-message',  
  bodySchema: z.object({  
    channelId: z.string(),  
    message: z.string(),  
  }),  
  responseSchema: {  
    200: z.object({  
      id: z.string(),  
      message: z.string(),  
      createdAt: z.string(),  
    }),  
    400: z.object({ error: z.string() }),  
  },  
  emits: [],  
}  

export const handler: Handlers['SendMessage'] = async (req, { logger, streams }) => {  
  logger.info('Send message', { body: req.body })  

  const { message, channelId } = req.body  
  const messageId = uuidv4()  

  const newMessage: ChatMessage = {  
    id: messageId,  
    message,  
    createdAt: new Date().toISOString(),  
  }  

  // Store in the 'channelId' group - all clients watching this group see the update!  
  const messageSaved = await streams.chatMessage.set(channelId, messageId, newMessage)  

  logger.info('Message sent successfully', { channelId, messageId })  
  return { status: 200, body: messageSaved }  
}

When we POST a message together with a channelId, the step writes the new message into the chatMessage stream under that channelId group. Any frontend client subscribed to the same channelId group will receive the update automatically.

Security note: if you create a stream like this, any client that knows the channelId can subscribe and listen to messages published to that groupId. Motia handles stream authentication via streamAuth. You can pass an Authorization token either through the Sec-WebSocket-Protocol header or as an authToken query parameter in the URL.

// motia.config.ts  
import type { StreamAuthRequest } from '@motiadev/core'  
import { config } from 'motia'  
import { z } from 'zod'  

const extractAuthToken = (request: StreamAuthRequest): string | undefined => {  
  const protocolHeader = request.headers['sec-websocket-protocol']  
  if (protocolHeader?.includes('Authorization')) {  
    const [, token] = protocolHeader.split(',')  
    if (token) {  
      return token.trim()  
    }  
  }  

  if (!request.url) return undefined  

  try {  
    const url = new URL(request.url, 'http://localhost')  
    return url.searchParams.get('authToken') ?? undefined  
  } catch {  
    return undefined  
  }  
}  

export default config({  
  streamAuth: {  
    contextSchema: z.toJSONSchema(z.object({  
      userId: z.string(),  
      plan: z.enum(['free', 'pro']),  
    })),  
    authenticate: async (request: StreamAuthRequest) => {  
      const token = extractAuthToken(request)  
      if (!token) return null  

      // look up the token in your auth system  
      const session = await mySessionStore.get(token)  
      if (!session) {  
        throw new Error(`Invalid token: ${token}`)  
      }  

      return session  
    },  
  },  
});

and we need to update our chat-messages.stream.ts file with a canAccess function to check whether the current user is allowed to subscribe to that stream (and therefore to that groupId).

// chat-messages.stream.ts  
export const config: StreamConfig = {  
  name: 'chatMessage',  
  schema: ChatMessageSchema,  
  baseConfig: { storageType: 'default' },  
  canAccess: ({ groupId, id, userId }, authContext) => {  
    if (!authContext) return false  

    // only allow users that have access to groupId  
    return isUserHasAccess(groupId, authContext.userId);  
  },  
}

Motia plugins

Motia has a plugin system for extending Workbench (the dashboard UI).It also provides adapters that let you swap or customize core runtime pieces (for example, state or streams). Plugins are split into two groups: official and community.

Official plugins

BullMQ — queues & background processing
Redis — state, scheduling & real-time streams.

Community Plugins

Right now, there’s only one plugin that adds WebSocket support, so the community traction isn’t there yet.

What Motia isn’t?

Motia isn’t battle-tested at scale. It has ~13k GitHub stars and a lively community, but it’s still relatively new. It hasn’t been pushed to its limits across many real-world products.

If you need a proven, enterprise-grade solution with a long track record, don’t choose Motia (yet).

Keep in mind

At the time of writing this Motia is licensed under Elastic License 2.0. Nothing is wrong with that. This means Motia is source-available not open-source — an important distinction if you plan to rely on it long-term. But, it’s totally understandable — big ambitions come with big cost of development.

Wrap-up

Motia’s pitch is simple: make backend work boring by building most common primitives into one model — steps. Instead of gluing together routing, workers, workflows, state, and realtime, you compose them with the same patterns.

In practice, that means:

Events + Steps: to split slow work (email, webhooks) out of the request path
State: to cache results and track progress across async flows
Streams: to push live updates to clients (great for AI chat apps)

Motia is still relatively new, and it’s not battle-tested at massive scale yet. But if you’re tired of stitching tools together, it’s a promising way to keep your backend simple as it grows.

You SHOULD derive your state in React

Marcin — Fri, 28 Nov 2025 20:57:58 +0000

Topic is not new but the more I work this concept is forgotten and rediscovered all over again. Your component can be small and swift, but it becomes doing more and more. Apply now this easy rules and thanks me later.

What is deriving state?

Deriving state is computing value based on the data we already have. This means figuring out a value based on props or state we already have.

Good, deriving value from data

How that differs from setting state?

When you're setting state you manage multiple source of data. This involves syncing the value and state between each other. You doing ping-pong game to reflect user changes into data and data into interface.

Bad, setting value independently

How to derive state in React?

Let’s see how state is usually set and how we can avoid such situation in React.

Sample setting state react code:

// ❌ Bad! Setting state  
function Component(props) {  
  const [values, setValues] = useState(null);  
  const [isOptionalSet, setIsOptionalSet] = useState(null);  

  useEffect(() => {  
    if (!!values.optional) {  
      setIsOptionalSet(true);  
    } else {  
      setIsOptionalSet(false);  
    }  
  }, [values, setIsOptionalSet]);  

  return (  
    <div>  
      <FormComponent onSubmit={(values) => setValues(values)} />  
      {isOptionalSet && (  
        <OptionalFormComponent />  
      )}  
    </div>  
  )  
}

This example can be trivial, but I saw similar examples in codebases I worked on. Example code is checking form values when optional value is present, or not. Then, setting flag to show optional form component. Seems like straightforward code, but beware, it will re-render every time values change.

Above code can be refactored to derive state from values instead of setting new state.

// ✅ Good! Deriving state from values  
function Component(props) {  
  const [values, setValues] = useState(null);  
  const isOptionalSet = !!values?.optional;  

  return (  
    <div>  
      <FormComponent onSubmit={(values) => setValues(values)} />  
      {isOptionalSet && (  
        <OptionalFormComponent />  
      )}  
    </div>  
  )  
}

Much better, simpler without additional re-render when values change. This code derive isOptionalSet from values in rendering phase. Meaning is always up-to-date with values. No need for useEffect to sync state!

Summary

Deriving simplify your code. It’s faster, easier and less error-prone. You should use deriving technique always when possible.

Speed up your React application

Marcin — Mon, 09 Oct 2023 14:38:45 +0000

We are known that React is not focusing on performance. In new React Server Component architecture nobody is talking about re-renders and optimizing client rendering. When everything will be rendered and streamed from the server it doesn’t matter anymore.

But is it true? No, ongoing and mature project won’t switch to RSC for a long time. Maybe even they will never be on RSC architecture. So how to speed up your project?

Million enters the chat

Million is a project that can help you speed up your application. Compiler that will let you gain of performance up to 70%.

How does it work?

It’s wrapping our component in special block() function that is supposed to make rendering this component significantly faster. It’s doing so by optimizing and fine-tuning Virtual DOM. Virtual DOM is responsible for rendering and discovering changes in our application.

Learn more about how is Million working under the hood.

Rules of Blocks

There are some rules that we need to know. Using Million is not plug-n-play. We need to prepare our code — but we can do it incremental. Apply block() to the place where we will benefit from it.

Rules that you need to know:

You must assign block() to variable
You must call block() on function reference rather than JSX element
.map() functions must be switched to use element
You must use deterministic returns — no conditional returns in component
Spreading attributes that are not immutable — this you shouldn’t be doing this at all

Also, Million is not well suited with UI Component libraries. For some projects this will be no-go.

You can see all the rules here. It’s worth noting that these rule can change in the feature. Some of them can be mitigated by using compiler. Speaking of which…

Million’s compiler

For most of the user there is an automatic mode with a compiler that will determine what components should be wrapped in block() function for you.

There are installation instruction for most of the popular frameworks. It supports also RSC clients component if you want extra speed in Next.js new architecture.

Summary

Million.js is great library with little to no installing effort. Every app can benefit from using it. It could be event 70% performance boost. Try it yourself and share your results!

Create up-to-date screenshots of your application

Marcin — Fri, 15 Sep 2023 15:05:35 +0000

Are you interested in making your documentation better? Check the feedback widget for documentation. It’s simple, features rich with well well-crafted dashboard. Control every aspect of customer feedback you want to collect. Flexible and adjustable to your application. Check it out on happyreact.com.

Every product needs to document its features. This will lead us to question. Do we want to add screenshots to our documentation?

Let’s write down the advantages and disadvantages of adding screenshots to our documentation:

Pros

Illustrating application interface
Highlighting important parts
Application showcase

Cons

Misleading outdated screenshots
Processing in external tools (and by designer)

As we see, adding screenshots to docs is time-consuming. We need to make them, process and keep them up-to-date. It’s cumbersome, but there is a solution for that.

Make up-to-date screenshots

Scrshot — lets us create screenshots from our application and make them up-to-date with our application. It’s working both with web and mobile apps. **Also, Scrshot is authentication agnostic—which means we don’t need to worry about what auth we are using. **Working with passwords, magic links, or social auth.

But, there is more — it’s completely free to use.

Scrshot solve docs screenshot issues?

Scrshot is a tool that help you make easier to add screenshot documentation by solving all pain points:

Misleading outdated screenshots

Scrshot is a CLI tool that runs every time your components have changed. This way you always have up-to-date screenshots in your project. Manual/auto single run command at the end of your work and commit generated screenshots.

Processing in external tools (and by designer)

Adding background, rounding corners, changing size — everything is doable using Scrshot config. Non-designers friendly! You can make presets and have every screenshot processed the same way.

How does it work?

Scrshot consists of 3 parts that work together to bring up-to-date screenshots to our application.

First part: CLI

It’s responsible for creating screenshots of our application, processing them, and saving them to our destination. We need to define the scrshot config for CLI to work.

Here is a screenshot that was taken and processed by Scrshot:

Second part: Components

They let us define screenshots as part of a page. Speeding up collecting perfect screenshots by previewing screenshots before taking them. We can highlight elements or hide irrelevant ones to focus the user on what’s important.

For now, we support only React. Yet the plans are to support all the web frameworks and React Native (+ Expo).

Third part: Build

Thanks to build plugins we can get rid of Scrshot components at build time. This way we have full control over what’s in the production build of our application. No need to worry about bloat application bundles with components that are used only for creating docs.

Scrshot supports all major build systems: Webpack, Vite, Rollup, and more. And frameworks: Next and Nuxt.

// next.config.js
const withScrshot = require('@scrshot/build/next')();

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = withScrshot(nextConfig)

How to set up Scrshot in project?

Follow these examples in the scrshot repository to have up-to-date working different applications. You can follow this 4-step guide:

Install dependencies

Install with command below:

npm install @scrshot/cli @scrshot/react @scrshot/build --save-dev

Add scrshot config

// .scrshotrc
{
  "url": "http://localhost:5173",
  "dest": "src/assets",
  "screenshots": {
    "homepage": {
      "path": "/"
    }
  },
}

Remember to change url and dest directory!

Add scrshot components

// 
import { defineCustomElements, ScrshotArea } from '@scrshot/react';


defineCustomElements();

function Component() {
  return (
    <div>
      This won't be on screenshot
      <ScrshotArea>
        <div>This will be on screenshot</div>
      </ScrshotArea>
    </div>
  )
}

Run scrshot command

npm run scrshot dev

You can learn more about how to add output, change size, create screenshot on mobile in scrshot docs.

Summary

You can create up-to-date screenshots for free. This way your documentation will always be paired with the look of the application. It will make your users happy to use your product.

Speaking of which… I’m building a feedback widget for documentation. You can measure how happy your users are and what they think about your app.

Are you happy with your tech stack?

Marcin — Mon, 11 Sep 2023 12:16:16 +0000

Share your opinions about your stacks below ⬇️

What is your biggest achievement in your programming career?

Marcin — Mon, 04 Sep 2023 12:32:59 +0000

Don't be humble. Brag about what you have done!

Are you on Discord communities related to Open-Source libraries?

Marcin — Tue, 29 Aug 2023 12:20:14 +0000

More and more library authors build their community support on discord. Are you using them, and why or why not? Share your favourite communities!

Would you like to work at FAANG?

Marcin — Mon, 28 Aug 2023 11:34:04 +0000

Let's pretend for second you getting opportunity to work at and of this tech giants. Would you to work there? What company would you choose and why?

What career advice would you give yourself from 5 years ago?

Marcin — Fri, 25 Aug 2023 12:08:25 +0000

Let me know what would you warn about? Or what would you do differently? Share your advices 🙏

What was last article you find worth sharing?

Marcin — Tue, 22 Aug 2023 13:53:39 +0000

I love to read some quality articles. Don't hesitate to share your own work.

How many cold emails you send daily?

Marcin — Mon, 21 Aug 2023 12:25:32 +0000

How you manage your cold e-mails? What is your process of sending cold e-mails and how you get people might be interested in your product?