Build an AI-powered Quora clone with Strapi and Next.js - Part 2

cd apps && \
npx create-next-app@latest quora-frontend --no-src-dir --no-import-alias --no-turbopack --ts --tailwind --eslint --app --use-yarn && \
cd ..

yarn workspace quora-frontend add @headlessui/react @heroicons/react @mdxeditor/editor formik jose marked react-paginate && yarn workspace quora-frontend add yup -D

  "devDependencies": {
    ...
      "strapi-types": "*"
  }

touch apps/quora-frontend/.env

SESSION_SECRET={THE SESSION_SECRET}
NEXT_PUBLIC_STRAPI_URL=http://localhost:1337

openssl rand -hex 32

export const metadata: Metadata = {
  title: "Quora Clone",
  description: "A Quora clone built with Strapi",
}

mkdir -p apps/quora-frontend/app/login && touch apps/quora-frontend/app/login/page.tsx apps/quora-frontend/app/login/styles.module.css

.background {
    background-image: url('../../public/login.webp');
    background-size: cover;
}

'use client'

import { ErrorMessage, Field, Form, Formik } from "formik"
import styles from './styles.module.css'
import { LoginSchema, SignupSchema } from "@/app/lib/definitions/schemas/auth"
import { login, signup } from "@/app/actions/auth"
import { useEffect, useState } from "react"
import { getAllSearchParams } from "../lib/client-request"

function Login() {
    const [signupError, setSignupError] = useState('')
    const [loginError, setLoginError] = useState('')

    const fromLink = getAllSearchParams()['from']

    const fieldClasses = 'bg-neutral-900 border border-neutral-700 hover:border-blue-700  rounded px-1 py-1.5 my-1'

    useEffect(() => {
        document.title = 'Login - Quora Clone'
    }, [])

    return <div className={`w-100 min-h-dvh flex flex-col items-center justify-center border-red-950 ${styles.background}`}>
        <div className="bg-neutral-800 flex flex-col items-center justify-center p-6  rounded-lg">
            <h1 className="text-red-600 text-6xl font-semibold font-serif tracking-tight mb-2 text-center">Quora Clone</h1>
            <h6 className="font-bold  text-center">A place to share knowledge and better understand the world</h6>
            <div className="flex p-6 pt-10 flex-col lg:flex-row">
                <Formik
                    initialValues={{ username: '', password: '', name: '', email: '' }}
                    validationSchema={SignupSchema}
                    onSubmit={async (userInfo) => {
                        setSignupError('')
                        const res = await signup(userInfo)
                        if (res && res.error) {
                            setSignupError(res?.error?.message || 'There was a problem signing you up')
                        }
                    }}
                >
                    {({ errors, touched }) => (
                        <Form
                            className="flex flex-col min-w-64 max-lg:mb-8 max-lg:pb-10 max-lg:border-b max-lg:border-neutral-700"
                        >
                            <h4 className="text-base font-bold border-b border-neutral-700 pb-1.5 mb-1.5">Signup</h4>
                            <label className="text-sm font-bold" htmlFor="name">Name</label>
                            <Field id="name" name="name" placeholder="Your first name" className={fieldClasses} />
                            <ErrorMessage name="name" />
                            <label className="text-sm font-bold" htmlFor="username">Username</label>
                            <Field id="username" name="username" placeholder="Your username" className={fieldClasses} />
                            <ErrorMessage name="username" />
                            <label className="text-sm font-bold" htmlFor="email">Email</label>
                            <Field id="email" name="email" type="email" placeholder="Your email" className={fieldClasses} />
                            <ErrorMessage name="email" />
                            <label className="text-sm font-bold" htmlFor="password">Password</label>
                            <Field id="password" name="password" type="password" placeholder="Your password" className={fieldClasses} />
                            <ErrorMessage name="password" />
                            <button className="rounded bg-blue-600 text-white rounded-xl px-3 py-2 mt-1.5  self-end" type="submit">Signup</button>
                            {signupError && <div className="text-white bg-red-500 font-semibold p-2 mt-3 rounded-md">{signupError}</div>}
                        </Form>
                    )}
                </Formik>
                <Formik
                    initialValues={{ password: '', identifier: '' }}
                    validationSchema={LoginSchema}
                    onSubmit={async (credentials: { identifier: string, password: string }) => {
                        setLoginError('')

                        const res = await login(credentials, fromLink)

                        if (res) {
                            setLoginError(res?.error?.message || 'There was a problem logging you in')
                        }
                    }}
                >
                    {({ errors, touched }) => (
                        <Form
                            className="flex flex-col lg:ml-8 lg:pl-8 lg:border-s lg:border-neutral-700 min-w-64"
                        >
                            <h4 className="text-base font-bold border-b border-neutral-700 pb-1.5 mb-1.5">Login</h4>
                            <label className="text-sm font-bold" htmlFor="login-identifier">Email</label>
                            <Field id="login-identifier" name="identifier" type="email" placeholder="Your email" className={fieldClasses} />
                            <ErrorMessage name="identifier" />
                            <label className="text-sm font-bold" htmlFor="login-password">Password</label>
                            <Field id="login-password" name="password" type="password" placeholder="Your password" className={fieldClasses} />
                            <ErrorMessage name="password" />
                            <button className="rounded bg-blue-600 text-white rounded-xl px-3 py-2 mt-1.5 self-end" type="submit">Login</button>
                            {loginError && <div className="text-white bg-red-500 font-semibold p-2 mt-3 rounded-md">{loginError}</div>}
                        </Form>
                    )}
                </Formik>
            </div>
        </div>
    </div>
}

