quadratic/ui

Create T3 App

The easiest and fastest way to create full-stack Next.js apps.

If you haven't already, install the pnpm package manager.

Run the create-t3-app script in your terminal.

pnpm create t3-app@latest

If prompted, type y to install the create-t3-app package.

Need to install the following packages:
create-t3-app@7.38.1
Ok to proceed? (y) y

Enter the name of your project.

◆  What will your project be called?
│  quadratic-ui_

Select TypeScript.

◆  Will you be using TypeScript or JavaScript?
│  ● TypeScript
│  ○ JavaScript

Select "Yes" Tailwind CSS.

◆  Will you be using Tailwind CSS for styling?
│  ● Yes / ○ No

Choose whether or not you would like to use tRPC. If you don't know what it is, feel free to select "No".

◆  Would you like to use tRPC?
│  ○ Yes / ● No

Select your authentication provider. If you don't need authentication or aren't using NextAuth.js, choose "None".

◆  What authentication provider would you like to use?
│  ● None
│  ○ NextAuth.js

Select your database ORM. If you don't need a database, select "None". Otherwise, I recommend Drizzle if your database is compatible.

◆  What database ORM would you like to use?
│  ○ None
│  ○ Prisma
│  ● Drizzle

Select Next.js App Router.

◆  Would you like to use Next.js App Router?
│  ● Yes / ○ No

Select your database provider. If you don't need a database, select any of them. Otherwise, I recommend PostgreSQL.

◆  What database provider would you like to use?
│  ○ SQLite (LibSQL)
│  ○ MySQL
│  ● PostgreSQL
│  ○ PlanetScale

Select "Yes" to initialize a Git repository.

◆  Should we initialize a Git repository and stage the changes?
│  ● Yes / ○ No

Choose "Yes" to run pnpm install.

◆  Should we run 'pnpm install' for you?
│  ● Yes / ○ No

Select the default import alias.

◆  What import alias would you like to use?
│  ~/

Wait for the installation to complete. Afterwards, your terminal should look like this.

✔ quadratic-ui scaffolded successfully!

Adding boilerplate...
✔ Successfully setup boilerplate for drizzle
✔ Successfully setup boilerplate for tailwind
✔ Successfully setup boilerplate for dbContainer
✔ Successfully setup boilerplate for envVariables
✔ Successfully setup boilerplate for eslint

Installing dependencies...
✔ Successfully installed dependencies!

Initializing Git...
✔ Successfully initialized and staged git

Next steps:
  cd test
  Start up a database, if needed using './start-database.sh'
  pnpm db:push
  pnpm dev
  git commit -m "initial commit"

Create a repository on GitHub and copy the repository's URL. It should look something like this: https://github.com/qiaoandrew/quadratic-ui.git.

Change into your project's root director by running the following command, replacing quadratic-ui with the name of your project.

cd quadratic-ui

Push your repository to GitHub through by running the following commands in your project's root folder. Replace the GitHub link with your own.

git remote add origin https://github.com/qiaoandrew/quadratic-ui.git
git branch -M main
git add .
git commit -m 'initial commit'
git push -u origin main

Create a new project on Vercel. Log in using your GitHub account and connect your new GitHub repository to the project under the "Import Git Repository" section.

Add the following environment variable as a placeholder under the "Environment Variables" section.

DATABASE_URL="postgresql://postgres:password@localhost:5432/test"

Click deploy!

Follow the quickstart guide to get started with quadratic/ui.