Add prisma ORM

Took 3 hours 2 minutes

.gitignore

@@ -39,4 +39,5 @@ next-env.d.ts
 */**/.DS_Store
 
 # Webstorm files
-.idea
+.idea/
+.env

next.config.js

@@ -1,6 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig = {reactStrictMode: true};
-  reactStrictMode: true,
-}
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -9,14 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@types/node": "18.14.6",
+    "@chakra-ui/react": "^2.5.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@prisma/client": "^4.11.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
+    "framer-motion": "^10.0.2",
     "next": "13.2.3",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react-dom": "18.2.0"
-    "typescript": "4.9.5"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.1",
+    "next-transpile-modules": "^10.0.0",
+    "prisma": "^4.11.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.5"
   }
 }

prisma/schema.prisma

@@ -0,0 +1,14 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "mongodb"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id        String    @id @default(auto()) @map("_id") @db.ObjectId
+  email     String    @unique
+  password  String?
+}

src/components/Navbar.tsx

@@ -0,0 +1,36 @@
+import {Box, Flex, Text, ButtonGroup, Button} from '@chakra-ui/react';
+
+export default function Navbar() {
+  return (
+      <Box position={'fixed'} zIndex={9999} top={0} width={"100vw"} backdropFilter={'auto'} backdropBlur={'20px'}  px={10} py={2} >
+        <Flex align={'center'}>
+          <LeftContent/>
+          <CenterContent/>
+          <RightContent/>
+        </Flex>
+      </Box>
+  );
+}
+
+const LeftContent = () => (
+    <Box flexBasis={"100%"}>
+      <Text>Logo</Text>
+    </Box>
+);
+
+const CenterContent = () => (
+    <Flex gap={5} justify={'center'} flexBasis={"100%"}>
+      <Text>A propos</Text>
+      <Text>Contact</Text>
+      <Text>Aide</Text>
+    </Flex>
+);
+
+const RightContent = () => (
+    <Flex justify={'right'} flexBasis={"100%"}>
+      <ButtonGroup>
+        <Button>Inscription</Button>
+        <Button colorScheme={'purple'}>Connexion</Button>
+      </ButtonGroup>
+    </Flex>
+);

src/components/layout/Home/HomeHero.tsx

@@ -0,0 +1,43 @@
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Flex,
+  Heading,
+  Image,
+  Text,
+} from '@chakra-ui/react';
+
+export default function HomeHero() {
+
+  return (
+      <Flex bg={'#FAF9FF'} px={150} minH={'100vh'} align={'center'}
+            justify={'center'}>
+        <Flex gap={10}>
+          <LeftSide/>
+          <RightSide/>
+        </Flex>
+      </Flex>
+  );
+}
+
+const LeftSide = () => (
+    <Flex justify={'center'} direction={'column'} flexBasis={'100%'}>
+      <Heading mb={'2.5rem'}>Prêt(e) à trouver votre âme sœur ?</Heading>
+      <Text mb={'2rem'}>Notre site de rencontre vous offre la possibilité de
+        rencontrer des personnes intéressantes et de trouver l&apos;amour.
+        Inscrivez-vous dès maintenant pour découvrir toutes nos fonctionnalités
+        !
+      </Text>
+      <ButtonGroup>
+        <Button colorScheme={'purple'}>S&apos;inscrire</Button>
+      </ButtonGroup>
+    </Flex>
+);
+
+const RightSide = () => (
+    <Box flexBasis={'100%'}>
+      <Image borderRadius={20} boxShadow={'lg'} src={'/couple_img.jpg'}
+             alt="happy couple"/>
+    </Box>
+);

src/pages/_app.tsx

@@ -1,6 +1,11 @@
-import '@/styles/globals.css'
+import '@/styles/globals.css';
-import type { AppProps } from 'next/app'
+import type {AppProps} from 'next/app';
+import {ChakraProvider} from '@chakra-ui/react';
 