export default Login

'use client'

import HeaderContainer from "@/app/ui/shared/header-container"
import { useEffect, useRef, useState } from "react"
import { Answer } from "@/app/lib/definitions/content-types"
import { getHomeAnswers, getHomeAnswersCount } from "@/app/actions/answers"
import AnswerCard from "@/app/ui/shared/answers/card"
import Pagination, { SelectedItem } from "./ui/shared/pagination"
import { isLoggedIn } from "./actions/auth"
import ErrorMessage from "./ui/shared/error-message"

export default function Home() {
  const pageSize = 5

  const [ready, setReady] = useState(false)
  const [answerCount, setAnswerCount] = useState(1)
  const [isUserLoggedIn, setIsUserLoggedIn] = useState(false)
  const [answers, setAnswers] = useState([] as Answer[])
  const topRef = useRef<any>(null)

  useEffect(() => {
    isLoggedIn().then(loggedIn => {
      setIsUserLoggedIn(loggedIn)
    })

    getHomeAnswers(1, pageSize).then(answ => {
      if (answ?.error) {
        setAnswers([])
      } else {
        setAnswers(answ)
        setReady(true)
      }
    })

    getHomeAnswersCount().then(cnt => {
      setAnswerCount(cnt.count)
    })
  }, [])

  const fetchAnswers = (selectedItem: SelectedItem) => {
    const selectedPage = selectedItem.selected + 1

    getHomeAnswers(selectedPage, pageSize).then(answ => {
      if (answ?.error) {
        setAnswers([])
      } else {
        setAnswers(answ)

        const top = topRef.current.offsetTop - 110
        window.scrollTo({
          top,
          behavior: "smooth"
        })
      }
    })
  }

  return (
    <HeaderContainer>
      <div
        ref={topRef}
        className="flex flex-col mt-5 w-full items-center max-w-[700px] self-center"
      >
        {!!answers.length ?
          <>
            {
              answers.map((answ, index) => (
                <AnswerCard
                  answer={answ}
                  key={`${answ.id}-${answ.documentId}-${index}`}
                  minimal={false}
                  isUserLoggedIn={isUserLoggedIn}
                />
              ))
            }
            {
              (ready && answerCount > pageSize)
              &&
              <Pagination fetchNext={fetchAnswers} noItems={answerCount} pageSize={pageSize} />
            }
          </> : <ErrorMessage message="No questions posted yet" />}
      </div>
    </HeaderContainer >
  )
}

mkdir -p apps/quora-frontend/app/answer && touch apps/quora-frontend/app/answer/page.tsx

'use client'

import { useEffect, useRef, useState } from "react"
import HeaderContainer from "../ui/shared/header-container"
import { getHomeQuestion, getQuestionCount } from "../actions/questions"
import { Question } from "../lib/definitions/content-types"
import QuestionCard from "../ui/shared/questions/card"
import Pagination, { SelectedItem } from "../ui/shared/pagination"
import { useRouter } from "next/navigation"
import { isLoggedIn } from "../actions/auth"
import ErrorMessage from "../ui/shared/error-message"

