Sometime's called visions.

I'd know, because I've built other people's ideas while trying to build mine.

Still, this is pretty normal while growing up during the internet's golden age. Most of this generation is proficient enough in multiple skill sets, that executing on an array of ideas would be the most logical course of action. Not only can this introduce alternate streams of income, it also builds the foundation of your brand.

We all look at creating brands as telling a story. But in narcissistic fashion, I rather look at it as building worlds. With entities that include protagonist, antagonist and the environment. An important brand will touch on a multitude of problems. Our favourite brands like Disney, encapsulates companies from resorts to software development studios. But the brilliance is how all these companies interact with each other. The network, a web spun by the parent company — Walt Disney. This can be achieved with choosing a north star. Principles that act as guidelines to ensure consistency.

There's a coined term, "Startup Studio". It's the idea of creating many different entities under the roof of one company. It's very easy to build ideas as they come into your head. Especially when you're a developer. But that's the point of this post. A letter to the universe. To cement my path towards building a studio with all the products intertwined.

The way I've been approaching this concept, while still keeping that dopamine boost of spontaneity, is seeing where I can recycle ideas. I started with an initial principal. I wanted to build products for creators. Many ideas failed, but that's where the recycling comes in to play. A product may not be a market success, but as you break down the idea atom by atom, new ideas are created with the same initial principal. I'm not a rocket scientist, but I believe that's how atoms work.

There is second pillar when it comes to building a product studio. It's the act of creating a system of processes. Since the majority of products being built wont be a success, It's important to be able to fail fast. For me, this meant the following:

• Choose a studio wide framework and coding language

• Create a SaaS starter (1upblitz.com)

• Notion templates

• Reusable React components

• Fully coded landing pages riddled with Lorem Ipsum & email captures

• Marketing tasks for first 100 users

The funny thing is, most of all these processes can be recycled into it's own product. They can all be connected, and leverage each others audience to funnel into more sales.

On a final note, don't get too attached to ideas. You never know what will stick. But it's important to fail, and fail fast. Keep it moving. Recycle. Create an ecosystem. Determine principals and processes and it will make the journey easier for you.

Say this is our User model with the extendedProfile attribute appended at the bottom:

model User {

  id			 Int	   @default(autoincrement()) @id

  createdAt	  DateTime  @default(now())

  updatedAt	  DateTime  @updatedAt

  email		  String	@unique

  hashedPassword String?

  role		   String	@default("user")

  sessions	   Session[]

  extendedProfile Json?

}

We can create a types.ts file and export an ExtendedUser type.

export type ExtendedUser = User & {

  extendedProfile: {

    firstName: string

    lastName: string

}

}

Prisma also comes with some useful methods. Let’s say we’re working with a model that has a relation reference with another model.

For example, if the User model has a one-to-many relation with an Order model.

model User {

  id			 Int	   @default(autoincrement()) @id

  createdAt	  DateTime  @default(now())

  updatedAt	  DateTime  @updatedAt

  email		  String	@unique

  hashedPassword String?

  role		   String	@default("user")

  sessions	   Session[]

  extendedProfile Json?

  orders Order[]

}

model Order {

  id		Int	  @default(autoincrement()) @id

  createdAt DateTime @default(now())

  updatedAt DateTime @updatedAt

  user User @relation(fields: [userId], references: [id])

  userId Int

}

Inside types.ts we can import Prisma and use the GetPayload method it provides. So in our case our ExtendedUser type will look like this:

import { Prisma } from '@prisma/client'

export type ExtendedUser = Prisma.UserGetPayload<{ include: { order: true } }> & {

  extendedProfile: {

    firstName: string

    lastName: string

}

}

GetPayload will always start with the model name. In our case UserGetPayload

So I used a text input, and inside the `onChange` event would pass the `event.target.value` as a parameter to the API url.

It would look something like this (abbreviated for readability):

const searchQueryFunction = (queryText) => {

    const res = await fetch(`/products.json?_page=${page}&_limit=10&_q=${queryText}&_total=50`, {
    method: 'GET',
    headers: {
     'Access-Control-Allow-Origin': '*'
    }
  })

  const responseData = await res.json()

  setItems({items: responseData.data})
}

<input type="text" placeholder="Search..." onChange=((e) => searchQueryFunction(e.target.value)) />

But I quickly found out how taxing this was for the browser and server. As I would search for something like "Minivan", it would query each letter. This is where a debouncer comes in. There are libraries like `lodash` that offer a function, but wanted to keep my `package.json` light.

A debouncer is just a fancy `setTimeout`, so I created a `Debouncer` class that takes 2 parameters. A function and time.

It looks like this:

export default class Debouncer {
  timeout: null | ReturnType<typeof setTimeout>
  n: number
  func: Function

  constructor(func, n) {
    this.timeout = null
    this.n = n || 500
    this.func = func
  }

  execute = (e) => {
    this.cancel()
    this.timeout = setTimeout(() => {
      this.func(e)
    }, this.n)
  }

  cancel = () => {
    if (this.timeout) clearTimeout(this.timeout)
  }
}

Inside the React component, initialize the Debouncer and pass it the searchQueryFunction

const debouncer = new Debouncer((e) => searchQueryFunction(e))

Then create a new function that will execute the searchQueryFunction through the debouncer

const execDebouncer = (e) => debouncer.execute(e)

Now inside the input onChange event, well replace calling the searchQueryFunction directly and use the new execDebouncer

<input type="text" onChange={(e) => execDebouncer(e)} />

But.. you'll notice some errors in the log:

"This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method currentTarget on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist()"

This is because the event is lost, while the function is being debounced for 500ms. To fix this, simply add e.persist() inside the execDebouncer function

const execDebouncer = (e) => {
  e.persist()
  return debouncer.execute(e)
}

I put together a little example, with an included mock api:

https://codesandbox.io/embed/pensive-swartz-cvsx1