Typescript - T3 / Chakra UI Boilerplate

Recently i've been working a lot with T3 stack.

I have loved using it but i've found tailwind to be too descriptive and thus wanted a version ready to use with chakra-ui.

crimson-med / t3-chakra-template

T3 template incorporating Chakra UI

Create T3 App

This is a T3 Stack project but that incorporates Chakra-UI and user login and password with prisma.

Installation

1. Run the installation with: yarn
2. Make a copy of .env.example to .env and fill in: NEXTAUTH_SECRET and NEXTAUTH_URL
3. Run the seeding to create users and posts: yarn migrate/seed you can find the passwords in: prisma/seed.ts
4. If you want to configure Discord Login you can add the API info in: .env and uncomment the discord config in src/server/auth.ts

Boilerplate Examples

This boilerplate shares a few different aspects of T3 while making a few changes.

Menu

You can find in src/components/menu.tsx a basic menu with items and sub items as well as Signin and Signup.

You can also specify if items are to be shown when authed.

Signin & Signup

This currently has nextauth which can integrate many login system: NextAuth.js

This template was also configured to allow signin / signup…

View on GitHub

For those unfamiliar with T3 it uses Next, NextAuth, Prisma, tRPC and in this case Chakra-UI.

• Next.js
• NextAuth.js
• Prisma
• Chakra UI
• tRPC

For now it supports simple signup / signin with username and password.

A simple data seeding script creates 3 users with some random posts.

You can see your own posts once logged in.

All default passwords are in the seed file.

---

Burlet Mederic

https://twitter.com/crimson_med