-export default function App({ Component, pageProps }: AppProps) {
+export default function App({Component, pageProps}: AppProps) {
-  return <Component {...pageProps} />
+  return (
+      <ChakraProvider>
+        <Component {...pageProps} />
+      </ChakraProvider>
+  );
 }

src/pages/api/user/createUser.ts

@@ -0,0 +1,15 @@
+import {NextApiRequest, NextApiResponse} from 'next';
+import { PrismaClient } from '@prisma/client'
+const prisma = new PrismaClient();
+
+export default async function createUser(req: NextApiRequest, res: NextApiResponse) {
+
+  const newUser = await prisma.user.create({
+    data: {
+      name: 'Alice',
+      email: 'alice@prisma.io',
+    },
+  });
+
+  return res.status(201).send({message: "createUser"}); // TODO
+}

src/pages/api/user/deleteUser.ts

@@ -0,0 +1,5 @@
+import {NextApiRequest, NextApiResponse} from 'next';
+
+export default function deleteUser(req: NextApiRequest, res: NextApiResponse) {
+  return res.status(200).send({message: "deleteUser"}); // TODO
+}

src/pages/api/user/index.ts

@@ -0,0 +1,24 @@
+import type {NextApiRequest, NextApiResponse} from 'next';
+import createUser from '@/pages/api/user/createUser';
+import readUser from '@/pages/api/user/readUser';
+import updateUser from '@/pages/api/user/updateUser';
+import deleteUser from '@/pages/api/user/deleteUser';
+import CRUD from '@/utils/CRUD';
+
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse,
+) {
+  const {method} = req;
+
+  if (method === CRUD.CREATE) return createUser(req, res);
+  if (method === CRUD.READ) return readUser(req, res);
+  if (method === CRUD.UPDATE) return updateUser(req, res);
+  if (method === CRUD.DELETE) return deleteUser(req, res);
+  return help(req, res);
+}
+
+function help(req: NextApiRequest, res: NextApiResponse) {
+  res.status(400).send({message: 'error'}); // TODO add help message
+}

src/pages/api/user/readUser.ts

@@ -0,0 +1,5 @@
+import {NextApiRequest, NextApiResponse} from 'next';
+
+export default function readUser(req: NextApiRequest, res: NextApiResponse) {
+  return res.status(200).send({message: "readUser"}); // TODO
+}

src/pages/api/user/updateUser.ts

@@ -0,0 +1,5 @@
+import {NextApiRequest, NextApiResponse} from 'next';
+
+export default function updateUser(req: NextApiRequest, res: NextApiResponse) {
+  return res.status(200).send({message: "updateUser"}); // TODO
+}

src/pages/index.tsx

@@ -1,123 +1,23 @@
-import Head from 'next/head'
+import Head from 'next/head';
-import Image from 'next/image'
+import Navbar from '@/components/Navbar';
-import { Inter } from 'next/font/google'
+import {Box, Image} from '@chakra-ui/react';
-import styles from '@/styles/Home.module.css'
+import HomeHero from '@/components/layout/Home/HomeHero';
-
-const inter = Inter({ subsets: ['latin'] })
 
 export default function Home() {
   return (
-    <>
+      <>
-      <Head>
+        <Head>
-        <title>Create Next App</title>
+          <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
+          <meta name="description" content="Generated by create next app"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta name="viewport" content="width=device-width, initial-scale=1"/>
-        <link rel="icon" href="/favicon.ico" />
+          <link rel="icon" href="/favicon.ico"/>
-      </Head>
+        </Head>
-      <main className={styles.main}>
-        <div className={styles.description}>
-          <p>
-            Get started by editing&nbsp;
-            <code className={styles.code}>src/pages/index.tsx</code>
-          </p>
-          <div>
-            <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By{' '}
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                className={styles.vercelLogo}
-                width={100}
-                height={24}
-                priority
-              />
-            </a>
-          </div>
-        </div>
 
-        <div className={styles.center}>
+        <Navbar/>
-          <Image
+        <HomeHero/>
-            className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
-            width={180}
-            height={37}
-            priority
-          />
-          <div className={styles.thirteen}>
-            <Image
-              src="/thirteen.svg"
-              alt="13"
-              width={40}
-              height={31}
-              priority
-            />
-          </div>
-        </div>
 
-        <div className={styles.grid}>
+        <Box minH={'100vh'}>
-          <a
+        </Box>
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+      </>
-            className={styles.card}
+  );
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Docs <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Find in-depth information about Next.js features and&nbsp;API.
-            </p>
-          </a>
-
-          <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Learn <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Templates <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Discover and deploy boilerplate example Next.js&nbsp;projects.
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Deploy <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Instantly deploy your Next.js site to a shareable URL
-              with&nbsp;Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-    </>
-  )
 }

src/utils/CRUD.ts

@@ -0,0 +1,8 @@
+const CRUD = {
+  CREATE: "PUT",
+  READ: "GET",
+  UPDATE: "POST",
+  DELETE: "DELETE",
+};
+
+export default CRUD;