diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..43a5797 --- /dev/null +++ b/.env.example @@ -0,0 +1,19 @@ +# Since the ".env" file is gitignored, you can use the ".env.example" file to +# build a new ".env" file when you clone the repo. Keep this file up-to-date +# when you add new variables to `.env`. + +# This file will be committed to version control, so make sure not to have any +# secrets in it. If you are cloning this repo, create a copy of this file named +# ".env" and populate it with your secrets. + +# When adding additional environment variables, the schema in "/src/env.mjs" +# should be updated accordingly. + +# Drizzle +# Get the Database URL from the "prisma" dropdown selector in PlanetScale. +# Change the query params at the end of the URL to "?ssl={"rejectUnauthorized":true}" +DATABASE_URL='mysql://YOUR_MYSQL_URL_HERE?ssl={"rejectUnauthorized":true}' + +# Example: +# SERVERVAR="foo" +# NEXT_PUBLIC_CLIENTVAR="bar" diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..79cb511 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,36 @@ +/** @type {import("eslint").Linter.Config} */ +const config = { + parser: "@typescript-eslint/parser", + parserOptions: { + project: true, + }, + plugins: ["@typescript-eslint"], + extends: [ + "next/core-web-vitals", + "plugin:@typescript-eslint/recommended-type-checked", + "plugin:@typescript-eslint/stylistic-type-checked", + ], + rules: { + // These opinionated rules are enabled in stylistic-type-checked above. + // Feel free to reconfigure them to your own preference. + "@typescript-eslint/array-type": "off", + "@typescript-eslint/consistent-type-definitions": "off", + + "@typescript-eslint/consistent-type-imports": [ + "warn", + { + prefer: "type-imports", + fixStyle: "inline-type-imports", + }, + ], + "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }], + "@typescript-eslint/no-misused-promises": [ + 2, + { + checksVoidReturn: { attributes: false }, + }, + ], + }, +}; + +module.exports = config; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2971a0b --- /dev/null +++ b/.gitignore @@ -0,0 +1,42 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# database +/prisma/db.sqlite +/prisma/db.sqlite-journal + +# next.js +/.next/ +/out/ +next-env.d.ts + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables +.env +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo diff --git a/README.md b/README.md new file mode 100644 index 0000000..fba19ed --- /dev/null +++ b/README.md @@ -0,0 +1,28 @@ +# Create T3 App + +This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`. + +## What's next? How do I make an app with this? + +We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary. + +If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help. + +- [Next.js](https://nextjs.org) +- [NextAuth.js](https://next-auth.js.org) +- [Prisma](https://prisma.io) +- [Tailwind CSS](https://tailwindcss.com) +- [tRPC](https://trpc.io) + +## Learn More + +To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources: + +- [Documentation](https://create.t3.gg/) +- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials + +You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome! + +## How do I deploy this? + +Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information. diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..10dd651 Binary files /dev/null and b/bun.lockb differ diff --git a/drizzle.config.ts b/drizzle.config.ts new file mode 100644 index 0000000..ca9ed05 --- /dev/null +++ b/drizzle.config.ts @@ -0,0 +1,12 @@ +import { type Config } from "drizzle-kit"; + +import { env } from "~/env.mjs"; + +export default { + schema: "./src/server/db/schema.ts", + driver: "mysql2", + dbCredentials: { + connectionString: env.DATABASE_URL, + }, + tablesFilter: ["property-room_*"], +} satisfies Config; diff --git a/next.config.mjs b/next.config.mjs new file mode 100644 index 0000000..0914d31 --- /dev/null +++ b/next.config.mjs @@ -0,0 +1,10 @@ +/** + * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful + * for Docker builds. + */ +await import("./src/env.mjs"); + +/** @type {import("next").NextConfig} */ +const config = {}; + +export default config; diff --git a/package.json b/package.json new file mode 100644 index 0000000..7e9b2ad --- /dev/null +++ b/package.json @@ -0,0 +1,50 @@ +{ + "name": "property-room", + "version": "0.1.0", + "private": true, + "scripts": { + "build": "next build", + "db:push": "dotenv drizzle-kit push:mysql", + "db:studio": "dotenv drizzle-kit studio", + "dev": "next dev", + "lint": "next lint", + "start": "next start" + }, + "dependencies": { + "@planetscale/database": "^1.11.0", + "@t3-oss/env-nextjs": "^0.7.0", + "@tanstack/react-query": "^4.32.6", + "@trpc/client": "^10.37.1", + "@trpc/next": "^10.37.1", + "@trpc/react-query": "^10.37.1", + "@trpc/server": "^10.37.1", + "drizzle-orm": "^0.28.5", + "next": "^13.5.4", + "react": "18.2.0", + "react-dom": "18.2.0", + "superjson": "^1.13.1", + "zod": "^3.22.4" + }, + "devDependencies": { + "@types/eslint": "^8.44.2", + "@types/node": "^18.16.0", + "@types/react": "^18.2.20", + "@types/react-dom": "^18.2.7", + "@typescript-eslint/eslint-plugin": "^6.3.0", + "@typescript-eslint/parser": "^6.3.0", + "autoprefixer": "^10.4.14", + "dotenv-cli": "^7.3.0", + "drizzle-kit": "^0.19.13", + "eslint": "^8.47.0", + "eslint-config-next": "^13.5.4", + "mysql2": "^3.6.1", + "postcss": "^8.4.27", + "prettier": "^3.0.0", + "prettier-plugin-tailwindcss": "^0.5.1", + "tailwindcss": "^3.3.3", + "typescript": "^5.1.6" + }, + "ct3aMetadata": { + "initVersion": "7.22.0" + } +} diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..e305dd9 --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,8 @@ +const config = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; + +module.exports = config; diff --git a/prettier.config.mjs b/prettier.config.mjs new file mode 100644 index 0000000..2d2fa4c --- /dev/null +++ b/prettier.config.mjs @@ -0,0 +1,6 @@ +/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').options} */ +const config = { + plugins: ["prettier-plugin-tailwindcss"], +}; + +export default config; diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..60c702a Binary files /dev/null and b/public/favicon.ico differ diff --git a/src/app/_components/create-post.tsx b/src/app/_components/create-post.tsx new file mode 100644 index 0000000..02d7c38 --- /dev/null +++ b/src/app/_components/create-post.tsx @@ -0,0 +1,43 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +import { api } from "~/trpc/react"; + +export function CreatePost() { + const router = useRouter(); + const [name, setName] = useState(""); + + const createPost = api.post.create.useMutation({ + onSuccess: () => { + router.refresh(); + setName(""); + }, + }); + + return ( +
{ + e.preventDefault(); + createPost.mutate({ name }); + }} + className="flex flex-col gap-2" + > + setName(e.target.value)} + className="w-full rounded-full px-4 py-2 text-black" + /> + +
+ ); +} diff --git a/src/app/api/trpc/[trpc]/route.ts b/src/app/api/trpc/[trpc]/route.ts new file mode 100644 index 0000000..859f13a --- /dev/null +++ b/src/app/api/trpc/[trpc]/route.ts @@ -0,0 +1,24 @@ +import { fetchRequestHandler } from "@trpc/server/adapters/fetch"; +import { type NextRequest } from "next/server"; + +import { env } from "~/env.mjs"; +import { appRouter } from "~/server/api/root"; +import { createTRPCContext } from "~/server/api/trpc"; + +const handler = (req: NextRequest) => + fetchRequestHandler({ + endpoint: "/api/trpc", + req, + router: appRouter, + createContext: () => createTRPCContext({ req }), + onError: + env.NODE_ENV === "development" + ? ({ path, error }) => { + console.error( + `❌ tRPC failed on ${path ?? ""}: ${error.message}` + ); + } + : undefined, + }); + +export { handler as GET, handler as POST }; diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..9c1907b --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,31 @@ +import "~/styles/globals.css"; + +import { Inter } from "next/font/google"; +import { headers } from "next/headers"; + +import { TRPCReactProvider } from "~/trpc/react"; + +const inter = Inter({ + subsets: ["latin"], + variable: "--font-sans", +}); + +export const metadata = { + title: "Create T3 App", + description: "Generated by create-t3-app", + icons: [{ rel: "icon", url: "/favicon.ico" }], +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + {children} + + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx new file mode 100644 index 0000000..4a06b52 --- /dev/null +++ b/src/app/page.tsx @@ -0,0 +1,65 @@ +import Link from "next/link"; + +import { CreatePost } from "~/app/_components/create-post"; +import { api } from "~/trpc/server"; + +export default async function Home() { + const hello = await api.post.hello.query({ text: "from tRPC" }); + + return ( +
+
+

+ Create T3 App +

+
+ +

First Steps →

+
+ Just the basics - Everything you need to know to set up your + database and authentication. +
+ + +

Documentation →

+
+ Learn more about Create T3 App, the libraries it uses, and how to + deploy it. +
+ +
+
+

+ {hello ? hello.greeting : "Loading tRPC query..."} +

+
+ + +
+
+ ); +} + +async function CrudShowcase() { + const latestPost = await api.post.getLatest.query(); + + return ( +
+ {latestPost ? ( +

Your most recent post: {latestPost.name}

+ ) : ( +

You have no posts yet.

+ )} + + +
+ ); +} diff --git a/src/env.mjs b/src/env.mjs new file mode 100644 index 0000000..1107bd0 --- /dev/null +++ b/src/env.mjs @@ -0,0 +1,50 @@ +import { createEnv } from "@t3-oss/env-nextjs"; +import { z } from "zod"; + +export const env = createEnv({ + /** + * Specify your server-side environment variables schema here. This way you can ensure the app + * isn't built with invalid env vars. + */ + server: { + DATABASE_URL: z + .string() + .url() + .refine( + (str) => !str.includes("YOUR_MYSQL_URL_HERE"), + "You forgot to change the default URL" + ), + NODE_ENV: z + .enum(["development", "test", "production"]) + .default("development"), + }, + + /** + * Specify your client-side environment variables schema here. This way you can ensure the app + * isn't built with invalid env vars. To expose them to the client, prefix them with + * `NEXT_PUBLIC_`. + */ + client: { + // NEXT_PUBLIC_CLIENTVAR: z.string(), + }, + + /** + * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g. + * middlewares) or client-side so we need to destruct manually. + */ + runtimeEnv: { + DATABASE_URL: process.env.DATABASE_URL, + NODE_ENV: process.env.NODE_ENV, + // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR, + }, + /** + * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially + * useful for Docker builds. + */ + skipValidation: !!process.env.SKIP_ENV_VALIDATION, + /** + * Makes it so that empty strings are treated as undefined. + * `SOME_VAR: z.string()` and `SOME_VAR=''` will throw an error. + */ + emptyStringAsUndefined: true, +}); diff --git a/src/server/api/root.ts b/src/server/api/root.ts new file mode 100644 index 0000000..3d629a7 --- /dev/null +++ b/src/server/api/root.ts @@ -0,0 +1,14 @@ +import { postRouter } from "~/server/api/routers/post"; +import { createTRPCRouter } from "~/server/api/trpc"; + +/** + * This is the primary router for your server. + * + * All routers added in /api/routers should be manually added here. + */ +export const appRouter = createTRPCRouter({ + post: postRouter, +}); + +// export type definition of API +export type AppRouter = typeof appRouter; diff --git a/src/server/api/routers/post.ts b/src/server/api/routers/post.ts new file mode 100644 index 0000000..b8e95d2 --- /dev/null +++ b/src/server/api/routers/post.ts @@ -0,0 +1,31 @@ +import { z } from "zod"; + +import { createTRPCRouter, publicProcedure } from "~/server/api/trpc"; +import { posts } from "~/server/db/schema"; + +export const postRouter = createTRPCRouter({ + hello: publicProcedure + .input(z.object({ text: z.string() })) + .query(({ input }) => { + return { + greeting: `Hello ${input.text}`, + }; + }), + + create: publicProcedure + .input(z.object({ name: z.string().min(1) })) + .mutation(async ({ ctx, input }) => { + // simulate a slow db call + await new Promise((resolve) => setTimeout(resolve, 1000)); + + await ctx.db.insert(posts).values({ + name: input.name, + }); + }), + + getLatest: publicProcedure.query(({ ctx }) => { + return ctx.db.query.posts.findFirst({ + orderBy: (posts, { desc }) => [desc(posts.createdAt)], + }); + }), +}); diff --git a/src/server/api/trpc.ts b/src/server/api/trpc.ts new file mode 100644 index 0000000..0dceca8 --- /dev/null +++ b/src/server/api/trpc.ts @@ -0,0 +1,102 @@ +/** + * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS: + * 1. You want to modify request context (see Part 1). + * 2. You want to create a new middleware or type of procedure (see Part 3). + * + * TL;DR - This is where all the tRPC server stuff is created and plugged in. The pieces you will + * need to use are documented accordingly near the end. + */ +import { initTRPC } from "@trpc/server"; +import { type NextRequest } from "next/server"; +import superjson from "superjson"; +import { ZodError } from "zod"; + +import { db } from "~/server/db"; + +/** + * 1. CONTEXT + * + * This section defines the "contexts" that are available in the backend API. + * + * These allow you to access things when processing a request, like the database, the session, etc. + */ + +interface CreateContextOptions { + headers: Headers; +} + +/** + * This helper generates the "internals" for a tRPC context. If you need to use it, you can export + * it from here. + * + * Examples of things you may need it for: + * - testing, so we don't have to mock Next.js' req/res + * - tRPC's `createSSGHelpers`, where we don't have req/res + * + * @see https://create.t3.gg/en/usage/trpc#-serverapitrpcts + */ +export const createInnerTRPCContext = (opts: CreateContextOptions) => { + return { + headers: opts.headers, + db, + }; +}; + +/** + * This is the actual context you will use in your router. It will be used to process every request + * that goes through your tRPC endpoint. + * + * @see https://trpc.io/docs/context + */ +export const createTRPCContext = (opts: { req: NextRequest }) => { + // Fetch stuff that depends on the request + + return createInnerTRPCContext({ + headers: opts.req.headers, + }); +}; + +/** + * 2. INITIALIZATION + * + * This is where the tRPC API is initialized, connecting the context and transformer. We also parse + * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation + * errors on the backend. + */ + +const t = initTRPC.context().create({ + transformer: superjson, + errorFormatter({ shape, error }) { + return { + ...shape, + data: { + ...shape.data, + zodError: + error.cause instanceof ZodError ? error.cause.flatten() : null, + }, + }; + }, +}); + +/** + * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT) + * + * These are the pieces you use to build your tRPC API. You should import these a lot in the + * "/src/server/api/routers" directory. + */ + +/** + * This is how you create new routers and sub-routers in your tRPC API. + * + * @see https://trpc.io/docs/router + */ +export const createTRPCRouter = t.router; + +/** + * Public (unauthenticated) procedure + * + * This is the base piece you use to build new queries and mutations on your tRPC API. It does not + * guarantee that a user querying is authorized, but you can still access user session data if they + * are logged in. + */ +export const publicProcedure = t.procedure; diff --git a/src/server/db/index.ts b/src/server/db/index.ts new file mode 100644 index 0000000..2a0c8e8 --- /dev/null +++ b/src/server/db/index.ts @@ -0,0 +1,12 @@ +import { Client } from "@planetscale/database"; +import { drizzle } from "drizzle-orm/planetscale-serverless"; + +import { env } from "~/env.mjs"; +import * as schema from "./schema"; + +export const db = drizzle( + new Client({ + url: env.DATABASE_URL, + }).connection(), + { schema } +); diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts new file mode 100644 index 0000000..ae91328 --- /dev/null +++ b/src/server/db/schema.ts @@ -0,0 +1,34 @@ +// Example model schema from the Drizzle docs +// https://orm.drizzle.team/docs/sql-schema-declaration + +import { sql } from "drizzle-orm"; +import { + bigint, + index, + mysqlTableCreator, + timestamp, + varchar, +} from "drizzle-orm/mysql-core"; + +/** + * This is an example of how to use the multi-project schema feature of Drizzle ORM. Use the same + * database instance for multiple projects. + * + * @see https://orm.drizzle.team/docs/goodies#multi-project-schema + */ +export const mysqlTable = mysqlTableCreator((name) => `property-room_${name}`); + +export const posts = mysqlTable( + "post", + { + id: bigint("id", { mode: "number" }).primaryKey().autoincrement(), + name: varchar("name", { length: 256 }), + createdAt: timestamp("created_at") + .default(sql`CURRENT_TIMESTAMP`) + .notNull(), + updatedAt: timestamp("updatedAt").onUpdateNow(), + }, + (example) => ({ + nameIndex: index("name_idx").on(example.name), + }) +); diff --git a/src/styles/globals.css b/src/styles/globals.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/src/styles/globals.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/trpc/react.tsx b/src/trpc/react.tsx new file mode 100644 index 0000000..6429613 --- /dev/null +++ b/src/trpc/react.tsx @@ -0,0 +1,47 @@ +"use client"; + +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client"; +import { createTRPCReact } from "@trpc/react-query"; +import { useState } from "react"; + +import { type AppRouter } from "~/server/api/root"; +import { getUrl, transformer } from "./shared"; + +export const api = createTRPCReact(); + +export function TRPCReactProvider(props: { + children: React.ReactNode; + headers: Headers; +}) { + const [queryClient] = useState(() => new QueryClient()); + + const [trpcClient] = useState(() => + api.createClient({ + transformer, + links: [ + loggerLink({ + enabled: (op) => + process.env.NODE_ENV === "development" || + (op.direction === "down" && op.result instanceof Error), + }), + unstable_httpBatchStreamLink({ + url: getUrl(), + headers() { + const heads = new Map(props.headers); + heads.set("x-trpc-source", "react"); + return Object.fromEntries(heads); + }, + }), + ], + }) + ); + + return ( + + + {props.children} + + + ); +} diff --git a/src/trpc/server.ts b/src/trpc/server.ts new file mode 100644 index 0000000..6984f45 --- /dev/null +++ b/src/trpc/server.ts @@ -0,0 +1,28 @@ +import { + createTRPCProxyClient, + loggerLink, + unstable_httpBatchStreamLink, +} from "@trpc/client"; +import { headers } from "next/headers"; + +import { type AppRouter } from "~/server/api/root"; +import { getUrl, transformer } from "./shared"; + +export const api = createTRPCProxyClient({ + transformer, + links: [ + loggerLink({ + enabled: (op) => + process.env.NODE_ENV === "development" || + (op.direction === "down" && op.result instanceof Error), + }), + unstable_httpBatchStreamLink({ + url: getUrl(), + headers() { + const heads = new Map(headers()); + heads.set("x-trpc-source", "rsc"); + return Object.fromEntries(heads); + }, + }), + ], +}); diff --git a/src/trpc/shared.ts b/src/trpc/shared.ts new file mode 100644 index 0000000..4600504 --- /dev/null +++ b/src/trpc/shared.ts @@ -0,0 +1,30 @@ +import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server"; +import superjson from "superjson"; + +import { type AppRouter } from "~/server/api/root"; + +export const transformer = superjson; + +function getBaseUrl() { + if (typeof window !== "undefined") return ""; + if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; + return `http://localhost:${process.env.PORT ?? 3000}`; +} + +export function getUrl() { + return getBaseUrl() + "/api/trpc"; +} + +/** + * Inference helper for inputs. + * + * @example type HelloInput = RouterInputs['example']['hello'] + */ +export type RouterInputs = inferRouterInputs; + +/** + * Inference helper for outputs. + * + * @example type HelloOutput = RouterOutputs['example']['hello'] + */ +export type RouterOutputs = inferRouterOutputs; diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..f06488f --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,14 @@ +import { type Config } from "tailwindcss"; +import { fontFamily } from "tailwindcss/defaultTheme"; + +export default { + content: ["./src/**/*.tsx"], + theme: { + extend: { + fontFamily: { + sans: ["var(--font-sans)", ...fontFamily.sans], + }, + }, + }, + plugins: [], +} satisfies Config; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1dfa3a8 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,35 @@ +{ + "compilerOptions": { + "target": "es2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "checkJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "noUncheckedIndexedAccess": true, + "baseUrl": ".", + "paths": { + "~/*": ["./src/*"] + }, + "plugins": [{ "name": "next" }] + }, + "include": [ + ".eslintrc.cjs", + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + "**/*.cjs", + "**/*.mjs", + ".next/types/**/*.ts" + ], + "exclude": ["node_modules"] +}