Clomr, Boost Anesthesia Revenue

insurance

Introduction#

In general it's a medical insurance system that help patient and clinic to manage their business and make it easy to manage the insurance process. This app will help with managing the bills the users the doctors everything about the clinic, patient and insurance company.

Main Features#

According to my NDA I can't share the features of the app. Instead I'll be talking about the dev challenges that I can share.

You can find their website here

Forms & Form Builder#

Problem:

The app has a lot of forms that require a lot of fields and validation.
Some of the forms are dynamic and can be changed by the user.

Solution:

Creating a form require multiple steps the first one is

  1. defined the validation scheme
  2. then create the form fields
  3. then create the form + do the styling

So We created a form builder that will help me create the form in a dynamic way. The form builder will take the validation scheme and will generate the form.

Example:

Usually that's what we have to do when creating a form with validation using react-hook-form and yup

import { useForm } from "react-hook-form"
import { yupResolver } from "@hookform/resolvers/yup"
import * as yup from "yup"

const schema = yup
  .object({
    firstName: yup.string().required(),
    age: yup.number().positive().integer().required(),
  })
  .required()

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  })
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <p>{errors.firstName?.message}</p>

      <input {...register("age")} />
      <p>{errors.age?.message}</p>

      <input type="submit" />
    </form>
  )
}

But with the form builder we can do it like this

import { useForm } from "react-hook-form"
import { yupResolver } from "@hookform/resolvers/yup"
import * as yup from "yup"

const schema = yup
  .object({
    firstName: yup.string().required().renderInput(FormBuilderInput.TEXT,{}),
    age: yup.number().positive().integer().required().renderInput(FormBuilderInput.TEXT,{}),
  })
  .required()

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  })
  const onSubmit = (data) => console.log(data)

  return (
      <FormBuilder
        header={<button onClick={() => methods.handleSubmit(submit)()} />}
        methods={methods}
        formSchema={schema}
      />
  )
}

Render Input:

Specify the type of input that you want to render

const schema = yup
  .object({
    firstName: yup.string().required().renderInput(FormBuilderInput.TEXT,{}),
    dob: yup.date().required().renderInput(FormBuilderInput.DATE,{}),
    gender: yup.date().required().renderInput(FormBuilderInput.AUTOCOMPLETE,{
    inputProps: { options: []}})
    })
  .required()

you can also pass the props to the input and no need to add label for each input it will be added automatically fron the schema label

const schema = yup
  .object({
    firstName: yup.string().required().label("First Name").renderInput(FormBuilderInput.TEXT,{
    inputProps: { style: { color: "red" }}}),
    })
  .required()

Render Custom:

didn't like the default input? you can create your own input and pass it to the form builder

const schema = yup
  .object({
    firstName: yup.string().required().label("First Name")
    .renderCustom(param => (<MyCustomField {...param}  />)
 }).required()

renderCustom params


renderCustom(({ field: { onChange, onBlur, value, ref } }) => (
<ReactDatePicker
onChange={onChange} // send value to hook form
onBlur={onBlur} // notify when input is touched/blur
selected={value}
/>
))
                            
                            

all the feature of react-hook-form are accessible by form Builder.
Read More About Controller Props react-hook-form Controller

Form Builder Has more:

There is many other features that I can explain but it'll take a lot of time it's a very large library You can have nested forms, overwrite the header and footer, overwrite the form sections and style, add extra sections and more

Tech-Stack

  • React native
  • React native web
  • Next.js
  • AWS
  • SST
  • Lerna mono repo

Know More

Visit Website