Intern dev

.env.development

@@ -10,9 +10,12 @@
 #NEXT_PUBLIC_APP_MEASUREMENT_ID=G-7ZNKM9VFN2
 
 # TDO
+#
+NEXT_PUBLIC_API_URL=https://node-api-vchgui6lfq-uc.a.run.app
+NEXT_PUBLIC_FRONTEND_URL=https://preview.ctfguide.com
+#NEXT_PUBLIC_API_URL=http://localhost:3001
+#NEXT_PUBLIC_FRONTEND_URL=http://localhost:3000
 
-NEXT_PUBLIC_API_URL=http://localhost:3001
-NEXT_PUBLIC_FRONTEND_URL=http://localhost:3000
 NEXT_PUBLIC_APP_API_KEY=AIzaSyAHz1s-UuNhlZ6aKvqwzmzzidzWxBKw9hw
 NEXT_PUBLIC_APP_AUTH_DOMAIN=ctfguide-dev.firebaseapp.com
 NEXT_PUBLIC_APP_PROJECT_ID=ctfguide-dev
@@ -23,3 +26,4 @@ NEXT_PUBLIC_APP_MEASUREMENT_ID=G-7ZNKM9VFN2
 NEXT_PUBLIC_TERM_URL=https://file-system-run-qi6ms4rtoa-ue.a.run.app/
 NEXT_PUBLIC_APP_STRIPE_KEY=pk_test_51NyMUrJJ9Dbjmm7hji7JsdifB3sWmgPKQhfRsG7pEPjvwyYe0huU1vLeOwbUe5j5dmPWkS0EqB6euANw2yJ2yQn000lHnTXis7
 NEXT_PUBLIC_KANA_SERVER_URL=kana-server.ctfguide.com
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=166652277588-4uk7g7irqlicacelg1nfgt0ejmskmo9h.apps.googleusercontent.com

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "gray",
+    "cssVariables": false
+  },
+  "aliases": {
+    "utils": "@/lib/utils",
+    "components": "@/components"
+  }
+}

next.config.js

@@ -1,3 +1,5 @@
+const removeImports = require("next-remove-imports")();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack: (config, { dev }) => {
@@ -15,8 +17,10 @@ const nextConfig = {
   },
   experimental: {
     scrollRestoration: true,
+    esmExternals: true, // Add this to ensure esmExternals is true
   },
-  ignoreDuringBuilds: true
-}
+  ignoreDuringBuilds: true,
+  transpilePackages: ['react-md-editor']
+};
 
-module.exports = nextConfig
+module.exports = removeImports(nextConfig);

package.json

@@ -21,9 +21,12 @@
     "@heroicons/react": "^2.0.13",
     "@mui/material": "^5.15.2",
     "@mui/x-charts": "^6.18.4",
+    "@react-oauth/google": "^0.12.1",
     "@stripe/stripe-js": "^2.1.7",
     "@tailwindcss/forms": "^0.5.3",
     "@tremor/react": "^1.8.1",
+    "@uiw/react-markdown-editor": "^6.1.1",
+    "@uiw/react-md-editor": "3.6.0",
     "asciinema-player": "3.6.3",
     "autoprefixer": "^10.4.12",
     "babel-plugin-macros": "^3.1.0",
@@ -33,39 +36,43 @@
     "dotenv": "^16.0.3",
     "easymde": "^2.18.0",
     "enable": "^3.4.0",
-    "firebase": "^9.16.0",
     "focus-visible": "^5.2.0",
     "framer-motion": "^10.2.4",
     "heroicons": "^2.0.13",
+    "jwt-decode": "^4.0.0",
     "marked": "^4.3.0",
     "material-ui-popup-state": "^5.0.5",
     "next": "^14.0.2",
+    "next-remove-imports": "^1.0.12",
     "postcss-focus-visible": "^6.0.4",
     "puppeteer": "^22.0.0",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-collapsible": "^2.10.0",
-    "react-countup": "^2.4.0",
     "react-dom": "18.2.0",
     "react-firebase-hooks": "^5.1.1",
     "react-google-charts": "^4.0.1",
     "react-joyride": "^2.7.2",
     "react-loading-skeleton": "^3.2.0",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.9.0",
