npm install react-hot-toast

import type { AppProps } from 'next/app';
import { Toaster } from 'react-hot-toast';
import { SessionProvider } from 'next-auth/react';

import Layout from '../components/Layout'
import LoginModal from '../components/modals/LoginModal'
import RegisterModal from '../components/modals/RegisterModal'
import '../styles/globals.css';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SessionProvider session={ pageProps.session }>
      <Toaster />
      <RegisterModal />
      <LoginModal />
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  )
}

npm install swr
npm install axios

import axios from "axios";

const fetcher = (url: string) => axios.get(url).then( (res) => res.data);

export default fetcher;

import useSWR from 'swr';

import fetcher from '../libs/fetcher';

const useCurrentUser = () => {
    const { data, error, isLoading, mutate } = useSWR('/api/current', fetcher)

    return {
      data,
      error,
      isLoading,
      mutate
    }
};

export default useCurrentUser;

import bcrypt, { compareSync } from 'bcrypt';

import prisma from '../../libs/prismadb';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
  if ( req.method !== 'POST'){
    return res.status(405).end();
  }

  try{
    const { email,username, name, password } = req.body

    const hashedPassword = await bcrypt.hash(password, 12);

    const user = await prisma.user.create({
        data: {
            email,
            username,
            name,
            hashedPassword
        }
    });

    return res.status(200).json(user)
  } catch (error){
    console.log(error);
    return res.status(400).end();
  }
}

npm install bcrypt
npm install -D @types/bcrypt

npm install next-auth
npm install @next-auth/prisma-adapter

npm install -D prisma

npx prisma init

npm install zustand

import { create } from "zustand";

interface LoginModalStore{
  isOpen: boolean;
  onOpen: ()=> void;
  onClose: ()=> void;
};

const useLoginModal = create<LoginModalStore>((set) =>({
  isOpen: true,
  onOpen: () => set({ isOpen: true}),
  onClose: () => set({ isOpen: false})
}));

export default useLoginModal;

import '../styles/globals.css'
import type { AppProps } from 'next/app'

import Layout from '../components/Layout'
import ModalBox from '../components/ModalBox'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <ModalBox actionLabel='Submit' isOpen title='Test Modal' />
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

import Header from "../components/Header";

export default function Home() {
  return (
    <Header showBackArrow label="Home"/>
  )
}

import FollowBar from "./layout/FollowBar";
import Sidebar from "./layout/Siderbar";

interface LayoutProps{
    children: React.ReactNode;
}

const Layout:React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="h-screen bg-black">
        <div className="container h-full mx-auto xl:px-30 max-w-6xl">
            <div className="grid grid-cols-4 h-full">
                <Sidebar />
                <div className="
                   col-span-3
                   lg:col-span-2
                   border-x-[1px]
                   border-neutral-800
                ">
                    { children }
                </div> 
                <FollowBar />
            </div>  
        </div>
     </div>
   );
}

export default Layout;