Added API Keys and Components files

.env

@@ -7,12 +7,12 @@ NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
 NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding
 
-NEXT_PUBLIC_TINY_MCE_API_KEY=<YOUR_TINY_MCE_API_KEY>
+NEXT_PUBLIC_TINY_MCE_API_KEY=erkfc8bh7n1pq1u2jka4fhiosdokv4cfbs6ihcl6dpi3s517
 
-MONGODB_URL=<YOUR_MONGODB_URL>
+MONGODB_URL=mongodb+srv://ojasaklechayt:[email protected]/?retryWrites=true&w=majority
 
 NEXT_PUBLIC_SERVER_URL=<YOUR_SERVER_URL>
 
 OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
 
-RAPID_API_KEY=<YOUR_RAPID_API_KEY>
+RAPID_API_KEY=db4067a7a6msh4bcdbd5f750e5a9p1d4303jsnc9d565d5521a

app/(root)/(home)/loading.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const Loading = () => {
+ return (
+ <section>
+ <div className="flex w-full flex-col-reverse justify-between gap-4 sm:flex-row sm:items-center">
+ <h1 className="h1-bold text-dark100_light900">All Questions</h1>
+
+ <Link href="/ask-question" className="flex justify-end max-sm:w-full">
+ <Button className="primary-gradient min-h-[46px] px-4 py-3 !text-light-900">
+ Ask a Question
+ </Button>
+ </Link>
+ </div>
+
+ <div className="mb-12 mt-11 flex flex-wrap items-center justify-between gap-5">
+ <Skeleton className="h-14 flex-1" />
+ <div className="hidden max-md:block">
+ <Skeleton className="h-14 w-28" />
+ </div>
+ </div>
+
+ <div className="my-10 hidden flex-wrap gap-3 md:flex">
+ <Skeleton className="h-9 w-28" />
+ <Skeleton className="h-9 w-28" />
+ <Skeleton className="h-9 w-28" />
+ <Skeleton className="h-9 w-28" />
+ </div>
+
+ <div className="flex flex-col gap-6">
+ {[...Array(10)].map((_, i) => (
+ <Skeleton key={i} className="h-48 w-full rounded-xl" />
+ ))}
+ </div>
+ </section>
+ );
+};
+
+export default Loading;

app/(root)/(home)/page.tsx

@@ -0,0 +1,119 @@
+import Link from "next/link";
+
+import { auth } from "@clerk/nextjs";
+
+import { Button } from "@/components/ui/button";
+import LocalSearchbar from "@/components/shared/search/LocalSearchbar";
+import Filter from "@/components/shared/Filter";
+import NoResult from "@/components/shared/NoResult";
+import Pagination from "@/components/shared/Pagination";
+import HomeFilters from "@/components/shared/Filters";
+import QuestionCard from "@/components/cards/QuestionCard";
+
+import {
+ getQuestions,
+ getRecommendedQuestions,
+} from "@/lib/actions/question.action";
+
+import { HomePageFilters } from "@/constants/filters";
+
+import type { SearchParamsProps } from "@/types";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "Home — DevOverflow",
+};
+
+export default async function Home({ searchParams }: SearchParamsProps) {
+ const { userId: clerkId } = auth();
+
+ let result;
+
+ if (searchParams?.filter === "recommended") {
+ if (clerkId) {
+ result = await getRecommendedQuestions({
+ userId: clerkId,
+ searchQuery: searchParams.q,
+ page: searchParams.page ? +searchParams.page : 1,
+ });
+ } else {
+ result = {
+ questions: [],
+ isNext: false,
+ };
+ }
+ } else {
+ result = await getQuestions({
+ searchQuery: searchParams.q,
+ filter: searchParams.filter,
+ page: searchParams.page ? +searchParams.page : 1,
+ });
+ }
+
+ return (
+ <>
+ <div className="flex w-full flex-col-reverse justify-between gap-4 sm:flex-row sm:items-center">
+ <h1 className="h1-bold text-dark100_light900">All Questions</h1>
+
+ <Link href="/ask-question" className="flex justify-end max-sm:w-full">
+ <Button className="primary-gradient min-h-[46px] px-4 py-3 !text-light-900">
+ Ask a Question
+ </Button>
+ </Link>
+ </div>
+
+ <div className="mt-11 flex justify-between gap-5 max-sm:flex-col sm:items-center">
+ <LocalSearchbar
+ route="/"
+ iconPosition="left"
+ imgSrc="/assets/icons/search.svg"
+ placeholder="Search for questions"
+ otherClasses="flex-1"
+ />
+
+ <Filter
+ filters={HomePageFilters}
+ otherClasses="min-h-[56px] sm:min-w-[170px]"
+ containerClasses="hidden max-md:flex"
+ />
+ </div>
+
+ <HomeFilters filters={HomePageFilters} />
+
+ <div className="mt-10 flex w-full flex-col gap-6">
+ {result.questions.length > 0 ? (
+ result.questions.map((question: any) => (
+ <QuestionCard
+ key={question._id}
+ _id={question._id}
+ clerkId={clerkId}
+ title={question.title}
+ tags={question.tags}
+ author={question.author}
+ upvotes={question.upvotes}
+ views={question.views}
+ answers={question.answers}
+ createdAt={question.createdAt}
+ />
+ ))
+ ) : (
+ <NoResult
+ title="No Questions Found"
+ description="Be the first to break the silence! 🚀 Ask a Question and kickstart the
+ discussion. our query could be the next big thing others learn from. Get
+ involved! 💡"
+ link="/ask-question"
+ linkTitle="Ask a Question"
+ />
+ )}
+ </div>
+
+ <div className="mt-10">
+ <Pagination
+ pageNumber={searchParams?.page ? +searchParams.page : 1}
+ isNext={result.isNext}
+ />
+ </div>
+ </>
+ );
+}

