├── .eslintrc.json
├── public
    ├── favicon.ico
    └── vercel.svg
├── postcss.config.js
├── src
    ├── styles
    │   └── globals.css
    ├── utils
    │   └── trpc.ts
    ├── pages
    │   ├── api
    │   │   └── trpc
    │   │   │   └── [trpc].ts
    │   ├── _app.tsx
    │   └── index.tsx
    ├── server
    │   ├── context.ts
    │   └── router.ts
    └── components
    │   └── Card.tsx
├── next.config.js
├── prisma
    ├── migrations
    │   ├── migration_lock.toml
    │   └── 20220605160819_init
    │   │   └── migration.sql
    └── schema.prisma
├── README.md
├── next-env.d.ts
├── tailwind.config.js
├── .gitignore
├── tsconfig.json
└── package.json


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FranciscoMendes10866/next-tailwind-trpc-prisma/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | * {
6 |     font-family: "Poppins";
7 |   }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | module.exports = nextConfig
7 | 


--------------------------------------------------------------------------------
/prisma/migrations/migration_lock.toml:
--------------------------------------------------------------------------------
1 | # Please do not edit this file manually
2 | # It should be added in your version-control system (i.e. Git)
3 | provider = "sqlite"


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # next-tailwind-trpc-prisma
2 | Simple Grocery List 🛍
3 | 
4 | ![image](https://res.cloudinary.com/dj5iihhqv/image/upload/v1654636896/Kapture_2022-06-07_at_22.19.07-min_vsi8p5.gif)


--------------------------------------------------------------------------------
/src/utils/trpc.ts:
--------------------------------------------------------------------------------
1 | import type { ServerRouter } from "@/server/router";
2 | import { createReactQueryHooks } from "@trpc/react";
3 | 
4 | export const trpc = createReactQueryHooks<ServerRouter>();
5 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/prisma/migrations/20220605160819_init/migration.sql:
--------------------------------------------------------------------------------
1 | -- CreateTable
2 | CREATE TABLE "GroceryList" (
3 |     "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
4 |     "title" TEXT NOT NULL,
5 |     "checked" BOOLEAN DEFAULT false
6 | );
7 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     "./src/pages/**/*.{js,ts,jsx,tsx}",
 4 |     "./src/components/**/*.{js,ts,jsx,tsx}",
 5 |   ],
 6 |   theme: {
 7 |     extend: {},
 8 |   },
 9 |   plugins: [],
10 | }
11 | 


--------------------------------------------------------------------------------
/src/pages/api/trpc/[trpc].ts:
--------------------------------------------------------------------------------
 1 | import * as trpcNext from "@trpc/server/adapters/next";
 2 | 
 3 | import { serverRouter } from "@/server/router";
 4 | import { createContext } from "@/server/context";
 5 | 
 6 | export default trpcNext.createNextApiHandler({
 7 |   router: serverRouter,
 8 |   createContext,
 9 | });
10 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | generator client {
 2 |   provider = "prisma-client-js"
 3 | }
 4 | 
 5 | datasource db {
 6 |   provider = "sqlite"
 7 |   url      = "file:./dev.db"
 8 | }
 9 | 
10 | model GroceryList {
11 |   id      Int      @id @default(autoincrement())
12 |   title   String
13 |   checked Boolean? @default(false)
14 | }
15 | 


--------------------------------------------------------------------------------
/src/server/context.ts:
--------------------------------------------------------------------------------
 1 | import * as trpc from "@trpc/server";
 2 | import * as trpcNext from "@trpc/server/adapters/next";
 3 | import { PrismaClient } from "@prisma/client";
 4 | 
 5 | export async function createContext(opts?: trpcNext.CreateNextContextOptions) {
 6 | const prisma = new PrismaClient();
 7 | 
 8 | return { prisma };
 9 | }
10 | 
11 | export type Context = trpc.inferAsyncReturnType<typeof createContext>;
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | 
37 | #prisma
38 | prisma/dev.db


--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import "../styles/globals.css";
 2 | import "@fontsource/poppins";
 3 | import { withTRPC } from "@trpc/next";
 4 | import { AppType } from "next/dist/shared/lib/utils";
 5 | import type { ServerRouter } from "@/server/router";
 6 | 
 7 | const App: AppType = ({ Component, pageProps }) => {
 8 |   return <Component {...pageProps} />;
 9 | };
