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;

import { BsHouseFill, BsBellFill } from 'react-icons/bs'
import { FaUser } from 'react-icons/fa'
import { BiLogOut } from 'react-icons/bi'

import SidebarLog from './SidebarLogo'
import SidebarItem from './SidebarItem'
import SiderbarTweetButton from './SiderbarTweetButton'

const Sidebar = () => {
    const items = [
        {
            label: 'Home',
            href:'/',
            icon: BsHouseFill
        },
        {
            label: 'Notifications',
            href:'/notifications',
            icon: BsBellFill
        },       
        {
            label: 'Profile',
            href:'/users/123',
            icon: FaUser
        },
        
    ]
    
    return(
        <div className='col-span-1 h-full pr-4 pr-6'>
          <div  className='flex flex-col items-end'>
            <div  className='space-y-2 lg:w-[230px]'>
                <SidebarLog />
                {items.map((item) =>(
                    <SidebarItem
                       key={item.href}
                       href={item.href}
                       label={item.label}
                       icon={item.icon}
                    />
                ))}

                <SidebarItem onclick={() => {}} icon={ BiLogOut } label='Logout' href='/'  />
                <SiderbarTweetButton />
            </div>
          </div>
        </div>
    );
}

export default Sidebar