Merge pull request #12 from Kevin-Umali/feature/nextjs

[TL-DYS-30]

client/.env.example

@@ -1,3 +1,3 @@
-VITE_OPEN_AI_API_URL="<your_backend_api_url>"
-VITE_UNSPLASH_PROJECT_NAME="<your_project_name_in_unpslash>"
-VITE_PROJECT_URL="<your_project_url>"
+NEXT_PUBLIC_API_URL="<your_backend_api_url>"
+NEXT_PUBLIC_UNSPLASH_PROJECT_NAME="<your_project_name_in_unpslash>"
+NEXT_PUBLIC_PROJECT_URL="<your_project_url>"

client/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "root": true,
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
+  "plugins": ["@typescript-eslint", "tailwindcss", "import", "unused-imports"],
+  "rules": {
+    "import/no-unused-modules": "error",
+    "unused-imports/no-unused-imports": "error",
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-explicit-any": "off",
+    "no-console": ["warn", { "allow": ["warn", "error", "info", "debug"] }],
+    "@next/next/no-html-link-for-pages": "off"
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn", "cva"],
+      "config": "tailwind.config.cjs"
+    },
+    "next": {
+      "rootDir": ["apps/*/"]
+    }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    },
+    {
+      "files": ["components/ui/**/*.{tsx, ts}"],
+      "rules": {
+        "import/no-unused-modules": "off",
+        "unused-imports/no-unused-imports": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ]
+}

client/.gitignore

@@ -1,30 +1,35 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Environment variables
-.env
-.env.*
-!.env.example
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-package-lock.json
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

client/.lintstagedrc.json

@@ -1,3 +1,3 @@
 {
-  "src/**/*.{ts,tsx,js,jsx,json,css,scss,md}": ["eslint --quiet --fix", "prettier --write"]
+  "./**/*.{ts,tsx,js,jsx,json}": ["eslint --quiet --fix", "prettier --write"]
 }

client/README.md

@@ -1,48 +1,36 @@
-# Make Me Project - Client
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-The frontend of the DIY Project platform, built with modern technologies to provide users with engaging DIY project ideas.
+## Getting Started
 
-## 🚀 Getting Started
-
-### Prerequisites
-
-- [Node.js](https://nodejs.org/)
-- [npm](https://www.npmjs.com/)
-
-### Installation
-
-1. Navigate to the client directory:
+First, run the development server:
 
 ```bash
-cd client
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
-2. Install the dependencies:
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-```bash
-npm install
-```
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-3. Set up your environment variables:
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-> Copy the `.env.example` file and create a new `.env.development` or `.env.production` file with your own settings.
+## Learn More
 
-### Running the Server
+To learn more about Next.js, take a look at the following resources:
 
-For development:
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-```bash
-npm run dev
-```
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-For production:
+## Deploy on Vercel
 
-```bash
-npm run build
-```
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Then, preview the production build:
-
-```bash
-npm run preview
-```
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

client/app/faq/faq.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { faqs } from "@/constants";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { FAQLinkData } from "@/interfaces";
+
+export default function FAQPage() {
+  const [accordionDefaultValue, setAccordionDefaultValue] = useState<string>(`item-0`);
+
+  const parseAnswer = (answer: string | undefined, links?: { [key: string]: FAQLinkData }) => {
+    if (!answer) return;
+
+    return answer.split(/\{(.+?)\}/g).map((segment, index) =>
+      index % 2 === 0 ? (
+        segment
+      ) : (
+        <Link key={segment} href={links?.[segment]?.href ?? "#"}>
+          {links?.[segment]?.text ?? segment}
+        </Link>
+      ),
+    );
+  };
+
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (!hash) return;
+
+    const hashValue = hash.split("#").filter(Boolean)[0];
+    const index = faqs.findIndex((faq) => faq.id == hashValue);
+    if (index !== -1) {
+      setAccordionDefaultValue(`item-${index}`);
+    }
+  }, []);
+
+  return (
+    <>
+      <div className="container mx-auto py-5 px-4 sm:py-10">
+        <div className="text-center mb-10">
+          <h1 className="mb-3 text-lg sm:text-xl lg:text-2xl">Frequently Asked Questions</h1>
+        </div>
+
+        <Accordion value={accordionDefaultValue} onValueChange={setAccordionDefaultValue} type="single" collapsible className="w-full">
+          {faqs.map((faq, index) => (
+            <AccordionItem key={index} value={`item-${index}`}>
+              <AccordionTrigger>{faq.question}</AccordionTrigger>
+              <AccordionContent>{faq.links ? parseAnswer(faq.answer, faq.links) : faq.answer}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </>
+  );
+}

client/app/faq/page.tsx

@@ -0,0 +1,14 @@
+import { Metadata } from "next";
+import FAQPage from "./faq";
+
+export const metadata: Metadata = {
+  title: "MakeMeDIYspire FAQs",
+  description: "Discover answers to all your queries about the MakeMeDIYspire platform, its functionality, feedback process, and more.",
+  keywords: ["DIY FAQs", "MakeMeDIYspire Questions", "DIY Project Help", "DIY Platform Queries", "Project Generator FAQs", "DIY Project Creation", "DIY Inspiration"],
+  metadataBase: new URL("https://www.diyspire/faq"),
+  applicationName: "MakeMeDIYspire",
+};
+
+export default function Page() {
+  return <FAQPage />;
+}

client/app/globals.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}