import Image from "next/image";
import LayoutMdx from "@/components/shared/LayoutMdx";
import Mockup from "./demo mockup for formbricks hq open source form and survey tool.png";
import NewLogo from "./formbricks new logo mockup community feedback.png";
import Community from "./community feedback logo and name.png";
import Storybook from "./storybook for formbricks survey form builder.png";
import HeaderImage from "./weeklyupdate.png";
import NewsletterSignup from "@/components/shared/NewsletterSignup";

export const meta = {
  title: "Weekly Summary - 18th Nov 2022",
  description:
    "Every week, we’ll share an update about all things Formbricks. We’ll look at what we did on the product end as well as what’s new in the community 👋 Let’s get going!",
  date: "2022-11-18",
};

_Every week, we’ll share an update about all things Formbricks. We’ll look at what we did on the product end as well as what’s new in the community 👋 Let’s get going!_

<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />

# Product

### Formbricks React

Matti has been working on the first release of the Formbricks React Library. Here are the objectives:

- Make it as easy as possible to build forms in react even with more complex components like ratings or color pickers.
- Allow component-based approach to building forms like so:

```jsx
<TextArea name="firstname" label="What's your first name?" validation="required” />
```

- Keep rerenders at a minimum
- Keep package size at a minimum while offering more than HTML inputs out of the box

**Challenge**: Tree-shaking has been tricky. We want to offer input types like sliders and date pickers out of the box. To keep the library performant these components should only be included in the build when they are actually used. The tree-shaking has been tricky, but Matti made good progress yesterday.

### Formbricks “HQ”

Since down the line there will be apps running on our platform we decided to call our own application “Formbricks HQ”. Here is a demo of the first iteration, it’ll look like this:

<Image
  src={Mockup}
  alt="Mockup of Formbricks HQ to manage form and survey data self hosted open source"
  className="rounded-lg"
/>

**In the first version of the HQ you will be able to:**

- Receive form submissions from any form
- View & manage submissions
- Webhook submission data where you need it
- Email submission data where you need it

### SEO

We have created 5 long-taily SEO pages to drive organic traffic to Formbricks in the medium-term. It can take a couple of months to rank high and we want to be up there when the public beta is ready 🚀

If you’re curious you find them [here](/best-react-form-library-2023), [here](/vs-formspree), [here](/vs-google-forms), [here](/vs-ohmyform) and [here](/vs-react-hook-form). We added them to the sitemap but do not yet link to them on our website because the product isn’t there yet.

##

# Community

Shoutout to [@Ari](https://twitter.com/aridutilh) from buildersgroop and Dylan from Canu for sharing feedback on the Logo:

<Image src={Community} alt="Screenshot from Discord with Community Feedback" className="rounded-lg" />

We heard you and Matti and his wife made it their weekend project to come up with a slicker one:

<Image src={NewLogo} alt="Formbricks new and old logo" className="rounded-lg" />

### Exploring Storybook

Johannes is exploring Storybook. In the medium-term we want to provide you guys with a well-documented set of UI components to build your form solutions faster.

Additionally, it will make community contributions a lot easier and more valuable to the rest of the community since the look & feel will be consistent.

Thirdly, in the long-term we want to encourage other builders to build apps to cover specific use cases around working with qualitative data on top of Formbricks.

Setting things up correctly now will save everyone time down the line.

<Image src={Storybook} alt="Formbricks new and old logo" className="rounded-lg" />

### Twitter

We started being more active on Twitter again. [Say Hi 👋](https://twitter.com/formbricks)

Let’s hope Elon doesn’t break it too soon.

## Have a great weekend!

<NewsletterSignup />

export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
