├── .github
    ├── renovate.json
    └── workflows
    │   └── test.yml
├── .gitignore
├── README.md
├── lib
    └── prisma.js
├── package.json
├── pages
    ├── _app.js
    ├── api
    │   ├── index.js
    │   ├── posts.js
    │   ├── seed.js
    │   └── users.js
    └── index.js
├── prisma
    ├── migrations
    │   ├── 20211004163457_init
    │   │   └── migration.sql
    │   └── migration_lock.toml
    └── schema.prisma
├── public
    ├── favicon.png
    ├── index.html
    ├── prisma.svg
    └── vercel.svg
└── styles
    ├── Home.module.css
    └── globals.css


/.github/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["config:base"],
 3 |   "reviewers": ["janpio", "ruheni", "zachtil"],
 4 |   "semanticCommits": "enabled",
 5 |   "dependencyDashboard": true,
 6 |   "timezone": "Europe/Berlin",
 7 |   "baseBranches": ["main", "data-proxy"],
 8 |   "packageRules": [
 9 |     {
10 |       "matchPackageNames": ["next", "react", "react-dom"],
11 |       "groupName": "deps (non-major)",
12 |       "automerge": "true"
13 |     },
14 |     {
15 |       "matchPackagePatterns": ["@prisma/*"],
16 |       "matchPackageNames": ["prisma"],
17 |       "matchUpdateTypes": ["minor", "patch"],
18 |       "groupName": "Prisma Dependencies",
19 |       "groupSlug": "prisma-deps",
20 |       "automerge": "true"
21 |     }
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: "Test"
 2 | on:
 3 |   pull_request:
 4 |     branches:
 5 |       - main
 6 |       - data-proxy
 7 | 
 8 | jobs:
 9 |   test:
10 |     runs-on: ubuntu-latest
11 |     services:
12 |       postgres:
13 |         image: postgres
14 |         env:
15 |           POSTGRES_USER: postgres
16 |           POSTGRES_PASSWORD: postgres
17 |         options: >-
18 |           --health-cmd pg_isready
19 |           --health-interval 10s
20 |           --health-timeout 5s
21 |           --health-retries 5
22 |         ports:
23 |           - 5432:5432
24 |     env:
25 |       DATABASE_URL: postgresql://postgres:postgres@localhost:5432/deployment-example-vercel
26 |     steps:
27 |       - uses: actions/checkout@v3
28 |       - uses: actions/setup-node@v3
29 |         with:
30 |           node-version: 16
31 |       - run: npm install
32 |       - run: npx prisma migrate deploy
33 |       - name: 'Start server & test API routes'
34 |         run: |
35 |           npm run dev &
36 |           pid=$!
37 | 
38 |           sleep 15
39 |           # check api routes
40 |           curl --fail 'http://localhost:3000/api'
41 |           curl --fail 'http://localhost:3000/api/seed'
42 |           curl --fail 'http://localhost:3000/api/users'
43 |           curl --fail 'http://localhost:3000/api/posts'
44 |           kill "$pid"
45 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .now
 2 | node_modules/
 3 | *.env*
 4 | 
 5 | .vercel
 6 | package-lock.json
 7 | 
 8 | # next.js
 9 | /.next/
10 | /out/
11 | 
12 | # production
13 | /build
14 | 
15 | # misc
16 | .DS_Store
17 | *.pem
18 | 
19 | # debug
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | 
24 | # local env files
25 | .env.local
26 | .env.development.local
27 | .env.test.local
28 | .env.production.local
29 | 
30 | # vercel
31 | .vercel
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vercel deployment example
2 | 
3 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fprisma%2Fdeployment-example-vercel&env=DATABASE_URL&envDescription=PostgreSQL%20connection%20string&envLink=https%3A%2F%2Fwww.prisma.io%2Fdocs%2Fconcepts%2Fdatabase-connectors%2Fpostgresql%23connection-url&project-name=prisma-vercel-deployment-example&repo-name=prisma-vercel-deployment-example)
4 | 
5 | [Deployment guide](https://www.prisma.io/docs/guides/deployment/deploying-to-vercel)


--------------------------------------------------------------------------------
/lib/prisma.js:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from '@prisma/client'
 2 | 
 3 | // Avoid instantiating too many instances of Prisma in development
 4 | // https://www.prisma.io/docs/support/help-articles/nextjs-prisma-client-dev-practices#problem
 5 | let prisma
 6 | 
 7 | if (process.env.NODE_ENV === 'production') {
 8 |   prisma = new PrismaClient()
 9 | } else {
10 |   if (!global.prisma) {
11 |     global.prisma = new PrismaClient()
12 |   }
13 |   prisma = global.prisma
14 | }
15 | 
16 | export default prisma
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "deployment-example-prisma-vercel",
 3 |   "dependencies": {
 4 |     "@prisma/client": "4.16.2",
 5 |     "next": "13.5.11",
 6 |     "react": "18.3.1",
 7 |     "react-dom": "18.3.1"
 8 |   },
 9 |   "scripts": {
10 |     "dev": "next dev",
11 |     "build": "next build",
12 |     "start": "next start",
13 |     "vercel-build": "prisma generate && prisma migrate deploy && next build",
14 |     "prisma:generate": "prisma generate"
15 |   },
16 |   "devDependencies": {
17 |     "prisma": "4.16.2"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 
7 | export default MyApp
8 | 


--------------------------------------------------------------------------------
/pages/api/index.js:
--------------------------------------------------------------------------------
1 | export default async (req, res) => {
2 |   res.status(200).json({ up: true })
3 | }
4 | 


--------------------------------------------------------------------------------
/pages/api/posts.js:
--------------------------------------------------------------------------------
 1 | import prisma from '../../lib/prisma'
 2 | 
 3 | export default async (req, res) => {
 4 |   if (req.method === 'GET') {
 5 |     try {
 6 |       const users = await prisma.post.findMany({
 7 |         include: { author: true },
 8 |       })
 9 |       res.status(200).json(users)
10 |     } catch (error) {
11 |       console.error(error)
12 |       res.status(500).json(error)
13 |     }
14 |   } else if (req.method === 'POST') {
15 |     const { title, content, authorEmail } = req.body
16 |     try {
17 |       const createdPost = await prisma.post.create({
18 |         data: {
19 |           title,
20 |           content,
21 |           author: {
22 |             connect: {
23 |               email: authorEmail,
24 |             },
25 |           },
26 |         },
27 |       })
28 |       res.status(200).json(createdPost)
29 |     } catch (e) {
30 |       console.error(e)
31 |       return res.status(500)
32 |     }
33 |   } else {
34 |     res.status(404)
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/pages/api/seed.js:
--------------------------------------------------------------------------------
 1 | import prisma from '../../lib/prisma'
 2 | 
 3 | export default async (req, res) => {
 4 |   try {
 5 |     await Promise.all([
 6 |       prisma.profile.deleteMany({}),
 7 |       prisma.post.deleteMany({}),
 8 |     ])
 9 |     await prisma.user.deleteMany({})
10 | 
11 |     const createdUser = await prisma.user.create({
12 |       data: seedUser,
13 |     })
14 | 
15 |     const createdUser2 = await prisma.user.create({
16 |       data: seedUser2,
17 |     })
18 | 
19 |     res.status(201).json([createdUser, createdUser2])
20 |   } catch (error) {
21 |     console.error(error)
22 |     return res.status(500).end()
23 |   }
24 | }
25 | 
26 | const seedUser = {
27 |   email: 'jane@prisma.io',
28 |   name: 'Jane',
29 |   profiles: {
30 |     create: [
31 |       {
32 |         bio: 'Technical Writer',
33 |       },
34 |       {
35 |         bio: 'Health Enthusiast',
36 |       },
37 |       {
38 |         bio: 'Self Quantifier',
39 |       },
40 |     ],
41 |   },
42 |   posts: {
43 |     create: [
44 |       {
45 |         title:
46 |           'Comparing Database Types: How Database Types Evolved to Meet Different Needs',
47 |         content:
48 |           'https://www.prisma.io/blog/comparison-of-database-models-1iz9u29nwn37/',
49 |       },
50 |       {
51 |         title: 'Analysing Sleep Patterns: The Quantified Self',
52 |         content: 'https://quantifiedself.com/get-started/',
53 |       },
54 |     ],
55 |   },
56 | }
57 | 
58 | const seedUser2 = {
59 |   email: 'toru@prisma.io',
60 |   name: 'Toru Takemitsu',
61 |   profiles: {
62 |     create: [
63 |       {
64 |         bio: 'Composer',
65 |       },
66 |       {
67 |         bio: 'Musician',
68 |       },
69 |       {
70 |         bio: 'Writer',
71 |       },
72 |     ],
73 |   },
74 |   posts: {
75 |     create: [
76 |       {
77 |         title: 'Requiem for String Orchestra',
78 |         content: '',
79 |       },
80 |       {
81 |         title: 'Music of Tree',
82 |         content: '',
83 |       },
84 |       {
85 |         title: 'Waves for clarinet, horn, two trombones and bass drum ',
86 |         content: '',
87 |       },
88 |     ],
89 |   },
90 | }
91 | 


--------------------------------------------------------------------------------
/pages/api/users.js:
--------------------------------------------------------------------------------
 1 | import prisma from '../../lib/prisma'
 2 | import { Prisma } from '@prisma/client'
 3 | 
 4 | export default async (req, res) => {
 5 |   if (req.method === 'GET') {
 6 |     try {
 7 |       const users = await prisma.user.findMany({
 8 |         include: { profiles: true },
 9 |       })
10 |       res.status(200).json(users)
11 |     } catch (error) {
12 |       console.error(error)
13 |       res.status(500).json(error)
14 |     }
15 |   } else if (req.method === 'POST') {
16 |     try {
17 |       const createdUser = await prisma.user.create({
18 |         data: req.body,
19 |       })
20 |       res.status(200).json(createdUser)
21 |     } catch (e) {
22 |       if (e instanceof Prisma.PrismaClientKnownRequestError) {
23 |         if (e.code === 'P2002') {
24 |           return res
25 |             .status(409)
26 |             .json({ error: 'A user with this email already exists' })
27 |         }
28 |       }
29 |       console.error(e)
30 |       return res.status(500)
31 |     }
32 |   } else {
33 |     res.status(404)
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import styles from '../styles/Home.module.css'
 3 | import { useCallback, useState } from 'react'
 4 | 
 5 | const fetchApi = (endpoint) => {
 6 |   return fetch(`/api/${endpoint}`).then((response) => {
 7 |     if (!response.ok) {
 8 |       throw new Error('Network response was not ok')
 9 |     }
10 |     return response.json()
11 |   })
12 | }
13 | 
14 | export default function Home() {
15 |   const [isLoadingPost, setLoadingPost] = useState(false)
16 |   const [apiResponse, setApiResponse] = useState(null)
17 |   const [apiError, setApiError] = useState(null)
18 | 
19 |   const getApiCallback = useCallback(
20 |     (endpoint) => async (e) => {
21 |       setLoadingPost(true)
22 |       setApiError(null)
23 |       try {
24 |         const response = await fetchApi(endpoint)
25 |         setApiResponse(response)
26 |       } catch (e) {
27 |         setApiError(e)
28 |         console.error(e)
29 |       }
30 |       setLoadingPost(false)
31 |     },
32 |     [],
33 |   )
34 | 
35 |   const onGetStatus = useCallback(getApiCallback(''), [])
36 |   const onSeed = useCallback(getApiCallback('seed'), [])
37 |   const onGetUsers = useCallback(getApiCallback('users'), [])
38 |   const onGetPosts = useCallback(getApiCallback('posts'), [])
39 | 
40 |   return (
41 |     <div className={styles.container}>
42 |       <Head>
43 |         <title>Prisma example with Vercel</title>
44 |         <link rel="icon" href="/favicon.png" />
45 |       </Head>
46 | 
47 |       <main className={styles.main}>
48 |         <h1 className={styles.title}>Prisma Vercel Deployment Example</h1>
49 | 
50 |         <div className={styles.grid}>
51 |           <button onClick={onGetStatus} className={styles.apiButton}>
52 |             Check API status
53 |           </button>
54 |           <button onClick={onSeed} className={styles.apiButton}>
55 |             Seed data
56 |           </button>
57 |           <button onClick={onGetUsers} className={styles.apiButton}>
58 |             Load users with profiles
59 |           </button>
60 |           <button onClick={onGetPosts} className={styles.apiButton}>
61 |             Load posts
62 |           </button>
63 |           <div
64 |             className={`${styles.loader} ${isLoadingPost ? '' : styles.hidden}`}
65 |           ></div>
66 |         </div>
67 |         <pre
68 |           className={`responseContainer ${styles.code} ${
69 |             apiResponse ? '' : styles.hidden
70 |           }`}
71 |         >
72 |           {apiResponse && JSON.stringify(apiResponse, null, 2)}
73 |         </pre>
74 |       </main>
75 | 
76 |       <footer className={styles.footer}>
77 |         Powered by{' '}
78 |         <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
79 |         &
80 |         <img src="/prisma.svg" alt="Prisma Logo" className={styles.logo} />
81 |       </footer>
82 |     </div>
83 |   )
84 | }
85 | 


--------------------------------------------------------------------------------
/prisma/migrations/20211004163457_init/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "Post" (
 3 |     "id" SERIAL NOT NULL,
 4 |     "content" TEXT,
 5 |     "title" TEXT NOT NULL,
 6 |     "authorId" INTEGER,
 7 | 
 8 |     CONSTRAINT "Post_pkey" PRIMARY KEY ("id")
 9 | );
10 | 
11 | -- CreateTable
12 | CREATE TABLE "Profile" (
13 |     "id" SERIAL NOT NULL,
14 |     "bio" TEXT,
15 |     "userId" INTEGER NOT NULL,
16 | 
17 |     CONSTRAINT "Profile_pkey" PRIMARY KEY ("id")
18 | );
19 | 
20 | -- CreateTable
21 | CREATE TABLE "User" (
22 |     "id" SERIAL NOT NULL,
23 |     "email" TEXT NOT NULL,
24 |     "name" TEXT,
25 | 
26 |     CONSTRAINT "User_pkey" PRIMARY KEY ("id")
27 | );
28 | 
29 | -- CreateIndex
30 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
31 | 
32 | -- AddForeignKey
33 | ALTER TABLE "Post" ADD CONSTRAINT "Post_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
34 | 
35 | -- AddForeignKey
36 | ALTER TABLE "Profile" ADD CONSTRAINT "Profile_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
37 | 


--------------------------------------------------------------------------------
/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 = "postgresql"


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | generator client {
 2 |   provider = "prisma-client-js"
 3 | }
 4 | 
 5 | datasource db {
 6 |   provider = "postgresql"
 7 |   url      = env("DATABASE_URL")
 8 | }
 9 | 
10 | model Post {
11 |   id       Int     @id @default(autoincrement())
12 |   content  String?
13 |   title    String
14 |   authorId Int?
15 |   author   User?   @relation(fields: [authorId], references: [id])
16 | }
17 | 
18 | model Profile {
19 |   id     Int     @id @default(autoincrement())
20 |   bio    String?
21 |   userId Int
22 |   user   User    @relation(fields: [userId], references: [id])
23 | }
24 | 
25 | model User {
26 |   id       Int       @id @default(autoincrement())
27 |   email    String    @unique
28 |   name     String?
29 |   posts    Post[]
30 |   profiles Profile[]
31 | }
32 | 


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prisma/deployment-example-vercel/545e7ddf088cb034461e59eabeeabaeab4503edd/public/favicon.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Prisma example with Vercel</title>
  5 |     <link
  6 |       rel="stylesheet"
  7 |       href="https://unpkg.com/tailwindcss/dist/tailwind.min.css"
  8 |     />
  9 |     <style type="text/css">
 10 |       .loader,
 11 |       .loader:after {
 12 |         border-radius: 50%;
 13 |         width: 10em;
 14 |         height: 10em;
 15 |       }
 16 |       .loader {
 17 |         top: 30px;
 18 |         right: 30px;
 19 |         font-size: 3px;
 20 |         position: fixed;
 21 |         text-indent: -9999em;
 22 |         border-top: 1.1em solid rgba(255, 255, 255, 0.2);
 23 |         border-right: 1.1em solid rgba(255, 255, 255, 0.2);
 24 |         border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
 25 |         border-left: 1.1em solid #ffffff;
 26 |         -webkit-transform: translateZ(0);
 27 |         -ms-transform: translateZ(0);
 28 |         transform: translateZ(0);
 29 |         -webkit-animation: load8 1.1s infinite linear;
 30 |         animation: load8 1.1s infinite linear;
 31 |       }
 32 |       @-webkit-keyframes load8 {
 33 |         0% {
 34 |           -webkit-transform: rotate(0deg);
 35 |           transform: rotate(0deg);
 36 |         }
 37 |         100% {
 38 |           -webkit-transform: rotate(360deg);
 39 |           transform: rotate(360deg);
 40 |         }
 41 |       }
 42 |       @keyframes load8 {
 43 |         0% {
 44 |           -webkit-transform: rotate(0deg);
 45 |           transform: rotate(0deg);
 46 |         }
 47 |         100% {
 48 |           -webkit-transform: rotate(360deg);
 49 |           transform: rotate(360deg);
 50 |         }
 51 |       }
 52 |     </style>
 53 |   </head>
 54 |   <body>
 55 |     <div class="py-24" style="background: rgb(12, 52, 75)">
 56 |       <div class="container mx-auto px-6">
 57 |         <h2 class="text-4xl font-bold mb-8 text-white">
 58 |           Prisma example with Vercel
 59 |         </h2>
 60 |         <button
 61 |           onclick="getApi('')"
 62 |           class="fetch-button focus:outline-none bg-white font-bold rounded-full py-4 px-8 my-2 shadow-lg uppercase tracking-wider"
 63 |         >
 64 |           Check API status
 65 |         </button>
 66 |         <button
 67 |           onclick="getApi('seed')"
 68 |           class="fetch-button focus:outline-none bg-white font-bold rounded-full py-4 px-8 my-2 shadow-lg uppercase tracking-wider"
 69 |         >
 70 |           Seed data
 71 |         </button>
 72 |         <button
 73 |           onclick="getApi('users')"
 74 |           class="fetch-button focus:outline-none bg-white font-bold rounded-full py-4 px-8 my-2 shadow-lg uppercase tracking-wider"
 75 |         >
 76 |           Load users with profiles
 77 |         </button>
 78 |         <button
 79 |           onclick="getApi('posts')"
 80 |           class="fetch-button focus:outline-none bg-white font-bold rounded-full py-4 px-8 my-2 shadow-lg uppercase tracking-wider"
 81 |         >
 82 |           Load posts
 83 |         </button>
 84 |         <div class="loader invisible"></div>
 85 |       </div>
 86 |     </div>
 87 | 
 88 |     <div class="container mx-auto">
 89 |       <pre
 90 |         class="response-container text-white px-8 pt-6 pb-8 bg-black shadow-md invisible"
 91 |       ></pre>
 92 |     </div>
 93 | 
 94 |     <script>
 95 |       const responseContainer = document.querySelector('.response-container')
 96 |       const loader = document.querySelector('.loader')
 97 |       function renderResponse(res) {
 98 |         responseContainer.textContent = JSON.stringify(res, null, 2)
 99 |       }
100 | 
101 |       const getApi = endpoint => {
102 |         loader.classList.remove('invisible')
103 |         fetch(`/api/${endpoint}`)
104 |           .then(function(response) {
105 |             return response.json()
106 |           })
107 |           .then(function(response) {
108 |             renderResponse(response)
109 |             responseContainer.classList.remove('invisible')
110 |             loader.classList.add('invisible')
111 |           })
112 |           .catch(function(err) {
113 |             responseContainer.classList.remove('invisible')
114 |             responseContainer.textContent = 'Error fetching'
115 |           })
116 |           .finally(function() {
117 |             loader.classList.add('invisible')
118 |           })
119 |       }
120 |     </script>
121 |   </body>
122 | </html>
123 | 


--------------------------------------------------------------------------------
/public/prisma.svg:
--------------------------------------------------------------------------------
1 | <svg width="106" height="128" viewBox="0 0 106 128" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M105.306 97.5187L61.2843 4.03669V4.03469C60.1803 1.69769 57.8763 0.155691 55.2653 0.0126908C52.5863 -0.143309 50.1863 1.14869 48.8323 3.34769L1.08827 80.6777C-0.390728 83.0877 -0.361728 86.0597 1.17227 88.4407L24.5103 124.593C25.9013 126.751 28.3113 128 30.8163 128C31.5263 128 32.2403 127.9 32.9423 127.692L100.686 107.656C102.761 107.042 104.458 105.574 105.346 103.628C106.231 101.681 106.217 99.4527 105.306 97.5187ZM95.4493 101.529L37.9703 118.529C36.2143 119.049 34.5313 117.53 34.9003 115.759L55.4343 17.4197C55.8183 15.5807 58.3603 15.2887 59.1623 16.9917L97.1823 97.7277C97.8993 99.2507 97.0813 101.047 95.4493 101.529Z" fill="black"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/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>


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   min-height: 100vh;
  3 |   padding: 0 0.5rem;
  4 |   display: flex;
  5 |   flex-direction: column;
  6 |   justify-content: center;
  7 |   align-items: center;
  8 | }
  9 | 
 10 | .main {
 11 |   padding: 5rem 0;
 12 |   flex: 1;
 13 |   display: flex;
 14 |   flex-direction: column;
 15 |   justify-content: center;
 16 |   align-items: center;
 17 | }
 18 | 
 19 | .footer {
 20 |   width: 100%;
 21 |   height: 100px;
 22 |   border-top: 1px solid #eaeaea;
 23 |   display: flex;
 24 |   justify-content: center;
 25 |   align-items: center;
 26 | }
 27 | 
 28 | .footer img {
 29 |   margin-left: 0.5rem;
 30 | }
 31 | 
 32 | .footer a {
 33 |   display: flex;
 34 |   justify-content: center;
 35 |   align-items: center;
 36 | }
 37 | 
 38 | .title a {
 39 |   color: #0070f3;
 40 |   text-decoration: none;
 41 | }
 42 | 
 43 | .title a:hover,
 44 | .title a:focus,
 45 | .title a:active {
 46 |   text-decoration: underline;
 47 | }
 48 | 
 49 | .title {
 50 |   margin: 0;
 51 |   line-height: 1.15;
 52 |   font-size: 3rem;
 53 | }
 54 | 
 55 | .title,
 56 | .description {
 57 |   text-align: center;
 58 | }
 59 | 
 60 | .description {
 61 |   line-height: 1.5;
 62 |   font-size: 1.5rem;
 63 | }
 64 | 
 65 | .code {
 66 |   background: #fafafa;
 67 |   border-radius: 5px;
 68 |   padding: 0.75rem;
 69 |   font-size: 1.1rem;
 70 |   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 71 |     Bitstream Vera Sans Mono, Courier New, monospace;
 72 | }
 73 | 
 74 | .grid {
 75 |   display: flex;
 76 |   align-items: center;
 77 |   justify-content: center;
 78 |   flex-wrap: wrap;
 79 |   max-width: 400px;
 80 |   margin-top: 3rem;
 81 | }
 82 | 
 83 | .card {
 84 |   margin: 0.5rem;
 85 |   flex-basis: 45%;
 86 |   padding: 1rem;
 87 |   text-align: left;
 88 |   color: inherit;
 89 |   text-decoration: none;
 90 |   border: 1px solid #eaeaea;
 91 |   border-radius: 10px;
 92 |   transition: color 0.15s ease, border-color 0.15s ease;
 93 | }
 94 | 
 95 | 
 96 | .apiButton {
 97 |   margin: 0.5rem;
 98 |   flex-basis: 45%;
 99 |   padding: 1rem;
100 |   color: white;
101 |   background-color: #0152ae;
102 |   border: none;
103 |   padding: 10px 15px;
104 |   border-radius: 10px;
105 |   cursor: pointer;
106 | }
107 | 
108 | .apiButton:hover,
109 | .apiButton:focus,
110 | .apiButton:active {
111 |   outline: none;
112 | }
113 | 
114 | .apiButton:hover {
115 |   background-color: #0071f2;  
116 | }
117 | 
118 | .logo {
119 |   height: 1em;
120 |   margin-right: 0.5rem;
121 | }
122 | 
123 | @media (max-width: 600px) {
124 |   .grid {
125 |     width: 100%;
126 |     flex-direction: column;
127 |   }
128 | }
129 | 
130 | .loader,
131 | .loader:after {
132 |   border-radius: 50%;
133 |   width: 10em;
134 |   height: 10em;
135 | }
136 | .loader {
137 |   top: 30px;
138 |   right: 30px;
139 |   font-size: 3px;
140 |   position: fixed;
141 |   text-indent: -9999em;
142 |   border-top: 1.1em solid rgb(59, 177, 255);
143 |   border-right: 1.1em solid rgb(59, 177, 255);
144 |   border-bottom: 1.1em solid rgb(59, 177, 255);
145 |   border-left: 1.1em solid #ffffff;
146 |   -webkit-transform: translateZ(0);
147 |   -ms-transform: translateZ(0);
148 |   transform: translateZ(0);
149 |   -webkit-animation: load8 1.1s infinite linear;
150 |   animation: load8 1.1s infinite linear;
151 | }
152 | @-webkit-keyframes load8 {
153 |   0% {
154 |     -webkit-transform: rotate(0deg);
155 |     transform: rotate(0deg);
156 |   }
157 |   100% {
158 |     -webkit-transform: rotate(360deg);
159 |     transform: rotate(360deg);
160 |   }
161 | }
162 | @keyframes load8 {
163 |   0% {
164 |     -webkit-transform: rotate(0deg);
165 |     transform: rotate(0deg);
166 |   }
167 |   100% {
168 |     -webkit-transform: rotate(360deg);
169 |     transform: rotate(360deg);
170 |   }
171 | }
172 | 
173 | .hidden {
174 |   display: none
175 | }
176 | 
177 | .code {
178 |   background-color: black;
179 |   color: white;
180 |   max-height: 400px;
181 |   overflow: scroll;
182 |   font-size: 1rem;
183 | }


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 | }
 8 | 
 9 | a {
10 |   color: inherit;
11 |   text-decoration: none;
12 | }
13 | 
14 | * {
15 |   box-sizing: border-box;
16 | }
17 | 


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