![LR Logo](/assets/images/open-graph/og-cover-trans.png)

As you know I've been building modern web apps in React+NextJS for a number of years now. After years of trying different web technologies I finally settled into [React](https://react.dev/) (JavaScript) and [NextJS](https://nextjs.org/) for my frontends and I created separate APIs with [.NET Core](https://dotnet.microsoft.com/en-us/). I would then glue these together making requests via [Axios](https://www.npmjs.com/package/axios). This has been a stack that I was happy with and to be honest the most experimentation I've done has always been with the front-end styling technologies. 

That has all changed recently as I discovered the [T3 Stack](https://create.t3.gg/). I believe the T3 Stack stands for; TypeScript, Tailwind CSS and tRPC.

Over the last month or so I've been building a new website for my company. On this website I need to collect data from users. Originally I had no plans to change my ways and I was expecting I would write a .NET API as usual when I got to this point but today I decided to spike out a little demo project and explore the T3 Stack instead. I'm also going to try out a service called [PlanetScale](https://planetscale.com/) which will allow me to host a serverless database. 

I am writing this post as I go. Today I will build 2x components.

`<ContactForm>` - A simple contact form that allows users to submit data to our PlanetScale database.

`<SubmissionsGrid>` - A simple grid view of sorts showing any rows of data in our PlanetScale database.

For this project I will be using the following technologies: 

* React
* NextJS
* TypeScript
* tRPC
* Prisma
* Tailwind CSS
* PlanetScale 

> I'm am using Tailwind CSS for the new website and I do really love it but I will be publishing a separate post about this tomorrow. I think I'll remove the Tailwind CSS classes from the code I show in this post. - Liam

### Step 1: Create a T3 Stack based project 

At the terminal I ran `npm create t3-app@latest` and chose to install the following:

* prisma
* typescript
* tailwind

### Step 2: Sign up for a free PlanetScale account

I signed up for an account on PlanetScale as I've never used it before. It only took a few mins and once I was in I was prompted to create a new database.

### Step 3: Create a new database

This was as easy as just choosing a name. I chose `contact-form` and selected the AWS Region I wanted the database be located.

### Step 4: Connect to the default branch

At this point I had a single branch called `main`. You can create different branches to match the branches in your git repo but for this today I just stuck with the single branch.

![branch](/assets/images/blog/2023/03/27/01-pscale-branch.png)

I then clicked into the main branch and then hit `connect` as shown below.

![connect](/assets/images/blog/2023/03/27/02-pscale-connect.png)

I chose `Prisma` and clicked `New password` to reveal the password, then copied the full connection string.

![connect options](/assets/images/blog/2023/03/27/03-pscale-connect-options.png)

Next I opened the `~/.env` file in the root of the project and pasted connection string as the value of the environment variable `DATABASE_URL`.

Then I opened the `~/src/env.mjs` file. This file is interesting it uses the popular TypeScript schema validation library [zod](https://github.com/colinhacks/zod) to validate your projects environment variables.

I updated the file in 2x places.

Firstly to add the new values to the server-side variables schema:

```javascript
const server = z.object({
  DATABASE_URL: z.string().url(),
  NODE_ENV: z.enum(["development", "test", "production"])
});
```

> If you're wondering what the block above is doing, it's saying firstly that we expect an environment variable with the name `DATABASE_URL` and that it's both a `string` and it is formatted to be a valid `URL`. And secondly another environment variable named `NODE_ENV` and it must have one of the following values; `development`, `test` or `production`. 

Secondly the `processEnv` block. This validates that the environment variables exist in the current process.

```javascript
const processEnv = {
  DATABASE_URL: process.env.DATABASE_URL,
  NODE_ENV: process.env.NODE_ENV
};
```

Finally I had to tell Prisma how to interact with my PlanetScale database. I located the  `~/prisma/schema.prisma` file and pasted in the following:

```javascript
datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
  relationMode = "prisma"
}

generator client {
  provider = "prisma-client-js"
}
```

Then just below I created the following `submissions` model (table) to hold my contact form submission data.

```javascript
model submissions {
    id        String    @id @default(cuid())
    name      String    @db.VarChar(255)
    email     String    @db.VarChar(255)
    phone     String?   @db.VarChar(255)
    message   String    @db.VarChar(255)
    createdAt DateTime  @default(now())
    updatedAt DateTime  @updatedAt
}
```

All that was left then was to sync the schema with PlanetScale. 

```bash
npx prisma db push
```

Success!

```bash
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": MySQL database "contact-form" at "eu-west.connect.psdb.cloud"

🚀  Your database is now in sync with your Prisma schema. Done in 861ms

✔ Generated Prisma Client (4.11.0 | library) to ./node_modules/@prisma/client in 36ms
```

I could then see in PlanetScale my empty table!

![table](/assets/images/blog/2023/03/27/04-pscale-table.png)

### Step 5: Build an app!

I created a component called `<ContactForm>` and I placed it `~/src/components/forms/contact/contact-form.tsx`

In this file I placed the following code to write up some basic state.

```javascript
import React, { useState } from "react";

interface ContactFormProps {
    title: string // just a title for now but could be extended to make form configurable
}

const ContactForm = ({ title }: ContactFormProps) => {
  // set up some state which will be mutated when typing into the form fields
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [message, setMessage] = useState("");

  // event handler for when the form data is submitted
  const collectData = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();

      // TODO: grab values from state and send to PlanetScale

      // reset the state to clear the form
      setName("")
      setEmail("")
      setPhone("")
      setMessage("")
  }

    return <form 
                id="contact-form" 
                onSubmit={collectData} >
        <h1>{title}</h1>

        <label>Name:</label>
        <input 
            id="name" 
            value={ name } 
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)} 
            placeholder="full name"
        />

        <label>Email:</label>
        <input 
            id="email" 
            value= { email }
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} 
            placeholder="email address"
        />
        
        <label>Phone:</label>
        <input 
            id="phone" 
            value= { phone }
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPhone(e.target.value)} 
            placeholder="phone"
        />

        <label className="pr-4">Message:</label>
        <textarea 
            id="message" 
            value= { message }
            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setMessage(e.target.value)} 
            placeholder="message/query"
        />
        
        <button type="submit">Send</button>
    </form>
}

export default ContactForm
```

The next thing I had to do was create a tRPC procedure that talked to Prisma so we could interact with the database.

I created a tRPC Router called `contactSubmissionsRouter` here: `~/src/server/api/routers/contact-submissions.ts`.

```javascript
import { z } from "zod";

import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";

export const contactSubmissionsRouter = createTRPCRouter({
  add: publicProcedure
  .input(z.object({ 
    name: z.string().min(1).max(255),
    email: z.string().min(1).max(255),
    phone: z.string().min(1).max(255),
    message: z.string().min(1).max(255)}))
  .mutation(async ({ ctx, input }) => {
     await ctx.prisma.submissions.create({
        data: input
    });
  })
});
```

What I have declared here is a single public procedure or route called `add`. It uses `zod` to validate the input and we basically describe an object schema that matches our database table. This procedure is a mutation rather than a query as it's storing data, and you see it takes the input and passes it to Prisma to store. Prisma then sends this directly to our database in PlanetScale.

Before we can use this `contactSubmissionsRouter` we need to update 1 more file which is `~/src/server/api/root.ts`.

```javascript
import { createTRPCRouter } from "~/server/api/trpc";
import { contactSubmissionsRouter } from "./routers/contact-submissions";

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
  submissions: contactSubmissionsRouter
});

// export type definition of API
export type AppRouter = typeof appRouter;
```

Here we are just passing out contact submission router but we can pass any number of different routers here.

Now back to the `<ContactForm>` component. I updated the code to use the new tRPC router. 

First I added a new import to the top of the file: `~/src/components/forms/contact/contact.ts`

```javascript
import { api } from "~/utils/api";
```

Then I added the following just after where we initialised the state.

```javascript
// get a reference to our tRPC mutation for adding submissions
// this will be used later when data is submitted
const addSubmission = api.submissions.add.useMutation();
```

Then I updated the `collectData()` method and added the following:

```javascript
// pass the current state values to our addSubmission procedure 
// on our tRPC router 
addSubmission.mutate({
    name, 
    email, 
    phone,
    message
});
```

The complete file now reads like this.

```javascript
import React, { useState } from "react";
import { api } from "~/utils/api";

interface ContactFormProps {
    title: string
}

const ContactForm = ({ title }: ContactFormProps) => {

    // set up some state which will be mutated when typing into the form fields
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [phone, setPhone] = useState("");
    const [message, setMessage] = useState("");

    // get a reference to our tRPC mutation for adding submissions
    // this will be used later when data is submitted
    const addSubmission = api.submissions.add.useMutation();

    // event handler for when the form data is submitted
    const collectData = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        // pass the current state values to our addSubmission procedure 
        // on our tRPC router 
        addSubmission.mutate({
            name, 
            email, 
            phone,
            message
        });

        // reset the state to clear the form
        setName("")
        setEmail("")
        setPhone("")
        setMessage("")
    }

    return <form onSubmit={collectData}>
        <h1>{title}</h1>

        <label>Name:</label>
        <input 
            id="name" 
            value={ name } 
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)} 
            placeholder="full name"
        />

        <label>Email:</label>
        <input 
            id="email" 
            value= { email }
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} 
            placeholder="email address"
        />
        
        <label>Phone:</label>
        <input 
            id="phone" 
            value= { phone }
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPhone(e.target.value)} 
            placeholder="phone"
        />

        <label className="pr-4">Message:</label>
        <textarea 
            id="message" 
            value= { message }
            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setMessage(e.target.value)} 
            placeholder="message/query"
        />
        
        <button type="submit">Send</button>
    </form>
}

export default ContactForm
```

Now I filled in the form and hit Send and success! Data arrives in PlanetScale!

![data](/assets/images/blog/2023/03/27/05-pscale-data.png)

That's pretty awesome! But it's a pain having to switch tabs in my browser to query the data so I want it in my app on the same screen.

So first I went back to the `contactSubmissionsRouter` in `~/src/server/api/routers/contact-submissions.ts` and I added a new route called `getAll`.

```javascript
getAll: publicProcedure
  .query(({ ctx }) => {
      return ctx.prisma.submissions.findMany();
  })
```

A bit more simple this one no input to validate. It simply fetches all data from our `submissions` table.

So next I created another new component called `<SubmissionsGrid>` which lives: `~/src/components/submission-grid/submission-grid.tsx`.

```javascript
import { api } from "~/utils/api";

const SubmissionGrid = () => {
    
    const { data } = api.submissions.getAll.useQuery();
    
    return <div>
        <h1>Contact Form Submissions:</h1>
        
        <div>
            <div>
                <span>NAME</span>
                <span>EMAIL ADDRESS</span>
                <span>PHONE</span>
                <span>MESSAGE</span>
            </div>
            {
                data?.map(submission => <div key={submission.id}>
                    <span>{submission.name}</span>
                    <span>{submission.email}</span>
                    <span>{submission.phone}</span>
                    <span>{submission.message}</span>
                </div>)
            }
        </div>
    </div>
}

export default SubmissionGrid
```

This time we use the `getAll` route of our api which is a `Query` rather than a `Mutation` and then we simple loop through the rows of data and display them in a grid. Remember I've taken out all of the Tailwind CSS styling rules in the code above.

Finally add both of these components to the `index.tsx` page.

```javascript
import { type NextPage } from "next";
import Head from "next/head";
import ContactForm from "~/components/forms/contact/contact";
import SubmissionGrid from "~/components/submission-grid/submission-grid";

const Home: NextPage = () => {

  return (
    <>
      <Head>
        <title>Liams Contact Form</title>
        <meta name="description" content="Contact Form Demo" />
      </Head>
      <main>
        <ContactForm title="Contact Us" />
        <SubmissionGrid />
      </main>
    </>
  );
};

export default Home;
```

And it looks like this.

![ui](/assets/images/blog/2023/03/27/06-pscale-ui.png)

It really is quite incredible the technology that we have these days for building modern web apps. Because it's TypeScript and thanks to tRPC and Zod we have a delightful developer experience, you know immediately when something is wrong. All the types are infered right through the stack. You can command+click anywhere in the code in the front-end to be taken to the back-end. It's just a dream. 

Never have I enjoyed developing web apps as much as I do now with all this tech and this amazing T3 stack!

---

EDIT: I've created a new github account to share any code that is produced for blog posts. 

You can download the complete code for this project [here](https://github.com/liam-reilly-info/typescript-trpc-prisma-planetscale-contact-form)

BUILDING A CONTACT FORM WITH TRPC, PRISMA AND PLANETSCALE

Did you enjoy this post?️

You Might Also Like

Upload

Everyday I'm SST-ruggling