Extended version of create-t3-app to make it even faster to start (or maybe slower)

Overview

create-T3-app with extra tools/config out of the box

create-t3-app is one of the fastest and easiest way to scaffold fullstack app.
create-t3-extended make it even faster for my case (and maybe yours). 🏃 💨

⚠️ I make this to reduce my mental overhead whenever I start new app, but for you paradoxically can add more
⚠️ Make sure you understand create-t3-app first before continue.
⚠️ This template use all the t3 stack options (NextAuth, Prisma, Tailwind, TPRC)
With these additional tools/ config:

Interesting Discussion

This documentation below show how I modify the original code base into what you'll find in this repo & also some useful tips & trick.

  • If your case same with mine/ you agree with all my opinion, just use it & start.
  • If your case is different than mine/ agree only some of my opinion, use create-t3-app & add the tools/ config you need.

⚠️ I personally encourage the second point.

If you find it helpful, feel free to use. 😃
If you have opinion that you think better, feel free to discuss. 🥰
If you find bug, let's fix it. 🤔
I'm not consider myself an expert. Just learn & share. 🤓
Hopefully one day I will make a CLI for this. How smooth that will be?


Linting & Formatting 🧹

better code 1 without the frustration of config.

Install prettier with the config & plugin for eslint & tailwind

npm i -D prettier eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss

Confuse about plugin vs config? Read this and this.

Why don't we use stylelint also?
Tailwind is more than enough. Use arbitrary value & custom style.

Here is my experience:
I make component animation on css and realize that you can move it to tailwind custom style. I use scss on svg animation and realize css is not for this kind of job. You will screw up really fast (sarah drasner said). I move using animation library instead (more below).

Add prettier config file prettier.config.cjs
module.exports = {
	trailingComma: 'es5',
	useTabs: true,
	tabWidth: 2,
	semi: false,
	singleQuote: true,
	bracketSpacing: false,
	jsxSingleQuote: true,
	plugins: [require('prettier-plugin-tailwindcss')],
	tailwindConfig: './tailwind.config.cjs',
}
Extend eslint config .eslint.json
{
- "plugins": ["@typescript-eslint"],
+ "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
+ "prettier"
  ],
+ "rules": {
+   "prettier/prettier": "warn"
+ }
}

You can use prettier only on formatting or also give linting error/ warning. For my chase warn me.

Add more plugin if you need it

I personally love unicorn plugin.

Lint & format all of your file

npx prettier --write .
npx eslint .


Git hooks ⛓️

better 1 and more exciting git experience

🧹 Pre-commit

Make sure everything is clean before commit it.

Add husky to the project
npx husky-init && npm i

Install lint-staged
npm i -D lint-staged

Add config file .lintstagedrc

{
	"*.{js,jsx,cjs,ts,tsx}": "eslint --fix",
	"*.{md,json}": "prettier --write"
}

Run lint-staged on pre-commit hook

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

- npm test
+ npx lint-staged

If the log message doesn't show correctly, see this issue

📨 Commit message

Give clear message by following the convention

Install commitlint
npm install -D @commitlint/cli @commitlint/config-conventional

Add config file
commitlint.config.cjs

module.exports = {
	extends: ['@commitlint/config-conventional'],
}

Add to commit-message hook
npx husky add .husky/commit-msg "npx commitlint --edit \"\$1\""

Test by making a commit
git commit -m "foo: bar"

🤯 Commit emoji

Who don't like emoji??

Install gitmoji
npm i -g gitmoji-cli

Install gitmoji config for commitlint
npm i -D commitlint-config-gitmoji

Update commitlint config file

module.exports = {
-	extends: ['@commitlint/config-conventional'],
+	extends: ['gitmoji'],
+	rules: {
+		'header-max-length': [0, 'always', 100],
+		'scope-case': [0, 'always', 'pascal-case']
+ 	}
}

Commit using gitmoji
gitmoji -c

🏗️ Pre-push

Clean doesn't mean it's not break

npx husky add .husky/pre-push "npm run build"

Hosting provider usually charge money if you exceed the build time limit. It can save you some time.


Optimization 📈

Don't bring unnecessary thing in your baggage

📦 Bundle Analyzer

Consider package bundle size before add it to your arsenal.

Install bundle analyzer
npm -i -D @next/bundle-analyzer

Edit next.config.cjs

+ import bundleAnalyzer from '@next/bundle-analyzer'

+ const withBundleAnalyzer = bundleAnalyzer({
+ 	enabled: process.env.ANALYZE === 'true',
+ })

function defineNextConfig(config) {
-	return config
+	return withBundleAnalyzer(config)
}

Add bundle analyzer build script

+	"build-stats": "ANALYZE=true npm run build"

Run build with bundle analyzer npm run build-stats

You can also check using bundle size using bundlephobia.

🧰 CSS

Optimize tailwind on production

Minify CSS using cssnano

npm -i -D cssnano