export default function AnswerPage() {
    const pageSize = 5

    const [ready, setReady] = useState(false)
    const [questions, setQuestions] = useState([])
    const [questionCount, setQuestionCount] = useState(0)
    const [page, setPage] = useState(1)
    const topRef = useRef<any>(null)
    const router = useRouter()

    const [isUserLoggedIn, setIsUserLoggedIn] = useState(false)


    useEffect(() => {
        isLoggedIn().then(loggedIn => {
            setIsUserLoggedIn(loggedIn)
        })

        getHomeQuestion(page, pageSize).then(qsts => {
            if (!qsts.error) {
                setQuestions(qsts)
                setReady(true)
            }
        })

        getQuestionCount().then(qc => {
            if (!qc.error) {
                setQuestionCount(qc.count)
            }
        })
    }, [])

    const fetchQuestions = (selectedItem: SelectedItem) => {
        const sp = selectedItem.selected + 1

        getHomeQuestion(sp, pageSize).then(qsts => {
            if (!qsts.error) {
                setQuestions(qsts)
                setPage(sp)

                const top = topRef.current.offsetTop - 110
                window.scrollTo({
                    top,
                    behavior: "smooth"
                })
            }
        })
    }

    return <HeaderContainer>
        {
            questions.length > 0 ?
                (ready &&
                    <div
                        ref={topRef}
                        className="flex flex-col mt-5 w-full items-center max-w-[700px] self-center"
                    >

                        {(questions as Question[]).map((question, index) => (
                            <QuestionCard
                                question={question}
                                key={`${question.id}-${question.documentId}-${index}`}
                                commentsAvailable={true}
                                answerCountAvailable={true}
                                refreshAnswers={() => {
                                    router.push(`/question/${question.id}`)
                                    router.refresh()
                                }}
                                isUserLoggedIn={isUserLoggedIn}
                            />
                        ))}
                        {
                            questionCount > pageSize
                            &&
                            <Pagination fetchNext={fetchQuestions} pageSize={pageSize} noItems={questionCount} />
                        }

                    </div>
                )
                :
                <ErrorMessage message="No questions to answer posted yet" />
        }
    </HeaderContainer>
}

mkdir -p apps/quora-frontend/app/question/[id] && touch apps/quora-frontend/app/question/[id]/page.tsx

'use client'

import { useEffect, useRef, useState } from "react"
import { Answer, BotAnswer, Question as QuestionCT } from "@/app/lib/definitions/content-types"
import { getQuestionBotAnswer, getQuestionWithAnswers } from "@/app/actions/questions"
import HeaderContainer from "@/app/ui/shared/header-container"
import AnswerCard from "@/app/ui/shared/answers/card"
import Pagination, { SelectedItem } from "@/app/ui/shared/pagination"
import QuestionCard from "@/app/ui/shared/questions/card"
import { isLoggedIn } from "@/app/actions/auth"
import ErrorMessage from "@/app/ui/shared/error-message"

export default function Question({ params: { id } }: { params: { id: string } }) {
    const pageSize = 4

    const [question, setQuestion] = useState(null)
    const [ready, setReady] = useState(false)
    const [page, setPage] = useState(1)
    const [isUserLoggedIn, setIsUserLoggedIn] = useState(false)
    const [botAnswer, setBotAnswer] = useState(null)
    const topRef = useRef<any>(null)

    useEffect(() => {
        isLoggedIn().then(loggedIn => {
            setIsUserLoggedIn(loggedIn)
        })

        getQuestionWithAnswers(Number(id), page, pageSize)
            .then((res) => {
                if (!res.error) {
                    setQuestion(res)
                    setReady(true)
                }
                return getQuestionBotAnswer(id)
            })
            .then((res) => {
                if (!res.error) {
                    setBotAnswer(res[0])
                }
            })
    }, [])

    const fetchAnswers = (selectedItem: SelectedItem) => {
        const selectedPage = selectedItem.selected + 1

        getQuestionWithAnswers(Number(id), selectedPage, pageSize).then(res => {
            if (!res.error) {
                setQuestion(res)
                setPage(selectedPage)

                const top = topRef.current.offsetTop - 110
                window.scrollTo({
                    top,
                    behavior: "smooth"
                })
            }
        })
    }

    const refreshAnswers = () => {
        getQuestionWithAnswers(Number(id), 1, pageSize).then(res => {
            if (!res.error) {
                setQuestion(res)
                setPage(1)

                const top = topRef.current.offsetTop - 110
                window.scrollTo({
                    top,
                    behavior: "smooth"
                })
            }
        })
    }

    return <HeaderContainer>
        {question ?
            (ready &&
                <div
                    ref={topRef}
                    className="flex flex-col mt-5 w-full items-center max-w-[700px] self-center"
                >
                    <QuestionCard
                        question={question}
                        refreshAnswers={refreshAnswers}
                        isUserLoggedIn={isUserLoggedIn}
                        commentsAvailable={true}
                    />
                    {botAnswer && <AnswerCard
                        answer={botAnswer}
                        key={`${(botAnswer as BotAnswer)?.id}-${(botAnswer as BotAnswer)?.documentId}`}
                        minimal={false}
                        isUserLoggedIn={isUserLoggedIn}
                        isBot={true}
                    />}
                    {((question as QuestionCT)?.answers as Answer[]).length ? ((question as QuestionCT)?.answers as Answer[]).map((answ, index) => (
                        <AnswerCard
                            answer={answ}
                            key={`${answ.id}-${answ.documentId}-${index}`}
                            minimal={false}
                            isUserLoggedIn={isUserLoggedIn}
                        />
                    )) :
                        <div className="text-center h-36 text-2xl font-thin self-stretch rounded-2xl p-3 flex justify-center items-center bg-white/5">
                            No answer has been posted by a human yet
                        </div>
                    }
                    {
                        (question as QuestionCT).answerCount as number > pageSize
                        &&
                        <Pagination fetchNext={fetchAnswers} pageSize={pageSize} noItems={(question as QuestionCT).answerCount as number} />
                    }
                </div>
            ) :
            <ErrorMessage
                message="Question not found"
                linkText="Go home"
                linkHref="/"
            />
        }
    </HeaderContainer>
}

