import Image from "next/image";
import LayoutMdx from "@/components/shared/LayoutMdx";
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
import { Callout } from "@/components/shared/Callout";
import NewsletterSignup from "@/components/shared/NewsletterSignup";

import Chart1 from "./chart-1.webp";
import Chart2 from "./chart-2.webp";
import Chart3 from "./chart-3.webp";
import Results1 from "./results-1.webp";
import Results2 from "./results-2.webp";
import Crowd from "./crowd-dev-1.png";

export const meta = {
  title: "Weekly Summary - 2nd Dec 2022",
  description:
    "And it is December! This week was dominated by working on the Formbricks HQ, Formbricks Charts and the YC interview. Let’s look at it in detail.",
  date: "2022-12-02",
};

_And it is December! This week was dominated by working on the Formbricks HQ, Formbricks Charts and the YC interview. Let’s look at it in detail 👇_

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

# Highlights

- Formbricks HQ almost ready 🚢
- Formbricks Charts 📈
- YC Interview 🍊

Let's dive in!

##

# Product

### Formbricks HQ (launching next week)

We made very good progress with the new Formbricks HQ. We rebuilt the use case of the Swiss government adding native feedback functionality into an existing app - super smooth!

<Callout title="Modular is the way" type="note">
  The Swiss pulled snoopForms apart to build their feedback feature. A few more early users did that which led
  us to build a modular set of tools: they work independently but are well integrated e.g. by the use of a
  shared data schema.
</Callout>

Here is a quick run-through to show how our modular setup plays out:

### Step 1: Build the form with Formbricks React

Within a few minutes we spun up the right form. Look how easy radio buttons can be in React, styled with Tailwind CSS 😍

```tsx
import { Form, Radio, Submit, sendToHq, Textarea } from "@formbricks/react";

...
<Form formId="clb4yr1m90000XXXXXXXX" hqUrl="http://localhost:3000" onSubmit={sendToHq}>
  <Radio
    name="evaluate"
    label="Evaluate the online course you just completed"
    legendClassName="mb-3 font-bold text-slate-800 text-xl"
    labelClassName="font-regular text-slate-500 text-lg"
    options={["Perfect", "Very satisfactory", "Satisfactory", "Not very satisfactory", "Useless"]}
  />
  <Textarea
    name="feedback"
    label="Would you like to send us a comment, an opinion, a correction?"
    help="Only you and us can see your answer."
    labelClassName="font-bold text-slate-800 text-xl"
    innerClassName="mt-3"
    cols={50}
    rows={4}
  />
  <Submit
    label="Answer"
    inputClassName="flex items-center justify-center rounded-md border border-transparent
     bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-3 py-2 text-base
     font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
  />
</Form>
```

<Image src={Chart1} alt="Weekly Update Demo Custom Native Feedback Function" className="rounded-lg" />

### Step 2: Pipe it up with Formbricks HQ

We hooked it up with the Formbricks HQ to store the data. The React Lib sends a data schema along with the submission to assure a complete picture of the data. Read more about schemas in our [docs](/docs/formbricks-hq/schema):

```tsx
<Form
  formId="clb4yr1m90000yzaXXXXXXXX"
  hqUrl="http://localhost:3000"
  onSubmit={handleSubmit}
>
```

<Image src={Results1} alt="Weekly Update Demo Custom Native Feedback Function" className="rounded-lg" />

### Step 3: Display the results right after submission

They were looking for a polling functionality so showing the enduser the results right after they submitted their answer. We built Formbricks Charts to enable that with a single line of code:

```tsx
import { Bar } from "@formbricks/charts";

...

<h2 className="mx-auto mb-3 text-lg font-bold text-slate-800">
  Thanks a lot for your feedback
</h2>
<p className="mb-5 text-lg text-slate-500">
  Here you can see what other people answered.
</p>

/* Visualize Submission using Formbricks Charts Library */
<Bar
  submissions="{submissions}"
  schema="{schema}"
  fieldName="evaluate"
  color="#4f46e5"
/>
```

<Image src={Chart3} alt="Weekly Update Demo Custom Native Feedback Function" className="rounded-lg" />

### Formbricks Charts

Formbricks charts is a package to display form data collected with Formbricks React or the upcoming Visual Form Builder. It’s leveraging the great [Recharts](https://recharts.org) package.

With a single line of code you can display your form data wherever you need it:

```tsx
<Bar submissions={submissions} schema={schema} fieldName="fieldToVisualize" />

/* or */

<Table submissions={submissions} schema={schema} fieldName="fieldToVisualize" />
```

We also use the same package to display our charts in Formbricks HQ:

<Image src={Results2} alt="Formbricks HQ Demo Custom Native Feedback with Charts" className="rounded-lg" />

# Community

We had a few great in-depth chats with builders looking to use Formbricks. Special shout out to jetsoms, LD and kiran for sharing so much about their pain points with other solutions.

Here is a little overview of our crowds activity on GitHub and Discord over the past week:

<Image src={Crowd} alt="Weekly Update Demo Custom Native Feedback Function" className="rounded-lg" />

## YC Interview

Last night we had our YC interview.

Our experience was surprisingly relaxed, Nicolas just tried to understand what we’re building, why and what we have learned about our users over the past couple of months.

We talked about how we see Formbricks develop from solving form infrastructure to becoming an open source alternative to Qualitrcs, what happened with snoopForms and more.

Some say you hear from YC within a few hours in case they want to invest. On the website it says they'll get back to us within a day or two - let's see how it shakes out.

Generally, it was super exciting to be invited and look at what we have done and are planning to do through the YC lens 🚀 We got a lot more pumped about size of the opportunity ahead of us!

<NewsletterSignup />

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