Commiting Pull For personal Project

package.json

@@ -12,7 +12,9 @@
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",
     "next": "13.4.19",
+    "next-auth": "^4.24.5",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-quill": "^2.0.0"
   }
 }

prisma/schema.prisma

@@ -0,0 +1,91 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "mongodb"
+  url      = env("DATABASE_URL")
+}
+
+model Account {
+  id                String  @id @default(cuid()) @map("_id")
+  userId            String
+  type              String
+  provider          String
+  providerAccountId String
+  refresh_token     String?
+  access_token      String?
+  expires_at        Int?
+  token_type        String?
+  scope             String?
+  id_token          String?
+  session_state     String?
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([provider, providerAccountId])
+}
+
+model Session {
+  id           String   @id @default(cuid()) @map("_id")
+  sessionToken String   @unique
+  userId       String
+  expires      DateTime
+  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
+model User {
+  id            String    @id @default(cuid()) @map("_id")
+  name          String?
+  email         String    @unique
+  emailVerified DateTime?
+  image         String?
+  accounts      Account[]
+  sessions      Session[]
+  Post          Post[]
+  Comment       Comment[]
+}
+
+model VerificationToken {
+  identifier String   @id @map("_id")
+  token      String   @unique
+  expires    DateTime
+
+  @@unique([identifier, token])
+}
+
+model Category {
+  id    String  @id @default(cuid()) @map("_id")
+  slug  String  @unique
+  title String
+  img   String?
+  Posts Post[]
+}
+
+model Post {
+  id        String    @id @default(cuid()) @map("_id")
+  createdAt DateTime  @default(now())
+  slug      String    @unique
+  title     String
+  desc      String
+  img       String?
+  views     Int       @default(0)
+  catSlug   String
+  cat       Category  @relation(fields: [catSlug], references: [slug])
+  userEmail String
+  user      User      @relation(fields: [userEmail], references: [email])
+  comments  Comment[]
+}
+
+model Comment {
+  id        String   @id @default(cuid()) @map("_id")
+  createdAt DateTime @default(now())
+  desc      String
+  userEmail String
+  user      User     @relation(fields: [userEmail], references: [email])
+  postSlug  String
+  post      Post     @relation(fields: [postSlug], references: [slug])
+}

src/app/[slug]/page.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import styles from './singlePage.module.css';
+import Menu from '@/components/Menu/Menu';
+import Image from 'next/image';
+import Comments from '@/components/comments/Comments';
+const singlePage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.infoContainer}>
+        <div className={styles.textContainer}>
+          <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
+          <div className={styles.user}>
+            <div className={styles.userImageContainer}>
+              <Image src="/p1.jpeg" alt=" " fill className={styles.avatar} />
+            </div>
+
+            <div className={styles.userTextContainer}>
+              <span className={styles.username}>Abhishek</span>
+              <span className={styles.date}>12.08.2023</span>
+            </div>
+          </div>
+        </div>
+        <div className={styles.imageContainer}>
+          <Image src="/p1.jpeg" alt="" fill className={styles.image} />
+        </div>
+      </div>
+      <div className={styles.content}>
+        <div className={styles.post}>
+          <div className={styles.description}>
+            <p>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur,
+              magnam fugiat. Natus eaque harum ex at cum aperiam atque fugiat
+              adipisci ut corporis sint quidem inventore, soluta animi beatae
+              ipsam nam omnis ullam odit, non culpa sed? Rem quae asperiores
+              aperiam, deleniti laboriosam veritatis Lorem
+            </p>
+
+            <h2>Lorem ipsum dolor sit amet consectetur.</h2>
+            <p>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur,
+              magnam fugiat. Natus eaque harum ex at cum aperiam atque fugiat
+              adipisci ut corporis sint quidem inventore, soluta animi beatae
+              ipsam nam omnis ullam odit, non culpa sed? Rem quae asperiores
+              aperiam, deleniti laboriosam veritatis Lorem
+            </p>
+            <h2>Lorem ipsum dolor sit amet consectetur.</h2>
+            <p>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur,
+              magnam fugiat. Natus eaque harum ex at cum aperiam atque fugiat
+              adipisci ut corporis sint quidem inventore, soluta animi beatae
+              ipsam nam omnis ullam odit, non culpa sed? Rem quae asperiores
+              aperiam, deleniti laboriosam veritatis Lorem
+            </p>
+            <h2>Lorem ipsum dolor sit amet consectetur.</h2>
+            <p>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur,
+              magnam fugiat. Natus eaque harum ex at cum aperiam atque fugiat
+              adipisci ut corporis sint quidem inventore, soluta animi beatae
+              ipsam nam omnis ullam odit, non culpa sed? Rem quae asperiores
+              aperiam, deleniti laboriosam veritatis Lorem
+            </p>
+            </div>
+          </div>
+
+          <Menu />
+        </div>
+        <div className={styles.comment}>
+          <Comments />
+        </div>
+
+    </div>
+  );
+};
+
+export default singlePage;