+    "react-select-country-list": "^2.2.3",
     "react-simplemde-editor": "^5.2.0",
     "react-text-loop": "^2.3.0",
     "react-text-transition": "^3.1.0",
     "react-toastify": "^10.0.5",
     "react-tooltip": "^5.25.1",
     "react-top-loading-bar": "^2.3.1",
+    "react-transition-group": "^4.4.5",
     "react-visibility-sensor": "^5.1.1",
     "reactjs-popup": "^2.0.5",
     "recharts": "^2.5.0",
     "simplemde": "^1.11.2",
     "socket.io-client": "^4.7.4",
     "stripe": "^13.9.0",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.2.1",
+    "tailwindcss-animate": "^1.0.7",
     "xterm": "^5.3.0"
   },
   "devDependencies": {

src/components/AuthPopup.jsx

@@ -1,24 +1,10 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { getAuth, onAuthStateChanged } from 'firebase/auth';
+//import { getAuth, onAuthStateChanged } from 'firebase/auth';
 
 export function AuthPopup() {
   // check if firebase logged in
   const [user, setUser] = useState(false);
-  const auth = getAuth();
-  useEffect(() => {
-    const auth = getAuth();
-    onAuthStateChanged(auth, (user) => {
-      if (user) {
-        // User is signed in, see docs for a list of available properties
-        // https://firebase.google.com/docs/reference/js/firebase.User
-        const uid = user.uid;
-        setUser(false);
-      } else {
-        setUser(false);
-      }
-    });
-  });
   if (user) {
     return <div>{/*User logged in*/}</div>;
   } else {

src/components/Header.jsx

@@ -112,4 +112,4 @@ export function Header() {
       </Container>
     </header>
   );
-}
+}

src/components/Logo.jsx

@@ -1,12 +1,12 @@
 export function Logo(props) {
   return (
     <div className="mx-auto my-auto flex">
-      <img className="mx-auto w-12 text-center" src="../../../../darkLogo.png" />
+      <img className="mx-auto w-12 text-center spin-on-hover" src="../../../../darkLogo.png" />
       <h1
         className="my-auto text-xl font-semibold text-white"
         style={{ fontFamily: 'Poppins, sans-serif' }}
       >
-        CTFGuide <span className="text-blue-500 text-sm ">BETA</span>
+        CTFGuide 
       </h1>
     </div>
   );

src/components/MarkdownViewer.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-export function MarkdownViewer({content, className = ""}) {
+export function MarkdownViewer({ content, className = "" }) {
   return (
-    <div style={{whiteSpace: "pre-wrap"}} className={`${className} markdown `}>
+    <div className={`${className} markdown `}>
       <ReactMarkdown>{content}</ReactMarkdown>
     </div>
   );

src/components/PersonCard.jsx

@@ -9,19 +9,19 @@ export default function PersonCard({ person }) {
   return (
     <motion.div
       className="py-8 text-white"
-      // whileHover={{ rotate: 360 }}
+    // whileHover={{ rotate: 360 }}
     >
       <img
         className="mx-auto h-42 w-42 rounded-full border bg-neutral-900"
         src={`https://robohash.org/${person.personName}.png?set=set1&size=150x150`}
         loading="lazy"
         alt=""
       />
-      <h1 className="mt-4 text-xl font-bold text-blue-500">{person.personName}</h1>
-      <h2>{person.position}</h2>
-      <hr className='mt-4 border-gray-500 w-4/5 mx-auto'></hr>
+      <h1 className="mt-4 text-center text-xl font-bold text-blue-500">{person.personName}</h1>
+      <h2 className='text-center'>{person.position}</h2>
+      <hr className='mt-4 text-center border-gray-500 w-4/5 mx-auto'></hr>
       <motion.p
-        className="mt-4 text-lg px-2 leading-relaxed text-gray-300"
+        className="mt-4 text-justify text-lg px-2 leading-relaxed text-gray-300"
         variants={variants}
         initial="hidden"
         animate="visible"