Edit postcss.config.cjs

module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
+		...(process.env.NODE_ENV === 'production' ? {cssnano: {}} : {}),
	},
}

Going Live 🚀

Why wait so long to go to the moon?

🪐 MySQL on PlanetScale

Sit with ease in case your app suddenly become a startup. Watch this interview

I use both local database & PlanetScale branch database for development. Depend on your need.
For local I use prisma migrate dev
For remote I use prima db push
Read this for the differences.

Local MySQL server

Go to prisma.schema and there will be instruction about what to do.

For MySQL installation follow guide.

Set database url on .env
DATABASE_URL=mysql://user:password@localhost:3306/database_name

Migrate local database (better wait after planet scale setup)
npx prisma migrate dev

PlanetScale setup

Ignore prisma migration file in .gitignore
/prisma/migrations/*

Follow this instruction and you are good to go.

Code mods:
prisma.schema

  generator client {
      provider        = "prisma-client-js"
+     previewFeatures = ["referentialIntegrity"]
  }

  datasource db {
      url                  = env("DATABASE_URL")
+      referentialIntegrity = "prisma"
  }

Replace your DATABASE_URL on .env with url that you get from PlanetScale

🔎 Google OAuth

Who doesn't have google account?

Setup credential at google console.
Create new project > configure consent screen
Go to "APIs & Services" > "Credentials" > "Create credentials" > "OAuth Client ID"

Add "Authorized JavaScript origins" with base url

http://localhost:3000
https://your-domain.vercel.app

Add "Authorized redirect URIs" with callback url

http://localhost:3000/api/auth/callback/google
https://your-domain.vercel.app/api/auth/callback/google

Add google credential to .env

+ GOOGLE_CLIENT_ID = 'Your Client ID'
+ GOOGLE_CLIENT_SECRET = 'Your Client Secret'

Add google env to schema.mjs

export const serverSchema = z.object({
	...
+	GOOGLE_CLIENT_ID: z.string(),
+	GOOGLE_CLIENT_SECRET: z.string(),
})

Enable jwt callback (required)

callbacks: {
		session({session, user}) {
			...
		},
+		async jwt({token}) {
+			return token
+		},
	},

🔺 Vercel

Except you like to complicate things

Just add the env & deploy

Add your live url as next auth url on .env

+ NEXTAUTH_URL=https://your-domain.vercel.app

Other helpful things 🪛

Trivially important

📄 NextJS custom Document

Create custom document _document.tsx on pages directory

import {Html, Head, Main, NextScript} from 'next/document'

export default function Document() {
	return (
		<Html>
			<Head />
			<body>
				<Main />
				<NextScript />
			</body>
		</Html>
	)
}

🅵 Fonts

There are a lot of curated font pairing ready to pick.

Pick font pairing from two of the most useful collection from heyreliable.com and pagecloud.com. You can also filter by the style that match your app.

💡 Steal font combo from your favorite website.

Go to google font and search those fonts.

Select the specimen that you will use. Remember about performance! I recommend pick three font weight and the italic version of each weight.

Add the font link inside <Head> component on _document.tsx

  <Head>
+	<link rel='preconnect' href='https://fonts.googleapis.com' />
+	<link
+		rel='preconnect'
+		href='https://fonts.gstatic.com'
+		crossOrigin=''
+	/>
+	<link
+		href='https://fonts.googleapis.com/css2?family=Hind:wght@400;600&family=Montserrat:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap'
+		rel='stylesheet'
+	/>
    ...
  <Head />

Extend tailwind config with the font family

theme: {
		extend: {
			fontFamily: {
+				heading: ['Montserrat', 'sans-serif'],
+				body: ['Hind', 'sans-serif'],
			},
		},
	},

You can apply it directly to the tag if needed by changing styles/global.css

@layer base {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		@apply font-heading;
	}

	p {
		@apply font-body;
	}
}

Favicon

Just get it correctly.

Prepare your svg icon

Go to realfavicongenerator.net

Adjust & generate favicon

Download & put on public directory

Copy generated link to head on _document.tsx

  <Head>
+   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+   <link rel="manifest" href="/site.webmanifest">
+   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+   <meta name="msapplication-TileColor" content="#2d89ef">
+   <meta name="theme-color" content="#ffffff">
  <Head/>

🌟 Animation

Steal user attention & help them navigate.

These css animation collection very useful to make your website stand out

Auto animate also really helpful for element transition.

For svg animation use GSAP. Sarah Drasner and other pro recommend it because it's the most mature and reliable library.



🗡️ Bleeding edge tech

Cool tech should not make you bleeding

These is only for exploration & discussion.

ORM Replacement

Kysely provide end-to-end type-safety but also edge-first approach to ORM replacement

Supercharge Database

I have been trying EdgeDB and it's SUPER COOL! But I think SurrealDB will be the real one.


Next to cover

  • vscode extension
  • nextjs
  • svg

Footnotes

  1. more readable & manageable also prevent error 2

You might also like...

Simple and Extensible Markdown Parser for Svelte, however its simplicity can be extended to any framework.

svelte-simple-markdown This is a fork of Simple-Markdown, modified to target Svelte, however due to separating the parsing and outputting steps, it ca

May 22, 2022

An extended table to integration with some of the most widely used CSS frameworks.

An extended table to integration with some of the most widely used CSS frameworks.

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)

Dec 20, 2022

A plugin that provides utilities for extended backgrounds and borders.

tailwindcss-full-bleed A plugin that provides utilities for extended backgrounds and borders. Demo Installation Install the plugin from npm: npm insta

Dec 24, 2022

Obsidian plugin allowing for linking to a heading range, in the [[Page#HeaderA#HeaderB]] extended wikilink format.

Obsidian Link Heading Range Plugin This is a plugin for Obsidian (https://obsidian.md). It allows linking to a heading range, in the [[Page#HeaderA#He

Nov 14, 2022

A JavaScript Library To Make Your Work Work Easier/Faster

Functionalty.js (beta) About ✍️ This Is A JavaScript Library To Make Your Work Easier/Faster, You Can See Functionalty.js Website From Here Project Cr

Aug 30, 2022

A JavaScript Library To Make Your Work Work Easier/Faster

Functionality.js (beta) About ✍️ This Is A JavaScript Library To Make Your Work Easier/Faster, You Can See Functionalty.js Website From Here Project C

May 25, 2022

A JavaScript Library To Make Your Work Work Easier/Faster

A JavaScript Library To Make Your Work Work Easier/Faster

Functionality.js About ✍️ This Is A JavaScript Library To Make Your Work Easier/Faster, You Can See Functionalty.js Website From Here Project Created

Jun 23, 2022

Prisma is a next-generation object–relational mapper (ORM) that claims to help developers build faster and make fewer errors.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Oct 8, 2022

The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra

Remix Fakebooks App This is a (very) simple implementation of the fakebooks mock app demonstrated on remix.run. There is no database, but there is an

Dec 22, 2022
Comments
  • Make a good docs

    Make a good docs

    Self describes.

    The task to be done:

    • [x] More explanation about why add that stack
    • [x] More links to related resource
    • [x] Use markdown format correctly
    • [x] Add path aliases to the table of content
    • [x] Globals style on scss format
    • [x] Implement google OAuth to the template
    • [x] Note on using other that npm
    documentation good first issue 
    opened by riolly 2
  • Create an awesome home page

    Create an awesome home page

    I am currently working on this awesome app called transparency. It makes me think to revamp the current boring homepage to also demonstrate the power of this template. But of course, I don't want to make the boilerplate cluttered with the code.

    enhancement 
    opened by riolly 1
Owner
A Riolly C
Serving people with software.
A Riolly C
A social-media mock app for the ones who love to read - and maybe show it off

?? ?? Cachalote ?? ?? Share what you are reading and find people who also likes it - or not! What does it do? This app focuses on three main questions

Thaís França 3 May 22, 2022
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
A cloud-based, distributed version of is-even and is-odd.

Is-Odd and Is-Even as a Service (oeaas) A cloud-based, distributed version of is-even and is-odd. Install If you want to deploy OEaaS yourself, use wr

null 3 Nov 17, 2022
The world's greatest open source 3D CAM software. (Maybe one day.)

Meshmill is open source 3D CAM software for Linux. It turns STL models into G-code for CNC machines. This is beta-quality software. Use it at your own

James Stanley 20 Dec 21, 2022
A maybe slightly safer-ish wrapper around eval Function constructors

evalish A maybe slightly safer-ish wrapper around eval Function constructors Please maybe try something else first.. Please. evalish is a small helper

Phil Pluckthun 24 Sep 6, 2022
A maybe slightly safer-ish wrapper around eval Function constructors

evalish A maybe slightly safer-ish wrapper around eval Function constructors Please maybe try something else first.. Please. evalish is a small helper

0no.co 22 Aug 21, 2022
Maybe better conditionals feat. tagged template literals

condicional Maybe better conditionals Report Bug · Request Feature About The Project ⚠️ `condicional` is based on a PEG grammar and is not battle-test

null 3 Oct 12, 2022
A CLI tool to create a NodeJS project with TypeScript CTSP is a CLI tool to make easier to start a new NodeJS project and configure Typescript on it.

CTSP- Create TS Project A CLI tool to create a NodeJS project with TypeScript CTSP is a CLI tool to make easier to start a new NodeJS project and conf

Jean Rodríguez 7 Sep 13, 2022
Tumaini Maganiko 7 May 9, 2023
Extended magic-string with extra utilities

DEPRECATED. It has been ported back to magic-string >= 0.26.0 magic-string-extra Extended Rich-Harris/magic-string with extra utilities. Install npm i

Anthony Fu 130 Sep 8, 2022