src/app/[slug]/singlePage.module.css

@@ -0,0 +1,95 @@
+.infoContainer {
+  display: flex;
+  align-items: center;
+  gap: 50px;
+}
+
+.textContainer {
+  flex: 1;
+}
+
+.title {
+  font-size: 64px;
+  margin-bottom: 50px;
+}
+
+.user {
+  display: flex;
+
+  align-items: center;
+  gap: 40px;
+}
+
+.userImageContainer {
+  width: 50px;
+  height: 50px;
+  position: relative;
+}
+
+.avatar {
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.userTextContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  color: var(--softTextColor);
+}
+
+.username {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.imageContainer {
+  flex: 1;
+  height: 350px;
+  position: relative;
+}
+
+.image {
+  object-fit: cover;
+}
+
+.content {
+  display: flex;
+  gap: 50px;
+}
+
+.post {
+  flex: 5;
+  margin-top: 60px;
+}
+
+.description p {
+  font-size: 20px;
+  font-weight: 300;
+  margin-bottom: 20px;
+}
+
+@media screen and (max-width: 1536px) {
+  .title {
+    font-size: 54px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .title {
+    font-size: 48px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .imageContainer {
+    display: none;
+  }
+}
+@media screen and (max-width: 640px) {
+  .title {
+    font-size: 36px;
+  }
+
+  .description p {
+    font-size: 18px;
+  }
+}

src/app/api/auth/[...nextauth]/route.js

@@ -0,0 +1,6 @@
+import { authOptions } from '@/utils/auth';
+import NextAuth from 'next-auth';
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

src/app/globals.css

@@ -0,0 +1,78 @@
+:root {
+  --bg: white;
+  --textColor: black;
+  --softBg: #f0f0f0;
+  --softTextColor: #626262;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+.dark {
+  --bg: #0f172a;
+  --textColor: #ddd;
+  --softBg: #1f273a;
+  --softTextColor: a6a6a6;
+}
+
+.container {
+  min-height: 100vh;
+  background-color: var(--bg);
+  color: var(--textColor);
+}
+
+.wrapper {
+  max-width: 1536px;
+  margin-left: auto;
+  margin-right: auto;
+
+  padding-left: 80px;
+  padding-right: 80px;
+}
+.ql-container {
+  font-size: 28px !important;
+}
+
+.quill > .ql-container > .ql-editor.ql-blank::before {
+  color: #b3b3b1;
+}
+
+@media screen and (max-width: 1536px) {
+  .wrapper {
+    max-width: 1366px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .wrapper {
+    max-width: 1024px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .wrapper {
+    max-width: 768px;
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .wrapper {
+    max-width: 640px;
+  }
+}
+@media screen and (max-width: 640px) {
+  .wrapper {
+    max-width: 475px;
+  }
+}

src/app/homepage.module.css

@@ -0,0 +1,4 @@
+.container{
+    display: flex;
+    gap: 50;
+}