mkdir -p apps/quora-frontend/app/account && touch apps/quora-frontend/app/account/page.tsx

'use client'

import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/react"
import HeaderContainer from "@/app/ui/shared/header-container"
import ProfileTab from "@/app/ui/account/tabs/profile"
import AnswersTab from "@/app/ui/account/tabs/answers"
import QuestionsTab from "@/app/ui/account/tabs/questions"
import CommentsTab from "@/app/ui/account/tabs/comments"
import VotesTab from "@/app/ui/account/tabs/votes"

function Account() {
    const tabs = [
        { name: 'Profile', component: <ProfileTab /> },
        { name: 'Questions', component: <QuestionsTab /> },
        { name: 'Answers', component: <AnswersTab /> },
        { name: 'Comments', component: <CommentsTab /> },
        { name: 'Votes', component: <VotesTab /> }
    ]

    return (
        <HeaderContainer>
            <div className="flex flex-col max-w-[700px] w-full self-center">
                <TabGroup className="pt-8  w-full">
                    <TabList className="flex gap-4 overflow-x-auto">
                        {tabs.map(({ name }) => (
                            <Tab
                                key={name}
                                className="mb-3 rounded-full py-1 px-3 text-sm/6 font-semibold text-white focus:outline-none data-[selected]:bg-white/10 data-[hover]:bg-white/5 data-[selected]:data-[hover]:bg-white/10 data-[focus]:outline-1 data-[focus]:outline-white"
                            >
                                {name}
                            </Tab>
                        ))}
                    </TabList>
                    <TabPanels className="mt-3 w-full">
                        {tabs.map(({ name, component }) => (
                            <TabPanel key={name} className="rounded-xl bg-white/5 flex flex-col p-6">
                                {name != tabs[0].name && <p className="text-2xl font-light mb-3">Your {name}</p>}
                                {component}
                            </TabPanel>
                        ))}
                    </TabPanels>
                </TabGroup>
            </div>
        </HeaderContainer>
    )
}

export default Account

touch apps/quora-frontend/middleware.ts

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { decrypt } from './app/lib/sessions'
import { SessionPayload } from './app/lib/definitions/request'

export async function middleware(request: NextRequest) {
    const loginUrl = new URL('/login', request.url)
    loginUrl.searchParams.set('from', request.nextUrl.pathname)

    try {
        const cookie = request.cookies.get('session')?.value
        const session = (await decrypt(cookie)) as SessionPayload

        if (!session) {
            return NextResponse.redirect(loginUrl)
        }

        if (session?.expiresAt) {
            if (session?.expiresAt < (new Date())) {
                return NextResponse.redirect(loginUrl)
            }
        }
    } catch {
        return NextResponse.redirect(loginUrl)
    }
}

export const config = {
    matcher: [
        '/',
        '/account',
        '/answer',
    ]
}