components/cards/AnswerCard.tsx

@@ -0,0 +1,84 @@
+import Link from "next/link";
+
+import { SignedIn } from "@clerk/nextjs";
+
+import Metric from "@/components/shared/Metric";
+import EditDeleteAction from "@/components/shared/EditDeleteAction";
+
+import { getFormattedNumber, getTimestamp } from "@/lib/utils";
+
+interface Props {
+ clerkId?: string | null;
+ _id: string;
+ question: {
+ _id: string;
+ title: string;
+ };
+ author: {
+ _id: string;
+ clerkId: string;
+ name: string;
+ picture: string;
+ };
+ upvotes: number;
+ createdAt: Date;
+}
+
+const AnswerCard = ({
+ clerkId,
+ _id,
+ question,
+ author,
+ upvotes,
+ createdAt,
+}: Props) => {
+ const showActionButtons = clerkId && clerkId === author.clerkId;
+
+ return (
+ <Link
+ href={`/question/${question._id}/#${_id}`}
+ className="card-wrapper rounded-[10px] px-11 py-9"
+ >
+ <div className="flex flex-col-reverse items-start justify-between gap-5 sm:flex-row">
+ <div>
+ <span className="subtle-regular text-dark400_light700 line-clamp-1 flex sm:hidden">
+ {getTimestamp(createdAt)}
+ </span>
+ <h3 className="sm:h3-semibold base-semibold text-dark200_light900 line-clamp-1 flex-1">
+ {question.title}
+ </h3>
+ </div>
+
+ <SignedIn>
+ {showActionButtons && (
+ <EditDeleteAction type="Answer" itemId={JSON.stringify(_id)} />
+ )}
+ </SignedIn>
+ </div>
+
+ <div className="flex-between mt-6 w-full flex-wrap gap-3">
+ <Metric
+ imgUrl={author.picture}
+ alt="user avatar"
+ value={author.name}
+ title={` • asked ${getTimestamp(createdAt)}`}
+ href={`/profile/${author.clerkId}`}
+ textStyles="body-medium text-dark400_light700"
+ isAuthor
+ />
+
+ <div className="flex-center gap-3">
+ <Metric
+ imgUrl="/assets/icons/like.svg"
+ alt="like icon"
+ value={getFormattedNumber(upvotes)}
+ title=" Votes"
+ textStyles="small-medium text-dark400_light800"
+ />
+ </div>
+ </div>
+ </Link>
+ );
+};
+
+export default AnswerCard;