10 | 
11 | export default withTRPC<ServerRouter>({
12 |   config({ ctx }) {
13 |     const url = process.env.VERCEL_URL
14 |       ? `https://${process.env.VERCEL_URL}/api/trpc`
15 |       : "http://localhost:3000/api/trpc";
16 | 
17 |     return { url };
18 |   },
19 |   ssr: true,
20 | })(App);
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "baseUrl": ".",
18 |     "paths": {
19 |       "@/*": [
20 |         "src/*"
21 |       ],
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "grocery",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@fontsource/poppins": "^4.5.8",
13 |     "@prisma/client": "^3.14.0",
14 |     "@tailwindcss/forms": "^0.5.2",
15 |     "@trpc/client": "^9.24.0",
16 |     "@trpc/next": "^9.24.0",
17 |     "@trpc/react": "^9.24.0",
18 |     "@trpc/server": "^9.24.0",
19 |     "next": "12.1.6",
20 |     "react": "18.1.0",
21 |     "react-dom": "18.1.0",
22 |     "react-query": "^3.39.1",
23 |     "zod": "^3.17.3"
24 |   },
25 |   "devDependencies": {
26 |     "@types/node": "17.0.40",
27 |     "@types/react": "18.0.11",
28 |     "@types/react-dom": "18.0.5",
29 |     "autoprefixer": "^10.4.7",
30 |     "eslint": "8.17.0",
31 |     "eslint-config-next": "12.1.6",
32 |     "postcss": "^8.4.14",
33 |     "prisma": "^3.14.0",
34 |     "tailwindcss": "^3.0.24",
35 |     "typescript": "4.7.3"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/src/server/router.ts:
--------------------------------------------------------------------------------
 1 | import * as trpc from "@trpc/server";
 2 | import { z } from "zod";
 3 | 
 4 | import { Context } from "./context";
 5 | 
 6 | export const serverRouter = trpc
 7 |   .router<Context>()
 8 |   .query("findAll", {
 9 |     resolve: async ({ ctx }) => {
10 |       return await ctx.prisma.groceryList.findMany();
11 |     },
12 |   })
13 |   .mutation("insertOne", {
14 |     input: z.object({
15 |       title: z.string(),
16 |     }),
17 |     resolve: async ({ input, ctx }) => {
18 |       return await ctx.prisma.groceryList.create({
19 |         data: { title: input.title },
20 |       });
21 |     },
22 |   })
23 |   .mutation("updateOne", {
24 |     input: z.object({
25 |       id: z.number(),
26 |       title: z.string(),
27 |       checked: z.boolean(),
28 |     }),
29 |     resolve: async ({ input, ctx }) => {
30 |       const { id, ...rest } = input;
31 | 
32 |       return await ctx.prisma.groceryList.update({
33 |         where: { id },
34 |         data: { ...rest },
35 |       });
36 |     },
37 |   })
38 |   .mutation("deleteAll", {
39 |     input: z.object({
40 |       ids: z.number().array(),
41 |     }),
42 |     resolve: async ({ input, ctx }) => {
43 |       const { ids } = input;
44 | 
45 |       return await ctx.prisma.groceryList.deleteMany({
46 |         where: {
47 |           id: { in: ids },
48 |         },
49 |       });
50 |     },
51 |   });
52 | 
53 | export type ServerRouter = typeof serverRouter;
54 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import type { NextPage } from "next";
 2 | import Head from "next/head";
 3 | import { useCallback, useState } from "react";
 4 | import { trpc } from "@/utils/trpc";
 5 | 
 6 | import {
 7 |   Card,
 8 |   CardContent,
 9 |   CardForm,
10 |   CardHeader,
11 |   List,
12 |   ListItem,
13 | } from "../components/Card";
14 | import { GroceryList } from "@prisma/client";
15 | 
16 | const Home: NextPage = () => {
17 |   const [itemName, setItemName] = useState<string>("");
18 | 
19 |   const { data: list, refetch } = trpc.useQuery(["findAll"]);
20 |   const insertMutation = trpc.useMutation(["insertOne"], {
21 |     onSuccess: () => refetch(),
22 |   });
23 |   const deleteAllMutation = trpc.useMutation(["deleteAll"], {
24 |     onSuccess: () => refetch(),
25 |   });
26 |   const updateOneMutation = trpc.useMutation(["updateOne"], {
27 |     onSuccess: () => refetch(),
28 |   });
29 | 
30 |   const insertOne = useCallback(() => {
31 |     if (itemName === "") return;
32 | 
33 |     insertMutation.mutate({
34 |       title: itemName,
35 |     });
36 | 
37 |     setItemName("");
38 |   }, [itemName, insertMutation]);
39 | 
40 |   const clearAll = useCallback(() => {
41 |     if (list?.length) {
42 |       deleteAllMutation.mutate({
43 |         ids: list.map((item) => item.id),
44 |       });
45 |     }
46 |   }, [list, deleteAllMutation]);
47 | 
48 |   const updateOne = useCallback(
49 |     (item: GroceryList) => {
50 |       updateOneMutation.mutate({
51 |         ...item,
52 |         checked: !item.checked,
53 |       });
54 |     },
55 |     [updateOneMutation]
56 |   );
57 | 
58 |   return (
59 |     <>
60 |       <Head>
61 |         <title>Grocery List</title>
62 |         <meta name="description" content="Visit www.mosano.eu" />
63 |         <link rel="icon" href="/favicon.ico" />
64 |       </Head>
65 | 
66 |       <main>
67 |         <Card>
68 |           <CardContent>
69 |             <CardHeader
70 |               title="Grocery List"
71 |               listLength={list?.length ?? 0}
72 |               clearAllFn={clearAll}
73 |             />
74 |             <List>
75 |               {list?.map((item) => (
76 |                 <ListItem key={item.id} item={item} onUpdate={updateOne} />
77 |               ))}
78 |             </List>
79 |           </CardContent>
80 |           <CardForm
81 |             value={itemName}
82 |             onChange={(e) => setItemName(e.target.value)}
83 |             submit={insertOne}
84 |           />
85 |         </Card>
86 |       </main>
87 |     </>
88 |   );
89 | };
90 | 
91 | export default Home;
92 | 


--------------------------------------------------------------------------------
/src/components/Card.tsx:
--------------------------------------------------------------------------------
  1 | import React, { memo } from "react";
  2 | import type { NextPage } from "next";
  3 | import { GroceryList } from "@prisma/client";
  4 | 
  5 | interface CardProps {
  6 |   children: React.ReactNode;
  7 | }
  8 | 
  9 | export const Card: NextPage<CardProps> = ({ children }) => {
 10 |   return (
 11 |     <div className="h-screen flex flex-col justify-center items-center bg-slate-100">
 12 |       {children}
 13 |     </div>
 14 |   );
 15 | };
 16 | 
 17 | export const CardContent: NextPage<CardProps> = ({ children }) => {
 18 |   return (
 19 |     <div className="bg-white w-5/6 md:w-4/6 lg:w-3/6 xl:w-2/6 rounded-lg drop-shadow-md">
 20 |       {children}
 21 |     </div>
 22 |   );
 23 | };
 24 | 
 25 | interface CardHeaderProps {
 26 |   title: string;
 27 |   listLength: number;
 28 |   clearAllFn?: () => void;
 29 | }
 30 | 
 31 | export const CardHeader: NextPage<CardHeaderProps> = ({
 32 |   title,
 33 |   listLength,
 34 |   clearAllFn,
 35 | }) => {
 36 |   return (
 37 |     <div className="flex flex-row items-center justify-between p-3 border-b border-slate-200">
 38 |       <div className="flex flex-row items-center justify-between">
 39 |         <h1 className="text-base font-medium tracking-wide text-gray-900 mr-2">
 40 |           {title}
 41 |         </h1>
 42 |         <span className="h-5 w-5 bg-blue-200 text-blue-600 flex items-center justify-center rounded-full text-xs">
 43 |           {listLength}
 44 |         </span>
 45 |       </div>
 46 |       <button
 47 |         className="text-sm font-medium text-gray-600 underline"
 48 |         type="button"
 49 |         onClick={clearAllFn}
 50 |       >
 51 |         Clear all
 52 |       </button>
 53 |     </div>
 54 |   );
 55 | };
 56 | 
 57 | export const List: NextPage<CardProps> = ({ children }) => {
 58 |   return <div className="overflow-y-auto h-72">{children}</div>;
 59 | };
 60 | 
 61 | interface ListItemProps {
 62 |   item: GroceryList;
 63 |   onUpdate?: (item: GroceryList) => void;
 64 | }
 65 | 
 66 | const ListItemComponent: NextPage<ListItemProps> = ({ item, onUpdate }) => {
 67 |   return (
 68 |     <div className="h-12 border-b flex items-center justify-start px-3">
 69 |       <input
 70 |         type="checkbox"
 71 |         className="w-4 h-4 border-gray-300 rounded mr-4"
 72 |         defaultChecked={item.checked as boolean}
 73 |         onChange={() => onUpdate?.(item)}
 74 |       />
 75 |       <h2 className="text-gray-600 tracking-wide text-sm">{item.title}</h2>
 76 |     </div>
 77 |   );
 78 | };
 79 | 
 80 | export const ListItem = memo(ListItemComponent);
 81 | 
 82 | interface CardFormProps {
 83 |   value: string;
 84 |   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 85 |   submit: () => void;
 86 | }
 87 | 
 88 | export const CardForm: NextPage<CardFormProps> = ({
 89 |   value,
 90 |   onChange,
 91 |   submit,
 92 | }) => {
 93 |   return (
 94 |     <div className="bg-white w-5/6 md:w-4/6 lg:w-3/6 xl:w-2/6 rounded-lg drop-shadow-md mt-4">
 95 |       <div className="relative">
 96 |         <input
 97 |           className="w-full py-4 pl-3 pr-16 text-sm rounded-lg"
 98 |           type="text"
 99 |           placeholder="Grocery item name..."
100 |           onChange={onChange}
101 |           value={value}
102 |         />
103 |         <button
104 |           className="absolute p-2 text-white -translate-y-1/2 bg-blue-600 rounded-full top-1/2 right-4"
105 |           type="button"
106 |           onClick={submit}
107 |         >
108 |           <svg
109 |             className="w-4 h-4"
110 |             xmlns="http://www.w3.org/2000/svg"
111 |             fill="none"
112 |             viewBox="0 0 24 24"
113 |             stroke="currentColor"
114 |           >
115 |             <path
116 |               strokeLinecap="round"
117 |               strokeLinejoin="round"
118 |               strokeWidth="2"
119 |               d="M12 6v6m0 0v6m0-6h6m-6 0H6"
120 |             />
121 |           </svg>
122 |         </button>
123 |       </div>
124 |     </div>
125 |   );
126 | };
127 | 


--------------------------------------------------------------------------------