DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on

State management in Refly codebase - Part 1.0

Inspired by BulletProof React, I applied its codebase architecture concepts to the Refly codebase.

You might be wondering:

  1. What is Refly?

  2. What is state management?

Let’s find out.

What is Refly?

Refly.AI helps non-technical creators automate tasks, produce production-ready content, and earn from what they build — all with natural language and a visual canvas.

How it works?

  1. Build

Tell Copilot what you want to automate — “summarize articles daily”, or “save videos into Notion”. Copilot instantly drafts a full workflow for you.

2. Publish

Once your workflow works the way you want, publish it to the Template Market with one click. Others can run your template — and your work gains visibility across the community.

3. Earn Money

Every time someone runs your published template, you earn credits automatically. Your best workflows become assets — generating value for you while helping others automate their work.

Relfy has a marketplace where you can find community templates.

What is state management?

In the context of frontend development, state management is about how you manage your application’s state. Whether its component specific or application wide, you need to use a common pattern across your codebase to avoid issues like props drilling, lifting state up or worse, causing re-renders too many times.

You can manage a component’s state using hooks like useState that React provides. For the global state management, you want to use libraries like Zustand or server cache state strategy. In the OSS, I found these libraries (Zustand or server cache state strategy) used commonly to manage state.

In this series, you will learn how Refly manages its state. We will find out what libraries Umami uses, how the components and files are structured, how the data flows to manage its state, in the following pages:

  1. https://refly.ai/app/{id}

  2. https://refly.ai/workflow/{id}

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

References:

  1. refly-ai/refly/tree/main

  2. refly-ai/refly/packages/stores/src/stores/sider.ts#L87

  3. alan2207/bulletproof-react/docs/state-management.md

  4. refly.ai/workflow-marketplace/featured

Top comments (0)