Next.js 13 Full Course 2023 | Build and Deploy a Full Stack App Using the Official React Framework

globals.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 
  Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them! 
*/

.main {
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  display: flex;
  justify-content: center;
  padding: 120px 24px 160px 24px;
  pointer-events: none;
}

.main:before {
  background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%);
  position: absolute;
  content: "";
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
}

.main:after {
  content: "";
  background-image: url("/assets/images/grid.svg");
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0.4;
  filter: invert(1);
}

.gradient {
  height: fit-content;
  z-index: 3;
  width: 100%;
  max-width: 640px;
  background-image: radial-gradient(
      at 27% 37%,
      hsla(215, 98%, 61%, 1) 0px,
      transparent 0%
    ),
    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  filter: blur(100px) saturate(150%);
  top: 80px;
  opacity: 0.15;
}

@media screen and (max-width: 640px) {
  .main {
    padding: 0;
  }
}

/* Tailwind Styles */

.app {
  @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6;
}

.black_btn {
  @apply rounded-full border border-black bg-black py-1.5 px-5 text-white transition-all hover:bg-white hover:text-black text-center text-sm font-inter flex items-center justify-center;
}

.outline_btn {
  @apply rounded-full border border-black bg-transparent py-1.5 px-5 text-black transition-all hover:bg-black hover:text-white text-center text-sm font-inter flex items-center justify-center;
}

.head_text {
  @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl;
}

.orange_gradient {
  @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent;
}

.green_gradient {
  @apply bg-gradient-to-r from-green-400 to-green-500 bg-clip-text text-transparent;
}

.blue_gradient {
  @apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent;
}

.desc {
  @apply mt-5 text-lg text-gray-600 sm:text-xl max-w-2xl;
}

.search_input {
  @apply block w-full rounded-md border border-gray-200 bg-white py-2.5 font-satoshi pl-5 pr-12 text-sm shadow-lg font-medium focus:border-black focus:outline-none focus:ring-0;
}

.copy_btn {
  @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer;
}

.glassmorphism {
  @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-5;
}

.prompt_layout {
  @apply space-y-6 py-8 sm:columns-2 sm:gap-6 xl:columns-3;
}

/* Feed Component */
.feed {
  @apply mt-16 mx-auto w-full max-w-xl flex justify-center items-center flex-col gap-2;
}

/* Form Component */
.form_textarea {
  @apply w-full flex rounded-lg h-[200px] mt-2 p-3 text-sm text-gray-500 outline-0;
}

.form_input {
  @apply w-full flex rounded-lg mt-2 p-3 text-sm text-gray-500 outline-0;
}

/* Nav Component */
.logo_text {
  @apply max-sm:hidden font-satoshi font-semibold text-lg text-black tracking-wide;
}

.dropdown {
  @apply absolute right-0 top-full mt-3 w-full p-5 rounded-lg bg-white min-w-[210px] flex flex-col gap-2 justify-end items-end;
}

.dropdown_link {
  @apply text-sm font-inter text-gray-700 hover:text-gray-500 font-medium;
}

/* PromptCard Component */
.prompt_card {
  @apply flex-1 break-inside-avoid rounded-lg border border-gray-300 bg-white/20 bg-clip-padding p-6 pb-4 backdrop-blur-lg backdrop-filter md:w-[360px] w-full h-fit;
}

.flex-center {
  @apply flex justify-center items-center;
}

.flex-start {
  @apply flex justify-start items-start;
}

.flex-end {
  @apply flex justify-end items-center;
}

.flex-between {
  @apply flex justify-between items-center;
}

jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@*": ["./*"]
    }
  }
}

route.js

import Prompt from "@models/prompt";
import { connectToDB } from "@utils/database";

export const GET = async (request, { params }) => {
    try {
        await connectToDB()

        const prompt = await Prompt.findById(params.id).populate("creator")
        if (!prompt) return new Response("Prompt Not Found", { status: 404 });

        return new Response(JSON.stringify(prompt), { status: 200 })

    } catch (error) {
        return new Response("Internal Server Error", { status: 500 });
    }
}

export const PATCH = async (request, { params }) => {
    const { prompt, tag } = await request.json();

    try {
        await connectToDB();

        // Find the existing prompt by ID
        const existingPrompt = await Prompt.findById(params.id);

        if (!existingPrompt) {
            return new Response("Prompt not found", { status: 404 });
        }

        // Update the prompt with new data
        existingPrompt.prompt = prompt;
        existingPrompt.tag = tag;

        await existingPrompt.save();

        return new Response("Successfully updated the Prompts", { status: 200 });
    } catch (error) {
        return new Response("Error Updating Prompt", { status: 500 });
    }
};

export const DELETE = async (request, { params }) => {
    try {
        await connectToDB();

        // Find the prompt by ID and remove it
        await Prompt.findByIdAndRemove(params.id);

        return new Response("Prompt deleted successfully", { status: 200 });
    } catch (error) {
        return new Response("Error deleting prompt", { status: 500 });
    }
};

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        satoshi: ['Satoshi', 'sans-serif'],
        inter: ['Inter', 'sans-serif'],
      },
      colors: {
        'primary-orange': '#FF5722',
      }
    },
  },
  plugins: [],
}

user.js

username: {
    type: String,
    required: [true, 'Username is required!'],
    match: [/^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/, "Username invalid, it should contain 8-20 alphanumeric letters and be unique!"]
  },

can anyone help me out with this one ...! (TypeError: Cannot read properties of undefined (reading 'image')
at PromptCard (webpack-internal:///(app-pages-browser)/./components/PromptCard.jsx:46:51)
at react-stack-bottom-frame (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:22349:20)
at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:5740:22)
at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:8001:19)
at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:9666:18)
at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16)
at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14997:22)
at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14827:41)
at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14807:11)
at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14342:44)
at performWorkOnRootViaSchedulerTask (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15853:7)
at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:44:48)

)

Make sure to have a return true statement at the end of your async signIn function. This might help solve an access denied error. That way the server knows to log the user in after creation.

async signIn({ profile }) {
try {
await connectToDB();

        const userExists = await User.findOne({
            email: profile.email
        })

        if(!userExists) {
            await User.create({
                email: profile.email,
                username: profile.name.replace(/\s/g, "").toLowerCase(),
                image: profile.picture
            })
        }

        return true;

Hello everyone. I´ve been having this issue and don´t know how to fix it. Would appreciate some help.

Hello pls if u solve the problem tell how to do because i have the same error

Check your MongoDB database, for any prompts that are missing the creator key/field and delete those prompts

MongoParseError: option usenewurlparse is not supported
at parseOptions (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongodb/lib/connection_string.js:278:15)
at new MongoClient (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongodb/lib/mongo_client.js:65:61)
at NativeConnection.createClient (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongoose/lib/drivers/node-mongodb-native/connection.js:343:14)
at NativeConnection.openUri (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongoose/lib/connection.js:1071:34)
at Mongoose.connect (/home/nzabanita/WebstormProjects/share_prompts/node_modules/mongoose/lib/mongoose.js:450:15)
at connectToDB (webpack-internal:///(rsc)/./utils/database.js:16:63)
at Object.signIn (webpack-internal:///(rsc)/./app/api/auth/[...nextauth]/route.js:32:83)
at Object.callback (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/callback.js:49:55)
at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:186:38)
at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:50:30)
at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:85:24)
at async /home/nzabanita/WebstormProjects/share_prompts/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:62500 {
errorLabelSet: Set(0) {}
}
Error checking if user exists: Operation users.findOne() buffering timed out after 10000ms

i am stuck on this error has anyone fixed it who can help me?

Good evening everyone, i f there is any one who can help me here it will be nice

'use client'
import {useState} from "react";
import Image from "next/image";
import {useSession} from "next-auth/react";
import {usePathname, useRouter} from "next/navigation";

const PromptCard = ({post, handleTagClick, handleEdit, handleDelete}) => {
const [copied, setCopied] = useState('');

return (
    <div className="prompt_card">
        <div className='flex justify-between items-start gap-5'>
            <div className="flex-1 flex justify-start items-center gap-3 cursor-pointer">
                <Image
                    src={post.creator.image}
                    alt='user_image'
                    width={40}
                    height={40}
                    className="rounded-full object-contain"
                />
                <div className="flex flex-col">
                    <h3 className="font-satoshi font-semibold text-gray-900">
                        {post.creator.username}
                    </h3>
                    <p className="font-satoshi text-sm text-gray-500">
                        {post.creator.email}
                    </p>
                </div>
            </div>

            <div className="copy_btn" onClick={()=>{}}>
                <Image
                    src={copied === post.prompt ? '/assets/icons/tick.svg':'/assets/icons/copy.svg'}
                    width={20}
                    height={20}
                    alt=""
                />
            </div>
        </div>
        <p className="my-4 font-satoshi text-sm text-gray-700">
            {post.prompt}
        </p>
        <p className="font-inter text-sm blue_gradient cursor-pointer">
            {post.tag}
        </p>
    </div>
)

}
export default PromptCard

what should i do to fix the error?

hiii @paladin-2024 the issue you are facing is post.creator.image is undefined is due to the reason.

in your post.creator object you not getting the image key, so here you need to handle like:

{post?.creator?.image && "Your Image Component here"}

            This would ensure that image would be render only if there is post.creator.image (Available.) else it won't print and you won't be having any run time error now. 

Hope this addressed your issue:)

Hello, I am just starting out with the project but i cant get tailwind to work particularly in my page.jsx folder what do i do?

could you check if your tailwind is installed properly? and if you using Tailwind 4.0 make sure you have import in css file like:

@import 'tailwindcss';
and make sure you import the CSS file to you r project in which you have imported tailwind.

ELSE:
try uninstall the tailiwind and re install the same, by following 4.0 docs.

it would start working.

I have done all this though and it is not working. Here is a screenshot of my codes

I got same issue few days back, I removed the styles from folder and added it to app directly. it got fixed for me:)

I got same issue few days back, I removed the styles from folder and added it to app directly. it got fixed for me:)

Thank you for the help so far. Please can you send screenshots of how you did it. I still couldnt figure it out. Thank you

I figured it out, thank you. I had to make adjustment to the globals.css file based on the new tailwind 4 specifications.