├── src
    ├── App.css
    ├── vite-env.d.ts
    ├── main.tsx
    ├── lib
    │   ├── schemas.ts
    │   └── contentId.ts
    ├── components
    │   ├── ui
    │   │   ├── Alert.tsx
    │   │   ├── Label.tsx
    │   │   ├── ContentBlur.tsx
    │   │   ├── Input.tsx
    │   │   ├── Heading.tsx
    │   │   ├── Button.tsx
    │   │   ├── FormContainer.tsx
    │   │   ├── SeachSuggestions.tsx
    │   │   └── Sidebar.tsx
    │   ├── Footer.tsx
    │   ├── hooks
    │   │   ├── useClickOutside.ts
    │   │   ├── useFetchContent.ts
    │   │   ├── useKeyBindings.ts
    │   │   └── useMediaQuery.ts
    │   ├── Landing.tsx
    │   ├── LostPage.tsx
    │   ├── recoil
    │   │   └── atoms.ts
    │   ├── NavBar.tsx
    │   ├── Dashboard.tsx
    │   ├── ShareModal.tsx
    │   ├── Hero.tsx
    │   ├── Content.tsx
    │   ├── SharedContent.tsx
    │   ├── Register.tsx
    │   ├── Login.tsx
    │   ├── Card.tsx
    │   ├── SearchBar.tsx
    │   └── ContentForm.tsx
    ├── index.css
    └── App.tsx
├── tsconfig.node.tsbuildinfo
├── vercel.json
├── postcss.config.js
├── .env.example
├── tsconfig.json
├── vite.config.ts
├── .gitignore
├── tsconfig.node.json
├── tsconfig.app.json
├── public
    ├── vite.svg
    └── lost.svg
├── eslint.config.js
├── tailwind.config.js
├── tsconfig.app.tsbuildinfo
├── index.html
├── package.json
└── README.md


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/tsconfig.node.tsbuildinfo:
--------------------------------------------------------------------------------
1 | {"root":["./vite.config.ts"],"version":"5.6.3"}


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |     "rewrites": [
3 |       { "source": "/(.*)", "destination": "/" }
4 |     ]
5 | }
6 |   


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | VITE_BASE_URL=http://localhost:3000/v1
2 | VITE_FRONTEND_URL=http://localhost:5173
3 | VITE_TEST_USERNAME=fresh
4 | VITE_TEST_PASSWORD=fresh123


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files": [],
3 |   "references": [
4 |     { "path": "./tsconfig.app.json" },
5 |     { "path": "./tsconfig.node.json" }
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vite.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { createRoot } from 'react-dom/client'
 2 | import './index.css'
 3 | import App from './App.tsx'
 4 | import { RecoilRoot } from 'recoil'
 5 | 
 6 | createRoot(document.getElementById('root')!).render(
 7 |     <RecoilRoot>
 8 |       <App />
 9 |     </RecoilRoot>
10 | )
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | .env.prod
27 | .env
28 | 


--------------------------------------------------------------------------------
/src/lib/schemas.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | export const AuthSchema = z.object({
3 |     username: z.string().min(3, {message: "Username has to be minimum of 3 letters"})
4 |         .max(10, {message: "Username has to be maximum of 10 letters"}),
5 |     password: z.string().min(8, {message: "Password has to be minimum of 8 letters"})
6 |         .max(20, {message: "Password has   to be maximum of 20 letters"})
7 | })


--------------------------------------------------------------------------------
/src/components/ui/Alert.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | interface AlertProps {
 3 |     text: string
 4 | }
 5 | 
 6 | const Alert: React.FC<AlertProps> = ({
 7 |     text
 8 | }) => {
 9 |     return (
10 |     <div className="px-5 py-2 text-white bg-black rounded border-border font-font1 tracking-wider font-light text-[0.75rem] 
11 |     text-center absolute bottom-1/5 left-1/2 -translate-x-1/2 translate-y-6 z-50">
12 |         {text}
13 |     </div>
14 |     )
15 | } 
16 | 
17 | export default Alert
18 | 


--------------------------------------------------------------------------------
/src/components/ui/Label.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | interface LabelProps{
 3 |     children: React.ReactNode;
 4 |     onClick?: () => void
 5 | }
 6 | const Label: React.FC<LabelProps> = ({
 7 |     children,
 8 |     onClick
 9 | }) => {
10 |   return (
11 |     <div className="label1 flex p-2 items-center gap-2 text-[1rem] font-font1 font-semibold hover:bg-border hover:text-white 
12 |     rounded-lg cursor-pointer hover:font-bold" onClick={onClick}>
13 |         {children}
14 |     </div>
15 |   )
16 | }
17 | 
18 | export default Label
19 | 


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | const Footer = () => {
 2 |     return (
 3 |         <footer className="border-t-2 py-2 border-border w-full ">
 4 |         <h1 className="text-[1.5rem] font-font1 font-extralight text-text">
 5 |           Designed by&nbsp;
 6 |             <a href="https://github.com/suleman1412" >
 7 |                 <span className="font-normal cursor-pointer">
 8 |                     Suleman
 9 |                 </span>
10 |             </a> 
11 |         </h1>
12 |       </footer>
13 |     )
14 | }
15 | 
16 | export default Footer


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "lib": ["ES2023"],
 5 |     "module": "ESNext",
 6 |     "skipLibCheck": true,
 7 | 
 8 |     /* Bundler mode */
 9 |     "moduleResolution": "Bundler",
10 |     "allowImportingTsExtensions": true,
11 |     "isolatedModules": true,
12 |     "moduleDetection": "force",
13 |     "noEmit": true,
14 | 
15 |     /* Linting */
16 |     "strict": true,
17 |     "noUnusedLocals": true,
18 |     "noUnusedParameters": true,
19 |     "noFallthroughCasesInSwitch": true,
20 |   },
21 |   "include": ["vite.config.ts"]
22 | }
23 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "Bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true,
22 |   },
23 |   "include": ["src"]
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/ui/ContentBlur.tsx:
--------------------------------------------------------------------------------
 1 | import { HTMLAttributes } from "react"
 2 | import { motion } from "framer-motion";
 3 | 
 4 | interface ContentBlur extends HTMLAttributes<HTMLDivElement>  {
 5 |     sideOpen: boolean
 6 |     children: React.ReactNode
 7 | }
 8 | const ContentBlur:React.FC<ContentBlur> = ({
 9 |     sideOpen,
10 |     children
11 | }) => {
12 |   return (
13 |     <motion.div
14 |       initial={{ opacity: 0 }}
15 |       animate={{ opacity: 1 }}
16 |       exit={{ opacity: 0 }}
17 |       className={`contentBlur flex-1 ${sideOpen && 'pointer-events-none  blur-[2px]'} `}>
18 |       {children}
19 |     </motion.div>
20 |   )
21 | }
22 | 
23 | export default ContentBlur
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body{
 6 |     @apply bg-darkBackground text-text font-font1;
 7 | }
 8 | 
 9 | input::-ms-reveal {
10 |     filter: invert(100%);
11 | }
12 | 
13 | .tooltip {
14 |     @apply absolute w-24 p-1 bg-cardColor-2 text-white text-sm text-center rounded-md shadow-md opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-200 top-[-2.2rem] right-[-2rem] after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-[6px] after:border-solid after:border-cardColor-2 after:border-t-cardColor-2 after:border-x-transparent after:border-b-transparent
15 | }
16 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/></svg>


--------------------------------------------------------------------------------
/src/components/hooks/useClickOutside.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | 
 3 | type ClickOutsideHandler = (event: Event) => void;
 4 | 
 5 | export const useClickOutside = (
 6 |   ref: React.RefObject<HTMLElement>,
 7 |   handler: ClickOutsideHandler
 8 | ) => {
 9 |   useEffect(() => {
10 |     const listener = (event: Event) => {
11 |       // Do nothing if clicking ref's element or descendant elements
12 |       if (!ref.current || ref.current.contains(event.target as Node)) return;
13 | 
14 |       handler(event);
15 |     };
16 | 
17 |     document.addEventListener("mousedown", listener);
18 |     document.addEventListener("touchstart", listener);
19 | 
20 |     return () => {
21 |       document.removeEventListener("mousedown", listener);
22 |       document.removeEventListener("touchstart", listener);
23 |     };
24 |   }, [ref, handler]);
25 | };


--------------------------------------------------------------------------------
/src/lib/contentId.ts:
--------------------------------------------------------------------------------
 1 | import { v4 as uuidv4 } from 'uuid';
 2 | 
 3 | export interface Tags{
 4 |     tagId: string,
 5 |     title: string
 6 | }
 7 | export interface ContentPayload{ 
 8 |     link: string;
 9 |     type: string;
10 |     title: string;
11 |     tags: string[];
12 |     contentId?: string
13 | }
14 | 
15 | const enrichContent = (newContent: ContentPayload) => {
16 |     if(!newContent.contentId){
17 |         newContent.contentId = uuidv4()
18 |     }
19 |     const enrichedTags: Tags[] = newContent.tags.map((tag) => ({
20 |         tagId: uuidv4(), 
21 |         title: tag,
22 |     }));
23 |     return {
24 |         ...newContent,
25 |         createdAt: new Date().toISOString(), // Add today's date
26 |         contentId: newContent.contentId, //contentId
27 |         tags: enrichedTags
28 |     };
29 | };
30 | 
31 | export default enrichContent;
32 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ['**/*.{ts,tsx}'],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       'react-hooks': reactHooks,
18 |       'react-refresh': reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       'react-refresh/only-export-components': [
23 |         'warn',
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | )
29 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 | 
 8 |   theme: {
 9 |     extend: {
10 |       fontFamily: {
11 |         font1: 'Manrope', //for headers, body, etc
12 |         font2: 'quintessential' //for design bits
13 |       },
14 |       colors: {
15 |         primary: {
16 |           1: "#FFFFFF",
17 |           2: "#efefef"
18 |         },
19 |         secondary: {
20 |           1: "#1B1818",
21 |           2 : "#1c1d1b"
22 |         },
23 |         cardColor: {
24 |           1: '#333333',
25 |           2: '#262626',
26 |           3: '#888888'
27 |         },
28 |         border: "#404040",
29 |         logout:{
30 |           1: 'rgb(239 68 68)',
31 |           2: "rgb(185 28 28)"
32 |         },
33 |         text: "#FFFFFF",
34 |         darkBackground: "#1B1818"
35 |     },
36 |   },
37 |   plugins: [],
38 |   }
39 | }


--------------------------------------------------------------------------------
/src/components/ui/Input.tsx:
--------------------------------------------------------------------------------
 1 | interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 2 |     label?: string | null;
 3 |     inputId?: string | null;
 4 | }
 5 | 
 6 | const Input: React.FC<InputProps> = ({ 
 7 |     label = null,
 8 |     inputId = null,
 9 |     ...props 
10 | }) => {
11 |     if (label && !inputId) {
12 |         console.error("If 'label' is provided, 'id' must also be provided.");
13 |     }
14 | 
15 |     return (
16 |         <>
17 |             {label && inputId && (
18 |                 <label htmlFor={inputId} className='text-text text-[1rem] lg:text-[1.2rem] h-[2.7rem] font-font1 font-medium tracking-wider'>
19 |                     {label}
20 |                 </label>
21 |             )}
22 |             <input
23 |                 className="bg-secondary-2 placeholder-border text-white text-[0.8rem] lg:text-[1rem] h-[2.5rem] px-3 w-full"
24 |                 id={inputId || undefined} 
25 |                 {...props}
26 |             />
27 |         </>
28 |     );
29 | };
30 | 
31 | export default Input;
32 | 


--------------------------------------------------------------------------------
/src/components/Landing.tsx:
--------------------------------------------------------------------------------
 1 | import Footer from './Footer';
 2 | import Hero from './Hero';
 3 | import { NavBar } from './NavBar';
 4 | import Login from './Login';
 5 | import Register from './Register';
 6 | import { useState } from 'react';
 7 | 
 8 | const Landing = () => {
 9 |     const [current, setCurrent ] = useState('')
10 |     const renderContent = () => {
11 |         switch (current) {
12 |             case 'login':
13 |                 return <Login/>;
14 |             case 'register':
15 |                 return <Register setCurrent={setCurrent}/>;
16 |             default:
17 |                 return <Hero setCurrent={setCurrent}/>;
18 |         }
19 |     };
20 | 
21 |     return (
22 |         <div className="flex flex-col min-h-screen p-2 mx-auto max-w-7xl ">
23 |             <NavBar setCurrent={setCurrent}/>
24 |             <div className="flex flex-1 justify-center items-center">
25 |                 {renderContent()}
26 |             </div>
27 |             <Footer />
28 |         </div>
29 |     );
30 | };
31 | 
32 | export default Landing;
33 | 


--------------------------------------------------------------------------------
/src/components/LostPage.tsx:
--------------------------------------------------------------------------------
 1 | import { useNavigate } from "react-router-dom"
 2 | import Heading from "./ui/Heading"
 3 | 
 4 | const LostPage = () => {
 5 |   const navigate = useNavigate()
 6 |   return (
 7 |     <div className="h-screen gap-6 flex flex-col justify-center items-center p-6">
 8 |         <div>
 9 |           <Heading variant="primary" className="text-[2rem]">
10 |               Lost in thought?
11 |           </Heading>
12 |           <Heading variant="secondary" size="xs" className="text-center">
13 |               Looks like this page is too! 
14 |               <br />
15 |               Let's get you back on 
16 |               <span 
17 |                 className="ml-1 cursor-pointer relative font-bold text-[#cdcdcd] hover:text-[#fcfcfc]"
18 |                 onClick={() => navigate('/')}
19 |               >
20 |                 track
21 |               </span>
22 |           </Heading>
23 |         </div>
24 |         <img src="/lost.svg" className="w-full md:w-[450px] lg:w-[500px] p-10" alt="Lost" />
25 |     </div>
26 |   )
27 | }
28 | 
29 | export default LostPage
30 | 


--------------------------------------------------------------------------------
/tsconfig.app.tsbuildinfo:
--------------------------------------------------------------------------------
1 | {"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/Card.tsx","./src/components/Content.tsx","./src/components/ContentForm.tsx","./src/components/Dashboard.tsx","./src/components/Footer.tsx","./src/components/Hero.tsx","./src/components/Landing.tsx","./src/components/Login.tsx","./src/components/LostPage.tsx","./src/components/NavBar.tsx","./src/components/Register.tsx","./src/components/SearchBar.tsx","./src/components/ShareModal.tsx","./src/components/SharedContent.tsx","./src/components/hooks/useClickOutside.ts","./src/components/hooks/useFetchContent.ts","./src/components/hooks/useKeyBindings.ts","./src/components/hooks/useMediaQuery.ts","./src/components/recoil/atoms.ts","./src/components/ui/Alert.tsx","./src/components/ui/Button.tsx","./src/components/ui/ContentBlur.tsx","./src/components/ui/FormContainer.tsx","./src/components/ui/Heading.tsx","./src/components/ui/Input.tsx","./src/components/ui/Label.tsx","./src/components/ui/SeachSuggestions.tsx","./src/components/ui/Sidebar.tsx","./src/lib/contentId.ts","./src/lib/schemas.ts"],"version":"5.6.3"}


--------------------------------------------------------------------------------
/src/components/ui/Heading.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | interface HeadingProps {
 3 |     children: React.ReactNode
 4 |     variant: "primary" | "secondary" 
 5 |     className?: string
 6 |     size?: "sm" | "md" | "lg" | "xs" | "jsm"
 7 | }
 8 | 
 9 | const sizeStyles = {
10 |     "xs": "text-[0.8rem] md:text-[0.9rem] lg:text-[1.1rem]",
11 |     "jsm": "text-[1.1rem] md:text-[1.3rem] lg:text-[1.5rem]",
12 |     "sm": "text-[1.2rem] md:text-[1.5rem] lg:text-[2rem]",
13 |     "md": "text-[2rem] md:text-[2.3rem] lg:text-[2.5rem]",
14 |     "lg": "text-[2.5rem] md:text-[3.5rem] lg:text-[4rem]"
15 | }
16 | const variantStyles = {
17 |     "primary" : "font-font1 font-semibold tracking-tight text-text ",
18 |     "secondary": "font-semibold text-border",
19 | }
20 | 
21 | const Heading: React.FC<HeadingProps> = (
22 |     {
23 |         children,
24 |         variant,
25 |         className='', 
26 |         size='sm'
27 |     }
28 | ) => {
29 |     return(
30 |         <div className={`${variantStyles[variant]} ${sizeStyles[size]} ${className}`}>
31 |             {children}
32 |         </div>
33 |     )
34 | }
35 | 
36 | export default Heading;


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>BigBrain</title>
 8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 |     <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
11 |     <link rel="preconnect" href="https://fonts.googleapis.com">
12 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13 |     <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quintessential&display=swap" rel="stylesheet">
14 |   </head>
15 |   <body>
16 |     <div id="root"></div>
17 |     <script type="module" src="/src/main.tsx"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/components/recoil/atoms.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'recoil'
 2 | import { ContentType } from '../Card'
 3 | 
 4 | export const isLoggedIn= atom<boolean>({
 5 |     key: 'isLoggedIn',
 6 |     default: localStorage.getItem('token') ? true : false
 7 | })
 8 | 
 9 | export const heroTitleinput = atom<string | null>({
10 |     key: 'inputTitle',
11 |     default: null
12 | })
13 | 
14 | export const heroLinkinput = atom<string | null>({
15 |     key: 'inputLink',
16 |     default: null
17 | })
18 | 
19 | export const shareLink = atom<string>({
20 |     key: 'shareLink',
21 |     default: ''
22 | })
23 | 
24 | export const allContentAtom = atom<ContentType[]>({
25 |     key: 'allContentAtom',
26 |     default: []
27 | })
28 | 
29 | export const filteredContentAtom = atom<ContentType[]>({
30 |     key: 'filteredContentAtom',
31 |     default: []
32 | })
33 | 
34 | export const userId = atom<string>({
35 |     key: 'userId',
36 |     default: ''
37 | })
38 | 
39 | export const modalStatus = atom<boolean>({
40 |     key: 'modalStatus',
41 |     default: false
42 | })
43 | 
44 | export const shareModal = atom<boolean>({
45 |     key: 'shareModal',
46 |     default: false
47 | })


--------------------------------------------------------------------------------
/src/components/ui/Button.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 4 |     variant: "primary" | "secondary";
 5 |     children: React.ReactNode;
 6 |     font?: "manrope" | "quintessential";
 7 |     className?: string;
 8 |     onClick?: () => void;
 9 | }
10 | 
11 | const variantStyles = {
12 |     primary: "bg-primary-1 text-black hover:bg-primary-2",
13 |     secondary: "bg-secondary-1 border-2 border-white hover:bg-cardColor-1 text-white",
14 | };
15 | 
16 | const fontStyles = {
17 |     manrope: "text-font1",
18 |     quintessential: "text-font2",
19 | };
20 | 
21 | const Button: React.FC<ButtonProps> = ({
22 |     variant,
23 |     children,
24 |     font = "manrope",
25 |     className = "",
26 |     onClick,
27 |     ...props
28 | }) => {
29 |     const baseStyle = "px-2 py-1 md:px-3 md:py-2 rounded antialiased  font-semibold";
30 | 
31 |     return (
32 |         <button
33 |             className={`${baseStyle} ${fontStyles[font]} ${variantStyles[variant]} ${className}`}
34 |             onClick={onClick} 
35 |             {...props} 
36 |         >
37 |             {children}
38 |         </button>
39 |     );
40 | };
41 | 
42 | export default Button;
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build --mode prod",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@types/crypto-js": "^4.2.2",
14 |     "@types/dotenv": "^8.2.3",
15 |     "axios": "^1.7.7",
16 |     "crypto-js": "^4.2.0",
17 |     "dotenv": "^16.4.7",
18 |     "framer-motion": "^11.15.0",
19 |     "lucide-react": "^0.460.0",
20 |     "react": "^18.3.1",
21 |     "react-dom": "^18.3.1",
22 |     "react-router-dom": "^6.28.0",
23 |     "recoil": "^0.7.7",
24 |     "uuid": "^11.0.3",
25 |     "zod": "^3.23.8"
26 |   },
27 |   "devDependencies": {
28 |     "@eslint/js": "^9.13.0",
29 |     "@types/react": "^18.3.12",
30 |     "@types/react-dom": "^18.3.1",
31 |     "@vitejs/plugin-react": "^4.3.3",
32 |     "autoprefixer": "^10.4.20",
33 |     "eslint": "^9.13.0",
34 |     "eslint-plugin-react-hooks": "^5.0.0",
35 |     "eslint-plugin-react-refresh": "^0.4.14",
36 |     "globals": "^15.11.0",
37 |     "postcss": "^8.4.49",
38 |     "tailwindcss": "^3.4.15",
39 |     "typescript": "~5.6.2",
40 |     "typescript-eslint": "^8.11.0",
41 |     "vite": "^5.4.10"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/hooks/useFetchContent.ts:
--------------------------------------------------------------------------------
 1 | import { useSetRecoilState } from "recoil";
 2 | import axios from "axios";
 3 | import { allContentAtom, filteredContentAtom, isLoggedIn, userId } from "../recoil/atoms";
 4 | 
 5 | export const useFetchContent = () => {
 6 |   const setContentStore = useSetRecoilState(allContentAtom);
 7 |   const setDisplayedContent = useSetRecoilState(filteredContentAtom);
 8 |   const setUserLogin = useSetRecoilState(isLoggedIn)
 9 |   const setUserId = useSetRecoilState(userId)
10 |   const BASE_URL = import.meta.env.VITE_BASE_URL;
11 |   const token = localStorage.getItem("token") || "";
12 | 
13 |   const fetchContent = async () => {
14 |     if (!BASE_URL) {
15 |       console.error("Base URL is not configured");
16 |       return;
17 |     }
18 | 
19 |     try {
20 |       const response = await axios.get(`${BASE_URL}/content/`, {
21 |         headers: { Authorization: `Bearer ${token}` },
22 |       });
23 |       const fetchedContent = response.data.allContent;
24 |       setContentStore(fetchedContent);
25 |       setDisplayedContent(fetchedContent);
26 |       setUserLogin(true)
27 |       setUserId(response.data.userId)
28 |     } catch (error) {
29 |       console.error("Failed to fetch content:", error);
30 |     }
31 |   };
32 | 
33 |   return fetchContent;
34 | };
35 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 2 | import { useRecoilValue } from "recoil"
 3 | import Landing from "./components/Landing"
 4 | import Dashboard from "./components/Dashboard"
 5 | import LostPage from './components/LostPage'
 6 | import SharedContent from "./components/SharedContent"
 7 | import { isLoggedIn } from "./components/recoil/atoms"
 8 | 
 9 | function App() {
10 |   const UserLogin = useRecoilValue(isLoggedIn)
11 |   const token = localStorage.getItem('token')
12 |   
13 |   return (
14 |     <Router>
15 |       <div className="min-h-screen w-full overflow-x-hidden">
16 |         <Routes>
17 |           <Route 
18 |             path="/" 
19 |             element={ UserLogin || token ? <Navigate to='/dashboard' /> : <Landing />} 
20 |           />
21 |           
22 |           <Route 
23 |             path="/dashboard" 
24 |             element={UserLogin || token ? <Dashboard /> : <Navigate to="/" replace />} 
25 |           />
26 |           
27 |           <Route 
28 |             path="/shared/:sharelink" 
29 |             element={<SharedContent />} 
30 |           />
31 |           <Route
32 |             path='/*'
33 |             element={<LostPage />}
34 |           />
35 |         </Routes>
36 |       </div>
37 |     </Router>
38 |   )
39 | }
40 | 
41 | export default App


--------------------------------------------------------------------------------
/src/components/NavBar.tsx:
--------------------------------------------------------------------------------
 1 | import { Brain } from "lucide-react";
 2 | import Button from "./ui/Button";
 3 | import { Dispatch, SetStateAction } from 'react'
 4 | 
 5 | export const NavBar = ({ setCurrent }: { setCurrent: Dispatch<SetStateAction<string>> }) => {
 6 | 
 7 |     return (
 8 |         <div className="flex justify-between items-center text-text">
 9 |             <div className="brand flex gap-2 items-center">
10 |                 <Brain 
11 |                     className="w-6 h-6 md:w-10 md:h-10 cursor-pointer" 
12 |                     onClick={() => setCurrent("")}
13 |                 />
14 |                 <h1
15 |                     className="font-font1 font-semibold text-weigh text-[1.5rem] md:text-[2.5rem] tracking-tight cursor-pointer"
16 |                     onClick={() => setCurrent("")}
17 |                 >
18 |                     BigBrain
19 |                 </h1>
20 |             </div>
21 | 
22 |             <div className="flex gap-4 text-[0.75rem] md:text-[1rem] font-medium">
23 |                 <Button 
24 |                     variant="secondary" 
25 |                     onClick={() => {
26 |                         setCurrent("login")
27 |                     }}
28 |                 >
29 |                     Login
30 |                 </Button>
31 |                 <Button 
32 |                     variant="primary" 
33 |                     onClick={() => setCurrent("register")}
34 |                 >
35 |                     Register
36 |                 </Button>
37 |             </div>
38 |         </div>
39 |     );
40 | };
41 | 


--------------------------------------------------------------------------------
/src/components/hooks/useKeyBindings.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | 
 3 | interface KeyBinding {
 4 |   keys: string[]; // A combination of keys to trigger the callback (e.g., ["Control", "k"])
 5 |   callback: () => void; // The function to execute when the keys are pressed
 6 | }
 7 | 
 8 | export function useKeyBindings(bindings: KeyBinding[]) {
 9 |   useEffect(() => {
10 |     const handleKeyDown = (event: KeyboardEvent) => {
11 |       bindings.forEach(({ keys, callback }) => {
12 |         const normalizedKeys = keys.map((key) => key.toLowerCase());
13 |         const pressedKeys = new Set<string>();
14 | 
15 |         // Track modifier keys explicitly
16 |         if (event.ctrlKey) pressedKeys.add("control");
17 |         if (event.shiftKey) pressedKeys.add("shift");
18 |         if (event.altKey) pressedKeys.add("alt");
19 |         if (event.metaKey) pressedKeys.add("meta");
20 | 
21 |         // Add the actual key pressed
22 |         if (event.key) pressedKeys.add(event.key.toLowerCase());
23 | 
24 |         // Match exactly: pressed keys must match the defined keys
25 |         const isExactMatch =
26 |           pressedKeys.size === normalizedKeys.length &&
27 |           normalizedKeys.every((key) => pressedKeys.has(key));
28 | 
29 |         if (isExactMatch) {
30 |           event.preventDefault(); // Prevent default behavior
31 |           callback(); // Execute the callback
32 |         }
33 |       });
34 |     };
35 | 
36 |     window.addEventListener("keydown", handleKeyDown);
37 |     return () => {
38 |       window.removeEventListener("keydown", handleKeyDown);
39 |     };
40 |   }, [bindings]);
41 | }


--------------------------------------------------------------------------------
/src/components/hooks/useMediaQuery.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useLayoutEffect, useState } from 'react'
 2 | 
 3 | const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 4 | 
 5 | type UseMediaQueryOptions = {
 6 |     defaultValue?: boolean
 7 |     initializeWithValue?: boolean
 8 | }
 9 |   
10 | const IS_SERVER = typeof window === 'undefined'
11 | export function useMediaQuery(
12 |     query = '(max-width:768px)',
13 |     {
14 |       defaultValue = false,
15 |       initializeWithValue = true,
16 |     }: UseMediaQueryOptions = {},
17 |   ): boolean {
18 |     const getMatches = (query: string): boolean => {
19 |       if (IS_SERVER) {
20 |         return defaultValue
21 |       }
22 |       return window.matchMedia(query).matches
23 |     }
24 |   
25 |     const [matches, setMatches] = useState<boolean>(() => {
26 |       if (initializeWithValue) {
27 |         return getMatches(query)
28 |       }
29 |       return defaultValue
30 |     })
31 |   
32 |     // Handles the change event of the media query.
33 |     function handleChange() {
34 |       setMatches(getMatches(query))
35 |     }
36 |   
37 |     useIsomorphicLayoutEffect(() => {
38 |       const matchMedia = window.matchMedia(query)
39 |   
40 |       // Triggered at the first client-side load and if query changes
41 |       handleChange()
42 |   
43 |       // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
44 |       if (matchMedia.addListener) {
45 |         matchMedia.addListener(handleChange)
46 |       } else {
47 |         matchMedia.addEventListener('change', handleChange)
48 |       }
49 |   
50 |       return () => {
51 |         if (matchMedia.removeListener) {
52 |           matchMedia.removeListener(handleChange)
53 |         } else {
54 |           matchMedia.removeEventListener('change', handleChange)
55 |         }
56 |       }
57 |     }, [query])
58 |   
59 |     return matches
60 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SecondBrain Application
 2 | 
 3 | ## SecondBrain 📚🧠  
 4 | A modern knowledge management tool that empowers users to save, organize, and efficiently search through their personal knowledge base.
 5 | 
 6 | ### Key Features  
 7 | - **Vector Search Implementation**:  
 8 |   - Enhanced search functionality using a vector database for semantic and contextual searches.  
 9 |   - Enables users to retrieve information based on intent and meaning, not just keywords.
10 | 
11 | - **Custom UI Library**:  
12 |   - Developed a UI library from scratch for a seamless and user-friendly experience.  
13 |   - Features modular and reusable components tailored for this application.
14 | 
15 | - **Link Organization**:  
16 |   - Add links (videos, articles, etc.) with titles and tags for better categorization.  
17 |   - Supports tagging for flexible organization and retrieval.  
18 | 
19 | - **Authentication**:  
20 |   - Includes normal authentication to ensure user data privacy and security.  
21 | 
22 | - **MongoDB Integration**:  
23 |   - Persistent data storage for all links, tags, and user information.
24 | 
25 | ### Technologies Used  
26 | - **Frontend**: Custom UI components built with [your stack, e.g., React/Tailwind/Vanilla JS].  
27 | - **Backend**: Node.js with Express.js for API handling and authentication.  
28 | - **Database**: MongoDB for structured data storage and a vector database for search indexing.  
29 | - **Search**: Semantic search powered by vector embeddings.
30 | 
31 | ### Getting Started  
32 | 1. Clone the repository:  
33 |    ```bash
34 |    git clone https://github.com/your-username/secondbrain.git
35 |    cd secondbrain
36 |    ```
37 | 2. Install dependencies:  
38 |    ```bash
39 |    npm install
40 |    ```
41 | 3. Start the application:  
42 |    ```bash
43 |    npm run dev
44 |    ```
45 | 
46 | ### Future Enhancements  
47 | - Expand vector search capabilities to support multimedia (e.g., images and videos).  
48 | - Add collaborative features for team-based knowledge management.  
49 | - Optimize the UI library for broader use in other projects.
50 | 


--------------------------------------------------------------------------------
/src/components/ui/FormContainer.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FormEvent } from 'react';
 2 | import Heading from './Heading';
 3 | import { EllipsisVertical } from 'lucide-react';
 4 | import { Dispatch, SetStateAction } from 'react'
 5 | interface FormContainerProps {
 6 |     title?: string;
 7 |     subtitle?: string;
 8 |     children: React.ReactNode;
 9 |     onSubmit?: (e: FormEvent<HTMLFormElement>) => void | Promise<void>;
10 |     authLoading?: boolean;
11 |     className?: string;
12 | }
13 | 
14 | const FormContainer: React.FC<FormContainerProps & {
15 |   setUsername?: Dispatch<SetStateAction<string>>;
16 |   setPassword?: Dispatch<SetStateAction<string>>;
17 |   variant?: boolean
18 | }> = ({
19 |   title='', 
20 |   subtitle='', 
21 |   children, 
22 |   onSubmit,
23 |   setUsername,
24 |   setPassword,
25 |   variant = true
26 | }) => {
27 |   const handleTestCreds = () => {
28 |     setUsername?.(import.meta.env.VITE_TEST_USERNAME)
29 |     setPassword?.(import.meta.env.VITE_TEST_PASSWORD)
30 |   }
31 |   return (
32 |     <div className='container flex flex-col justify-center items-center mx-auto text-black'>
33 |       <div className='formContainer min-w-[15em] md:min-w-[30em] border-2 border-border p-4 rounded-md flex flex-col gap-2'>    
34 |         <div className='flex w-full justify-between items-center'>
35 |           <Heading variant='primary' size='md'>
36 |             {title}
37 |           </Heading>
38 |           {
39 |             variant &&
40 |               <div className='relative group'>
41 |                 <button 
42 |                   className="p-1 text-white hover:bg-cardColor-1 rounded-lg "
43 |                   onClick={handleTestCreds}
44 |                 >
45 |                   <EllipsisVertical />
46 |                 </button>
47 |                 <div className="tooltip">
48 |                   Test Creds
49 |                 </div>
50 |               </div>
51 |           }
52 | 
53 |         </div>
54 |         <Heading variant='secondary' size='xs'>
55 |           {subtitle}
56 |         </Heading>
57 |         <form className='flex flex-col gap-3' onSubmit={onSubmit}>
58 |           {children}
59 |         </form>
60 |       </div>
61 |     </div>
62 |   );
63 | };
64 | 
65 | export default FormContainer;


--------------------------------------------------------------------------------
/src/components/Dashboard.tsx:
--------------------------------------------------------------------------------
 1 | import {  useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 2 | import axios from "axios";
 3 | import { useEffect, useState } from "react";
 4 | import Sidebar from "./ui/Sidebar";
 5 | import { useFetchContent } from "./hooks/useFetchContent";
 6 | import Content from "./Content";
 7 | import { allContentAtom, filteredContentAtom, isLoggedIn, shareLink, shareModal } from "./recoil/atoms";
 8 | 
 9 | const Dashboard = () => {
10 |   const token = localStorage.getItem("token") || "";
11 |   const [userLogin, setUserLogin] = useRecoilState(isLoggedIn);
12 |   const setShareLink = useSetRecoilState(shareLink)
13 |   const BASE_URL = import.meta.env.VITE_BASE_URL;
14 |   const setDisplayedContent = useSetRecoilState(filteredContentAtom)
15 |   const contentstore = useRecoilValue(allContentAtom)
16 |   const fetchContent = useFetchContent();
17 | 
18 |   const setShareModalStatus = useSetRecoilState(shareModal)
19 | 
20 | 
21 |   const [sideOpen, setSideOpen] = useState(false);
22 |   
23 |   useEffect(() => {
24 |     if(userLogin && token){
25 |         fetchContent()
26 |     } 
27 |   }, [userLogin]);
28 | 
29 |   const onLogout = () => {
30 |     setUserLogin(false)
31 |     localStorage.removeItem('token')
32 |   }
33 | 
34 |   const handleShareLink = async () => {
35 |     setShareModalStatus(true)
36 |     try {
37 |       const response = await axios.post(
38 |         `${BASE_URL}/brain/share`,
39 |         { share: true },
40 |         { headers: { Authorization: `Bearer ${token}` } }
41 |       );
42 |       const hashedString = response.data.link;
43 |       setShareLink(`${import.meta.env.VITE_FRONTEND_URL}/shared/${hashedString}`);
44 |     } catch (error) {
45 |       console.error("Failed to generate share link:", error);
46 |     } 
47 |   };
48 | 
49 |   return (
50 |     <>
51 |       <Sidebar 
52 |         isOpen={sideOpen} 
53 |         toggleSidebar={() => setSideOpen((prev) => !prev)} 
54 |         contentStore={contentstore}
55 |         setDisplayedContent={setDisplayedContent}
56 |         showLogout={true}
57 |         onLogout={onLogout}
58 |       />
59 |       <div className="flex flex-col mx-auto max-w-7xl">
60 |         <Content 
61 |           handleShareLink={handleShareLink} 
62 |           sideOpen={sideOpen}
63 |         />
64 |       </div>
65 |     </>
66 |   );
67 | };
68 | 
69 | export default Dashboard;
70 | 


--------------------------------------------------------------------------------
/src/components/ShareModal.tsx:
--------------------------------------------------------------------------------
 1 | import { useRecoilValue, useSetRecoilState } from "recoil"
 2 | import Button from "./ui/Button"
 3 | import Heading from "./ui/Heading"
 4 | import { shareLink, shareModal } from "./recoil/atoms"
 5 | 
 6 | const ShareModal = ({
 7 | }) => {
 8 |     
 9 |     const share = useRecoilValue(shareLink).toString()
10 |     const setShareModalStatus = useSetRecoilState(shareModal)
11 |     const handleCopy = () => {
12 |         navigator.clipboard.writeText(share)
13 |         setShareModalStatus(false)
14 |     }
15 |     return (
16 |         <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
17 |             <div className="bg-white p-5 rounded-lg shadow-xl relative w-[300px] md:w-[350px] text-[0.75rem] lg:text-[1rem] text-black font-font1">
18 |                 <Button
19 |                     variant="primary"
20 |                     onClick={() => setShareModalStatus(false)}
21 |                     className="absolute top-3 right-4 text-gray-600 hover:text-gray-900"
22 |                 >
23 |                     ✕
24 |                 </Button>
25 |                 <div className="flex flex-col space-y-4">
26 |                     <div className="flex flex-col">
27 |                         <Heading variant="primary" size="sm">
28 |                             <span className="text-black">
29 |                                 Share List
30 |                             </span>
31 |                         </Heading>
32 |                         <Heading variant="secondary" size="xs">
33 |                             <span className="text-cardColor-2">
34 |                                 Share your list with the world
35 |                             </span>
36 |                         </Heading>
37 |                     </div>
38 |                     <div className="flex items-center gap-2 ">
39 |                         <input type="text" value={share} className="bg-secondary-2 text-white p-2 flex-1 rounded-lg" disabled/>
40 |                         <Button 
41 |                             variant="secondary" 
42 |                             className="rounded-lg"
43 |                             onClick={handleCopy}
44 |                         >
45 |                             Copy
46 |                         </Button>
47 |                     </div>
48 |                 </div>
49 |             </div>
50 |         </div>
51 |             
52 | 
53 | 
54 |     )
55 | }
56 | 
57 | export default ShareModal
58 | 


--------------------------------------------------------------------------------
/src/components/ui/SeachSuggestions.tsx:
--------------------------------------------------------------------------------
 1 | import { Loader, PlusIcon, Share2 } from "lucide-react"
 2 | import { useSetRecoilState } from "recoil"
 3 | import { modalStatus, shareModal } from "../recoil/atoms"
 4 | 
 5 | interface SearchSuggestionsType{
 6 |     isLoading: boolean,
 7 |     searchResults: { title: string, link: string}[]
 8 | }
 9 | 
10 | const SeachSuggestions : React.FC<SearchSuggestionsType> = ({
11 |     isLoading,
12 |     searchResults
13 | }) => {
14 |     const setAddModalStatus = useSetRecoilState(modalStatus)
15 |     const setShareModalStatus = useSetRecoilState(shareModal)
16 |     const defaultOptions = [
17 |         {
18 |             icon: <PlusIcon />,
19 |             text: "Add new memory",
20 |             onClick: () => handleAddMemory()
21 |         },
22 |         {
23 |             icon: <Share2 />,
24 |             text: "Share your memories",
25 |             onClick: () => handleShareMemory()
26 |         }
27 |     ]
28 | 
29 |     const handleAddMemory = () => {
30 |         console.log("Adding memory clicked")
31 |         setAddModalStatus(true)
32 |     }
33 | 
34 |     const handleShareMemory = () => {
35 |         console.log("Share memory clicked")
36 |         setShareModalStatus(true)
37 |     }
38 |     return (
39 |     <div className="absolute bg-cardColor-2 rounded-lg top-[50%] w-full h-fit pt-10 pb-4 px-5 flex gap-2 flex-col"> 
40 |         {isLoading ? (
41 |             <div className="py-10 text-center text-gray-600">
42 |                 <Loader className="w-8 h-8 mx-auto animate-spin duration-[2000ms]" />
43 |             </div>
44 |         ) 
45 |         :   (
46 |             searchResults.length > 0 ? (
47 |                 searchResults.map((result, index) => (
48 |                     <a href={result.link} target="__blank">
49 |                         <div
50 |                             key={index}
51 |                             className="p-2 cursor-pointer hover:bg-cardColor-1 rounded-md text-gray-600 hover:text-gray-200 transition-colors flex gap-2 shadow-md"
52 |                         >
53 |                             
54 |                                 {result.title}
55 |                         </div>
56 |                     </a>
57 |                 ))
58 |             ) : (
59 |                 defaultOptions.map((option, index) => (
60 |                     <div
61 |                         key={index}
62 |                         className="p-2  cursor-pointer hover:bg-cardColor-1 rounded-md text-gray-600 hover:text-gray-200 transition-colors flex gap-2 shadow-md"
63 |                         onClick={option.onClick}
64 |                     >
65 |                         {option.icon} {option.text}
66 |                     </div>
67 |                 )))
68 |             )
69 |         }
70 |     </div>
71 |   )
72 | }
73 | 
74 | export default SeachSuggestions
75 | 


--------------------------------------------------------------------------------
/src/components/Hero.tsx:
--------------------------------------------------------------------------------
 1 | import { Dispatch, SetStateAction, useState } from 'react';
 2 | import Button from './ui/Button'
 3 | import Input from './ui/Input' 
 4 | import Heading from './ui/Heading';
 5 | import { useSetRecoilState } from 'recoil';
 6 | import { heroTitleinput, heroLinkinput } from './recoil/atoms';
 7 | 
 8 | const Hero = ({ setCurrent }: { setCurrent: Dispatch<SetStateAction<string>> }) => {
 9 |    const setHeroTitle = useSetRecoilState(heroTitleinput);
10 |    const setHeroLink = useSetRecoilState(heroLinkinput);
11 | 
12 |    const [tempTitle, setTempTitle] = useState<string | null>(null);
13 |    const [tempLink, setTempLink] = useState<string | null>(null);
14 | 
15 |    const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
16 |        const newValue = event.target.value === '' ? null : event.target.value;
17 |        setTempTitle(newValue);
18 |    }
19 | 
20 |    const handleLinkChange = (event: React.ChangeEvent<HTMLInputElement>) => {
21 |        const newValue = event.target.value === '' ? null : event.target.value;
22 |        setTempLink(newValue);
23 | 
24 |    }
25 | 
26 |    const handleGetStarted = () => {
27 |        setHeroTitle(tempTitle);
28 |        setHeroLink(tempLink);
29 |        setCurrent('register')
30 |    }
31 |    return (
32 |        <div className='my-12 mx-auto w-full md:w-[70%] flex flex-col text-center items-center gap-12 overflow-x-hidden'>
33 |             <Heading 
34 |                 variant='primary'
35 |                 size='lg'    
36 |             >
37 |                 Your <span className='font-font2 tracking-tight font-normal'>Digital</span> Mind:
38 |                 <br />
39 |                 Save, Share, Revisit
40 |             </Heading>
41 |             <div className='flex flex-col gap-4 mx-auto'>
42 |                 <Heading 
43 |                     variant='secondary'
44 |                     size='xs'
45 |                     className='mx-auto'
46 |                 >
47 |                     Organize your thoughts, one link at a time!
48 |                 </Heading>
49 |                 <Input 
50 |                     value={tempTitle || ''} 
51 |                     onChange={handleTitleChange} 
52 |                     placeholder='Title...' 
53 |                 />
54 |                 <Input 
55 |                     value={tempLink || ''} 
56 |                     onChange={handleLinkChange} 
57 |                     placeholder='Link...' 
58 |                 />
59 |                 <div className='mx-auto'>
60 |                     <Button variant='secondary' onClick={handleGetStarted}>
61 |                         <h1 className='text-[0.8rem] md:text-[1rem] font-medium'>Get Started</h1>
62 |                     </Button>        
63 |                 </div>
64 |             </div>
65 |         </div>
66 |     )
67 | }
68 | 
69 | export default Hero


--------------------------------------------------------------------------------
/src/components/Content.tsx:
--------------------------------------------------------------------------------
 1 | import { useMediaQuery } from './hooks/useMediaQuery'
 2 | import Heading from './ui/Heading'
 3 | import Button from './ui/Button'
 4 | import {  useRecoilState, useRecoilValue } from 'recoil'
 5 | import { PlusIcon, Share2Icon } from 'lucide-react'
 6 | import Card from './Card'
 7 | import ContentBlur from './ui/ContentBlur'
 8 | import { filteredContentAtom, modalStatus, shareModal } from './recoil/atoms'
 9 | import ContentForm from './ContentForm'
10 | import ShareModal from './ShareModal'
11 | import SearchBar from './SearchBar'
12 | 
13 | interface ContentProps {
14 |   handleShareLink: () => Promise<void>;
15 |   sideOpen: boolean,
16 | }
17 | 
18 | const Content: React.FC<ContentProps> = ({ 
19 |   handleShareLink, 
20 |   sideOpen,
21 |   }) => {
22 |     const isMobile = useMediaQuery()
23 |     const displayedContent = useRecoilValue(filteredContentAtom)
24 |     const [AddModalStatus, setAddModalStatus] = useRecoilState(modalStatus)
25 |     const ShareModalStatus = useRecoilValue(shareModal)
26 |     
27 |     return (
28 |     <>
29 |       <ContentBlur sideOpen={sideOpen}>
30 |         <div className='layoutContainer flex flex-col px-10 py-10 gap-10'>
31 |           <SearchBar contentStore={displayedContent}/>
32 |           <div className='contentContainer min-h-[80vh]'>
33 |             <div className="flex justify-between items-center gap-2">
34 |               <Heading variant="primary" size={`${isMobile ? 'jsm' : 'md'}`}>What I'm Learning</Heading>
35 |               <div className="flex gap-2 md:gap-4">
36 |                 <Button
37 |                   variant="secondary"
38 |                   className={`flex gap-1 items-center  `}
39 |                   onClick={sideOpen ? undefined : handleShareLink}
40 |                   disabled={sideOpen}
41 |                 >
42 |                   <Share2Icon className={`w-4 h-4 `} />
43 |                   {!isMobile && 'Share List'}
44 |                 </Button>
45 |                 <Button
46 |                   variant="primary"
47 |                   className="flex gap-1 items-center"
48 |                   onClick={sideOpen ? undefined : () => setAddModalStatus(true)}
49 |                   disabled={sideOpen}
50 |                 >
51 |                   <PlusIcon className={`w-4 h-4" `} />
52 |                   {!isMobile && 'Add Content'}
53 |                 </Button>
54 |               </div>
55 |             </div>
56 |             <div className="cardsContainer grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-4">
57 |               {displayedContent.length > 0 ? 
58 |                 (
59 |                   displayedContent.map((item) => (
60 |                   <Card key={item.contentId} {...item} sideOpen={sideOpen}/> //Frontend updates automatically as displayedContent is a state variable
61 |                 ))
62 |               ) : (
63 |                 <p>No content available</p>
64 |               )}
65 |             </div>
66 |           </div>  
67 |         </div>
68 |       </ContentBlur>
69 |       
70 |       {AddModalStatus && (
71 |         <ContentForm onClose={() => setAddModalStatus(false)}  />
72 |       )}
73 |       {ShareModalStatus && (
74 |         <ShareModal/>
75 |       )}
76 |     </>
77 |     )
78 | }
79 | 
80 | 
81 | 
82 | export default Content
83 | 


--------------------------------------------------------------------------------
/src/components/SharedContent.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | import { useParams } from 'react-router-dom'
 3 | import axios from 'axios'
 4 | import Card, { ContentType } from './Card'
 5 | import Sidebar from './ui/Sidebar'
 6 | import Heading from './ui/Heading'
 7 | import { useMediaQuery } from './hooks/useMediaQuery'
 8 | import ContentBlur from './ui/ContentBlur'
 9 | import SearchBar from './SearchBar'
10 | 
11 | function SharedContent() {
12 |     const { sharelink } = useParams()
13 |     const BASE_URL = import.meta.env.VITE_BASE_URL
14 |     const [contentStore, setContentStore] = useState<ContentType[]>([])
15 |     const [displayedContent, setDisplayedContent] = useState<ContentType[]>([])
16 |     const [username, setUsername] = useState<string | null>(null)
17 |     const [error, setError] = useState(null)
18 |     const [sideOpen, setSideOpen] = useState(false)
19 |     const isMobile = useMediaQuery()
20 | 
21 |     useEffect(() => {
22 |         const fetchSharedContent = async () => {
23 |             try {
24 |                 const response = await axios.get(`${BASE_URL}/brain/${sharelink}`)
25 |                 console.log(response.data)
26 |                 setContentStore(response.data.content)
27 |                 setDisplayedContent(response.data.content)
28 |                 setUsername(response.data.content[0].userId.username)
29 |             } catch (err) {
30 |                 // @ts-ignore
31 |                 setError(err.response?.data?.message || 'Failed to fetch shared content')
32 |             }
33 |         }
34 | 
35 |         fetchSharedContent()
36 |     }, [sharelink])
37 | 
38 |     if (error) {
39 |         return <div>Error: {error}</div>
40 |     }
41 | 
42 |     return (
43 |         <>
44 |             <Sidebar
45 |                 isOpen={sideOpen} 
46 |                 toggleSidebar={() => setSideOpen(p => !p)}
47 |                 contentStore={contentStore}
48 |                 setDisplayedContent={setDisplayedContent}
49 |             />
50 |             <div className='flex flex-col min-h-screen mx-auto max-w-7xl'>
51 |                 <div className='flex-1'>
52 |                     <ContentBlur sideOpen={sideOpen}>
53 |                         <div className='flex flex-col gap-5 px-10 py-10'>
54 |                             {/* @ts-ignore */}
55 |                             <Heading variant="primary" size={`${isMobile ? 'jsm' : 'md'}`}>{`${username?.charAt(0).toUpperCase() + username?.slice(1)}'s Brain`}</Heading>
56 |                             <SearchBar contentStore={contentStore}/>
57 |                             <div className='cardsContainer grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-4'>
58 |                             {displayedContent.length > 0 ? (
59 |                                 displayedContent.map((item) => (
60 |                                 <Card key={item.contentId} {...item} sideOpen={sideOpen} variant={true}/>
61 |                                 ))
62 |                             ) : (
63 |                                 <p>No content available</p>
64 |                             )}
65 |                             </div>
66 |                         </div>
67 |                     </ContentBlur>
68 |                 </div>
69 |             </div>
70 |         </>
71 |         
72 |     )
73 | }
74 | 
75 | export default SharedContent


--------------------------------------------------------------------------------
/src/components/ui/Sidebar.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Heading from "./Heading";
  3 | import { Brain, X, SquarePlay, File, Image, AudioLines, Grid2X2, ChevronRight } from "lucide-react";
  4 | import { ContentType } from "../Card";
  5 | import { useNavigate } from "react-router-dom";
  6 | 
  7 | interface SidebarProps {
  8 |     isOpen: boolean;
  9 |     toggleSidebar: () => void;
 10 |     contentStore: ContentType[];
 11 |     setDisplayedContent: (content: ContentType[]) => void;
 12 |     showLogout?: boolean;
 13 |     onLogout?: () => void;
 14 |     filterItems?: Array<{ icon: React.ReactNode; label: string; filter: string }>;
 15 | }
 16 | 
 17 | const Sidebar: React.FC<SidebarProps> = ({ 
 18 |     isOpen, 
 19 |     toggleSidebar, 
 20 |     contentStore, 
 21 |     setDisplayedContent, 
 22 |     showLogout = false,
 23 |     onLogout,
 24 |     filterItems = [
 25 |         { icon: <Image />, label: 'Image', filter: 'image' },
 26 |         { icon: <SquarePlay />, label: 'Video', filter: 'video' },
 27 |         { icon: <File />, label: 'Article', filter: 'article' },
 28 |         { icon: <AudioLines />, label: 'Audio', filter: 'audio' },
 29 |         { icon: <Grid2X2 />, label: 'All', filter: 'all' }
 30 |     ]
 31 | }) => {
 32 |     
 33 |     const navigate = useNavigate()
 34 | 
 35 |     const handleFilter = (type: string) => {
 36 |         if (!setDisplayedContent) return;
 37 | 
 38 |         if (type === 'all') {
 39 |             setDisplayedContent(contentStore);
 40 |         } else {
 41 |             const filteredContent = contentStore.filter(content => content.type === type);
 42 |             setDisplayedContent(filteredContent);
 43 |         }
 44 |         toggleSidebar();
 45 |     }
 46 | 
 47 |     return (
 48 |         <div 
 49 |             className={`fixed top-0 left-0 bottom-0 z-50 bg-cardColor-2 shadow-lg transition-all duration-300 ease-in-out ${isOpen ? 'w-40 md:w-60 ' : 'w-0'}`}
 50 |         >
 51 |             <div className="flex flex-col h-full">
 52 |                 <div className={`flex items-center justify-between px-2 py-4 ${isOpen && 'border-b-4 border-cardColor-1 '}`}>
 53 |                     <div className="h-[30px] w-full flex items-center justify-between">
 54 |                         {isOpen && 
 55 |                             <Heading variant="primary" size="sm" className="flex gap-2 items-center">
 56 |                                 <Brain className="hover:cursor-pointer" onClick={() => navigate('/')}/>
 57 |                                 <span className="hover:cursor-pointer" onClick={() => navigate('/')}>
 58 |                                     BigBrain
 59 |                                 </span>
 60 |                             </Heading>
 61 |                         }
 62 |                         <button className="p-1 hover:bg-cardColor-1 rounded-lg" onClick={toggleSidebar}>
 63 |                             {isOpen ? <X /> : <ChevronRight />}
 64 |                         </button>
 65 |                     </div>
 66 |                 </div>
 67 | 
 68 |                 {isOpen && (
 69 |                     <div className="flex-1 px-4 py-6">
 70 |                         <div className="space-y-4">
 71 |                             {filterItems.map((item) => (
 72 |                                 <button
 73 |                                     key={item.filter}
 74 |                                     onClick={() => handleFilter(item.filter)}
 75 |                                     className="flex items-center gap-3 w-full p-2 text-white hover:bg-cardColor-1 rounded-md transition-colors"
 76 |                                 >
 77 |                                     {item.icon}
 78 |                                     <span>{item.label}</span>
 79 |                                 </button>
 80 |                             ))}
 81 |                         </div>
 82 |                     </div>
 83 |                 )}
 84 | 
 85 |                 {isOpen && showLogout && onLogout && (
 86 |                     <div className="p-4 border-t-4 border-cardColor-1">
 87 |                         <button
 88 |                             onClick={onLogout}
 89 |                             className="w-full bg-logout-1 text-white font-font1 font-semibold tracking-wider py-2 rounded-md hover:bg-logout-2 transition-colors"
 90 |                         >
 91 |                             Logout
 92 |                         </button>
 93 |                     </div>
 94 |                 )}
 95 |             </div>
 96 |         </div>
 97 |     );
 98 | };
 99 | 
100 | export default Sidebar;


--------------------------------------------------------------------------------
/src/components/Register.tsx:
--------------------------------------------------------------------------------
  1 | import Input from './ui/Input'
  2 | import Button from './ui/Button'
  3 | import { useState, FormEvent } from 'react'
  4 | import { AuthSchema } from '../lib/schemas'
  5 | import { ZodError } from 'zod'
  6 | import axios from 'axios'
  7 | import Alert from './ui/Alert'
  8 | import FormContainer from './ui/FormContainer'
  9 | import React, { Dispatch, SetStateAction } from 'react'
 10 | 
 11 | interface FormErrors {
 12 |   username?: string
 13 |   password?: string
 14 | }
 15 | 
 16 | const Register = ({ setCurrent }: { setCurrent: Dispatch<SetStateAction<string>> }) => {
 17 |   const [username, setUsername] = useState('')
 18 |   const [password, setPassword] = useState('')
 19 |   const [authLoading, setauthLoading] = useState(false)
 20 |   const [errors, setErrors] = useState<FormErrors>({})
 21 |   const [showAlert, setShowAlert] = useState(false)
 22 |   const BASE_URL = import.meta.env.VITE_BASE_URL;
 23 | 
 24 | 
 25 |   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
 26 |     e.preventDefault()
 27 |     setErrors({})
 28 |   
 29 |     try {
 30 |       const validatedData = AuthSchema.parse({ username, password })
 31 |   
 32 |       setauthLoading(true)
 33 |       const response = await axios.post(
 34 |         `${BASE_URL}/user/register`,
 35 |         validatedData
 36 |       )
 37 |       if (response.status === 200) {
 38 |         setShowAlert(true)
 39 |         setTimeout(() => {
 40 |           setCurrent('login')
 41 |           setShowAlert(false)
 42 |         }, 1000)
 43 |       }
 44 |   
 45 |       setUsername('')
 46 |       setPassword('')
 47 |     } catch (error) {
 48 |       if (error instanceof ZodError) {
 49 |         const formErrors: FormErrors = {}
 50 |         error.errors.forEach((err) => {
 51 |           if (err.path[0]) {
 52 |             formErrors[err.path[0] as keyof FormErrors] = err.message
 53 |           }
 54 |         })
 55 |         setErrors(formErrors)
 56 |       } else if (axios.isAxiosError(error)) {
 57 |         if (error.response) {
 58 |           const errorMessage = error.response.data.message || 'An error occurred';
 59 |           switch (error.response.status) {
 60 |             case 403:
 61 |               setErrors({ username: errorMessage });
 62 |               break;
 63 |             case 411:
 64 |               setErrors({ 
 65 |                 username: errorMessage.includes('username') ? errorMessage : undefined,
 66 |                 password: errorMessage.includes('password') ? errorMessage : undefined
 67 |               });
 68 |               break;
 69 |             case 500:
 70 |               setErrors({ password: 'Server error. Please try again later.' });
 71 |               break;
 72 |             default:
 73 |               setErrors({ password: errorMessage });
 74 |           }
 75 |         } else if (error.request) {
 76 |           setErrors({ password: 'No response from server. Please check your connection.' });
 77 |         } else {
 78 |           setErrors({ password: 'Error setting up the request. Please try again.' });
 79 |         }
 80 |       } else {
 81 |         // Handle other types of errors
 82 |         setErrors({ password: 'Registration failed. Please try again.' });
 83 |       }
 84 |     } finally {
 85 |       setauthLoading(false)
 86 |     }
 87 |   }
 88 | 
 89 |   const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 90 |     setUsername(e.target.value)
 91 |     if (errors.username) {
 92 |       setErrors((prev) => ({ ...prev, username: undefined }))
 93 |     }
 94 |   }
 95 | 
 96 |   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 97 |     setPassword(e.target.value)
 98 |     if (errors.password) {
 99 |       setErrors((prev) => ({ ...prev, password: undefined }))
100 |     }
101 |   }
102 | 
103 |   return (
104 |     <div>
105 |         <FormContainer
106 |           title="Create an Account"
107 |           subtitle="Join us today!"
108 |           onSubmit={handleSubmit}
109 |           authLoading={authLoading}
110 |           variant={false}
111 |         >
112 |           <div>
113 |             <Input
114 |               value={username}
115 |               onChange={handleUsernameChange}
116 |               placeholder='Username...'
117 |               disabled={authLoading}
118 |               label={'Username'}
119 |               inputId={'Username'}
120 |             />
121 |             {errors.username && (
122 |               <p className='text-red-500 text-sm mt-1'>{errors.username}</p>
123 |             )}
124 |           </div>
125 |     
126 |           <div>
127 |             <Input
128 |               value={password}
129 |               onChange={handlePasswordChange}
130 |               type='password'
131 |               placeholder='Password...'
132 |               disabled={authLoading}
133 |               label={'Password'}
134 |               inputId={'Password'}
135 |             />
136 |             {errors.password && (
137 |               <p className='text-red-500 text-sm mt-1'>{errors.password}</p>
138 |             )}
139 |           </div>
140 |     
141 |           <Button type='submit' variant='primary' disabled={authLoading}>
142 |             {authLoading ? 'Registering...' : 'Register'}
143 |           </Button>
144 |         </FormContainer>
145 |         {showAlert && (
146 |           <Alert text='Account Created!' />
147 |         )}
148 |       </div>
149 |   );
150 | };
151 | 
152 | export default Register


--------------------------------------------------------------------------------
/src/components/Login.tsx:
--------------------------------------------------------------------------------
  1 | import Input from './ui/Input'
  2 | import Button from './ui/Button'
  3 | import { useState, FormEvent } from 'react'
  4 | import { AuthSchema } from '../lib/schemas'
  5 | import { ZodError } from 'zod'
  6 | import axios from 'axios'
  7 | import Alert from './ui/Alert'
  8 | import { useSetRecoilState } from 'recoil'
  9 | import { isLoggedIn } from './recoil/atoms'
 10 | import FormContainer from './ui/FormContainer'
 11 | 
 12 | interface FormErrors {
 13 |   username?: string
 14 |   password?: string
 15 | }
 16 | 
 17 | const Login = () => {
 18 |   const [username, setUsername] = useState('')
 19 |   const [password, setPassword] = useState('')
 20 |   const [authLoading, setauthLoading] = useState(false)
 21 |   const [errors, setErrors] = useState<FormErrors>({})
 22 |   const [showAlert, setShowAlert] = useState(false)
 23 |   const setisLoggedIn = useSetRecoilState(isLoggedIn)
 24 |   const BASE_URL = import.meta.env.VITE_BASE_URL;
 25 | 
 26 |   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
 27 |     e.preventDefault()
 28 |     setErrors({})
 29 | 
 30 |     try {
 31 |       const validatedData = AuthSchema.parse({ username, password })
 32 | 
 33 |       setauthLoading(true)
 34 |       const response = await axios.post(
 35 |         `${BASE_URL}/user/login`, 
 36 |         validatedData
 37 |       )
 38 |       if (response.status === 200) {
 39 |         setShowAlert(true)
 40 |         setTimeout(() => {
 41 |           setisLoggedIn(true) 
 42 |           localStorage.setItem('token', response.data.token) 
 43 |           setShowAlert(false)
 44 |         }, 1000)
 45 |       }
 46 |       setUsername('')
 47 |       setPassword('')
 48 |     } catch (error) {
 49 |       if (error instanceof ZodError) {
 50 |         const formErrors: FormErrors = {}
 51 |         error.errors.forEach((err) => {
 52 |           if (err.path[0]) {
 53 |             formErrors[err.path[0] as keyof FormErrors] = err.message
 54 |           }
 55 |         })
 56 |         setErrors(formErrors)
 57 |       } else if (axios.isAxiosError(error)) {
 58 |         if (error.response) {
 59 |           const errorMessage = error.response.data.message || 'An error occurred';
 60 |           switch (error.response.status) {
 61 |             case 403:
 62 |               setErrors({ password: errorMessage });
 63 |               break;
 64 |             case 411:
 65 |               setErrors({ 
 66 |                 username: errorMessage.includes('username') ? errorMessage : undefined,
 67 |                 password: errorMessage.includes('password') ? errorMessage : undefined
 68 |               });
 69 |               break;
 70 |             case 404:
 71 |               setErrors({ username: errorMessage });
 72 |               break;
 73 |             case 401:
 74 |               setErrors({ password: errorMessage });
 75 |               break;
 76 |             case 500:
 77 |               setErrors({ password: 'Server error. Please try again later.' });
 78 |               break;
 79 |             default:
 80 |               setErrors({ password: errorMessage });
 81 |           }
 82 |         } else if (error.request) {
 83 |           setErrors({ password: 'No response from server. Please check your connection.' });
 84 |         } else {
 85 |           setErrors({ password: 'Error setting up the request. Please try again.' });
 86 |         }
 87 |       } else {
 88 |         setErrors({ password: 'Login failed. Please try again.' });
 89 |       }
 90 |     } finally {
 91 |       setauthLoading(false)
 92 |     }
 93 |   }
 94 | 
 95 |   const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 96 |     setUsername(e.target.value)
 97 |     if (errors.username) {
 98 |       setErrors((prev) => ({ ...prev, username: undefined }))
 99 |     }
100 |   }
101 | 
102 |   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
103 |     setPassword(e.target.value)
104 |     if (errors.password) {
105 |       setErrors((prev) => ({ ...prev, password: undefined }))
106 |     }
107 |   }
108 | 
109 |   return (
110 |     <div>  
111 |       <FormContainer
112 |       title="Login"
113 |       subtitle="Welcome back! "
114 |       onSubmit={handleSubmit}
115 |       authLoading={authLoading}
116 |       setUsername={setUsername}
117 |       setPassword={setPassword}
118 |     >
119 |       <div>
120 |         <Input
121 |           value={username}
122 |           onChange={handleUsernameChange}
123 |           placeholder='Username...'
124 |           disabled={authLoading}
125 |           label={'Username'}
126 |           inputId={'username'}
127 |         />
128 |         {errors.username && (
129 |           <p className='text-red-500 text-sm mt-1'>{errors.username}</p>
130 |         )}
131 |       </div>
132 | 
133 |       <div>
134 |         <Input
135 |           value={password}
136 |           onChange={handlePasswordChange}
137 |           type='password'
138 |           placeholder='Password...'
139 |           disabled={authLoading}
140 |           label={'Password'}
141 |           inputId={'password'}
142 |         />
143 |         {errors.password && (
144 |           <p className='text-red-500 text-sm mt-1'>{errors.password}</p>
145 |         )}
146 |       </div>
147 | 
148 |       <Button type='submit' variant='primary' disabled={authLoading}>
149 |         {authLoading ? 'Logging in...' : 'Login'}
150 |       </Button>
151 |     </FormContainer>
152 |     {showAlert && (
153 |         <Alert text='Login Successful!' />
154 |       )}
155 |     </div>
156 |   );
157 | };
158 | 
159 | export default Login


--------------------------------------------------------------------------------
/src/components/Card.tsx:
--------------------------------------------------------------------------------
  1 | import { AudioLines, Trash, File, Image, SquarePlay, FilePenLine  } from "lucide-react";
  2 | import React, { useState } from "react";
  3 | import { useRecoilState, useSetRecoilState } from "recoil";
  4 | import axios from "axios";
  5 | import ContentForm from "./ContentForm";
  6 | import { allContentAtom, filteredContentAtom } from "./recoil/atoms";
  7 | import { Tags } from "../lib/contentId";
  8 | 
  9 | const TypeStyles: { [key: string]: JSX.Element } = {
 10 |     'image': <Image className="w-6 h-6 md:w-8 md:h-8"/>,
 11 |     'article': <File className="w-6 h-6 md:w-8 md:h-8"/>,
 12 |     'video': <SquarePlay className="w-6 h-6 md:w-8 md:h-8"/>,
 13 |     'audio': <AudioLines className="w-6 h-6 md:w-8 md:h-8"/>,
 14 | };
 15 | 
 16 | export interface ContentType {
 17 |     title?: string;
 18 |     type?: string;
 19 |     tags?: Tags[];
 20 |     link?: string;
 21 |     createdAt?: string;
 22 |     contentId?: string;
 23 | }
 24 | 
 25 | 
 26 | export interface CardType extends ContentType {
 27 |     sideOpen?: boolean
 28 |     variant?: boolean,
 29 |     updateModal?: boolean,
 30 | }
 31 | const Card: React.FC<CardType> = ({
 32 |     title,
 33 |     type,
 34 |     tags,
 35 |     link,
 36 |     createdAt,
 37 |     contentId = '',
 38 |     sideOpen,
 39 |     variant=false,
 40 | }) => {
 41 |     const BASE_URL = import.meta.env.VITE_BASE_URL
 42 |     const token = localStorage.getItem('token') || ''
 43 |     const [contentstore, setContentStore] = useRecoilState(allContentAtom)
 44 |     const setDisplayedContent = useSetRecoilState(filteredContentAtom)
 45 |     
 46 |     const [updateModal, setUpdateModal] = useState(false)
 47 | 
 48 |     const deleteContent = async(contentId: string) => {
 49 |         try {
 50 |             const filteredContent = contentstore.filter(content => content.contentId !== contentId)
 51 |             // Frontend updating quicker than BE accomodate for the lag deleting content.
 52 |             setContentStore(filteredContent)
 53 |             setDisplayedContent(filteredContent)
 54 |             await axios.delete(`
 55 |                 ${BASE_URL}/content/`,{
 56 |                     data: {contentId: contentId},
 57 |                     headers: {Authorization: `Bearer ${token}`}
 58 |                 } 
 59 |             );
 60 |         } catch (error) {
 61 |             console.error("Failed to delete content", error);
 62 |             alert('Error deleting the content')
 63 |             setContentStore(contentstore)
 64 |             setDisplayedContent(contentstore)
 65 |         }
 66 |     }
 67 |     return (
 68 |         <div className="bg-cardColor-1  border-2 border-border rounded-lg px-4 py-2 shadow-md relative">
 69 |             <div className="flex justify-between">
 70 |                 <div className="flex gap-2 items-center">
 71 |                     {TypeStyles[type!]}
 72 |                     <span className=" font-font1 text-[1rem] md:text[1.1rem] lg:text-[1.2rem] font-semibold tracking-normal break-words w-full line-clamp-2">{title}</span>
 73 |                 </div>
 74 |                 {
 75 |                     !variant && 
 76 |                     <div className="flex gap-2">
 77 |                         <button onClick={() => setUpdateModal?.(true)} disabled={sideOpen}>
 78 |                             <FilePenLine className="w-5 h-5 md:w-6 md:h-6" />
 79 |                         </button>
 80 |                         <button onClick={() => deleteContent(contentId)} disabled={sideOpen}>
 81 |                             <Trash className="w-5 h-5 md:w-6 md:h-6" />
 82 |                         </button>
 83 |                     </div>
 84 |                 }
 85 |             </div>
 86 |             <div className="mb-2">
 87 |                 <ul className="flex flex-wrap gap-2 mt-1">
 88 |                     {tags && tags.length > 0 && (
 89 |                         tags.map((tag) => (
 90 |                             <li
 91 |                                 key={tag.tagId}
 92 |                                 className="bg-cardColor-2  text-xs px-2 py-1 rounded"
 93 |                             >
 94 |                                 # {tag.title}
 95 |                             </li>
 96 |                         ))
 97 |                     )}
 98 |                 </ul>
 99 |             </div>
100 |             
101 |             {link && (
102 |                 <a
103 |                     href={sideOpen ? undefined : link}
104 |                     target="_blank"
105 |                     rel="noopener noreferrer"
106 |                     className={`${sideOpen ? '' : 'hover:text-primary-2 '} mb-2 inline-block font-medium font-font1 text-[0.7rem] md:text[0.75rem] lg:text-[0.85rem] tracking-normal
107 |                     text-cardColor-3`}
108 |                 >
109 |                     View Content
110 |                 </a>
111 |             )}
112 |             
113 |             {createdAt && (
114 |                 <p className="text-xs text-cardColor-2 my-2">
115 |                     <span className="font-font1 font-semibold text-[0.7rem] md:text[0.75rem] lg:text-[0.85rem] tracking-normal">
116 |                         Created At:
117 |                         <span className="ml-1 font-medium tracking-wider ">
118 |                             {new Date(createdAt).toLocaleDateString()}
119 |                         </span>
120 |                     </span> 
121 |                 </p>
122 |             )}
123 | 
124 |             {updateModal && 
125 |             <ContentForm 
126 |                 onClose={() => setUpdateModal?.(false)} 
127 |                 mainTitle="Update Content" 
128 |                 initialData={{ title, type, tags, link, contentId, createdAt }}
129 |                 updateModal={updateModal}
130 |             />
131 |             }
132 |         </div>
133 |     );
134 | };
135 | 
136 | 
137 | 
138 | export default Card;
139 | 


--------------------------------------------------------------------------------
/src/components/SearchBar.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useRef, useState } from "react";
  2 | import {  Search } from "lucide-react";
  3 | import SeachSuggestions from "./ui/SeachSuggestions";
  4 | import axios from "axios";
  5 | import { ContentType } from "./Card";
  6 | 
  7 | interface SearchBarProps{
  8 |     contentStore: ContentType[]
  9 | }
 10 | const SearchBar: React.FC<SearchBarProps> = ({
 11 |     contentStore
 12 | }) => {
 13 |     const containerRef = useRef<HTMLDivElement | null>(null);
 14 |     const inputRef = useRef<HTMLInputElement>(null)
 15 |     const [searchedTerm, setSearchedTerm] = useState("");
 16 |     const [isFocused, setIsFocused] = useState(false);
 17 |     const [isLoading, setIsLoading] = useState(false)
 18 |     const [searchResults, setSearchResults] = useState<{ title: string, link: string}[]>([]);
 19 |     const BASE_URL = import.meta.env.VITE_BASE_URL;
 20 |     const token = localStorage.getItem('token')
 21 |     // const contentStore = useRecoilValue(allContentAtom)
 22 | 
 23 |     // To handle outside click
 24 |     useEffect(() => {
 25 |         const handleClickOutside = (event: MouseEvent) => {
 26 |             if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
 27 |                 setIsFocused(false);
 28 |             }
 29 |         };
 30 | 
 31 |         document.addEventListener("mousedown", handleClickOutside);
 32 |         return () => {
 33 |             document.removeEventListener("mousedown", handleClickOutside);
 34 |         };
 35 |     }, []);
 36 | 
 37 |     // To handle keyboard shotcuts
 38 |     useEffect(() => {
 39 |         const handleKeyDown = (e: KeyboardEvent) => {
 40 |             if ((e.ctrlKey || e.metaKey) && e.key === "k") {
 41 |                 e.preventDefault();
 42 |                 setIsFocused(true);
 43 |                 inputRef.current?.focus() 
 44 |             }
 45 | 
 46 |             if (e.key === "Escape") {
 47 |                 e.preventDefault();
 48 |                 setIsFocused(false);
 49 |                 setSearchedTerm("");
 50 |                 inputRef.current?.blur() 
 51 |             }
 52 |         };
 53 | 
 54 |         document.addEventListener("keydown", handleKeyDown);
 55 |         return () => document.removeEventListener("keydown", handleKeyDown);
 56 |     }, []);
 57 | 
 58 |     const vectorSearch = async () => {
 59 |         try{
 60 |             if(searchedTerm.trim()){
 61 |                 const response = await axios.post(
 62 |                     `${BASE_URL}/content/search`,
 63 |                     { search: searchedTerm },
 64 |                     {headers: { Authorization: `Bearer ${token}` } }
 65 |                 );
 66 |                 const results: (string)[] = await response.data.search
 67 |                 const orderMap = new Map(results.map((id, index) => [id, index]));
 68 |                 
 69 |                 const sortedContent = [...contentStore].sort((a, b) => {
 70 |                     const indexA = orderMap.get(a.contentId!) ?? Infinity;
 71 |                     const indexB = orderMap.get(b.contentId!) ?? Infinity;
 72 |                     return indexA - indexB;
 73 |                 });
 74 |                 
 75 |                 setSearchResults(sortedContent.slice(0,3).map(content => ({
 76 |                     link: content.link!,
 77 |                     title: content.title!
 78 |                 })))
 79 |                 }
 80 |         } catch (e) {
 81 |             console.error("Error during vector search: ",e)
 82 |         } finally{
 83 |             setIsLoading(false)
 84 |         }
 85 |     }
 86 | 
 87 |     // Debouncer
 88 |     useEffect(() => {
 89 |         setSearchResults([])
 90 |         const debounceTimeout = setTimeout(() => {
 91 |             vectorSearch()
 92 |         }, 1000)
 93 | 
 94 |         return () => clearTimeout(debounceTimeout)
 95 |     }, [searchedTerm])
 96 | 
 97 | 
 98 |     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 99 |         setSearchedTerm(e.target.value);
100 |         setIsFocused(true)
101 |         if(e.target.value === ''){
102 |             setIsLoading(false)
103 |         }else{
104 |             setIsLoading(true)
105 |         }
106 |     };
107 | 
108 | 
109 |     return (
110 |         <div className="flex flex-col  gap-4 z-10">
111 |             {/* <Heading variant="primary" className="text-center">
112 |                 <span className="text-[1.2rem] md:text-[4rem]">What would you like to do?</span>
113 |             </Heading> */}
114 |             <div ref={containerRef} className="w-[100%] text-[0.8rem] md:text-[1rem]">
115 |                 <div className="flex relative flex-col">
116 |                     <div  className="z-10">
117 |                         <input
118 |                             ref = {inputRef}
119 |                             value={searchedTerm} 
120 |                             onChange={handleInputChange} 
121 |                             className="w-full bg-cardColor-2 py-4 px-6 rounded-full shadow-md pr-14 pl-14"
122 |                             placeholder="Search your memories..."
123 |                             onFocus={() => setIsFocused(true)}
124 |                         />
125 |                         <div>
126 |                             <div className="absolute left-3 top-[50%] -translate-y-[50%] rounded-full bg-white text-black p-1.5">
127 |                                 <Search className="w-4 h-4 md:w-6 md:h-6" />
128 |                             </div>
129 |                             <div className="absolute right-3 top-[50%] -translate-y-[50%]  text-gray-600 p-1.5 font-light tracking-normal">
130 |                                 Ctrl + K
131 |                             </div>
132 |                         </div>
133 |                     </div>
134 |                     {isFocused &&  <SeachSuggestions isLoading={isLoading} searchResults={searchResults} />}
135 |                     {}
136 |                 </div>
137 |             </div>
138 |         </div>
139 |     );
140 | };
141 | 
142 | export default SearchBar;
143 | 


--------------------------------------------------------------------------------
/public/lost.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="885.20079" height="708.31655" viewBox="0 0 885.20079 708.31655" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="aabd4afe-642c-4327-a3f2-08ec89276309-373" data-name="Path 482" d="M305.95759,803.97637s-12.753-31.391,25.505-54.934Z" transform="translate(-157.39961 -95.84172)" fill="#f0f0f0"/><path id="e302a207-98de-4798-aedc-79a63cff2427-374" data-name="Path 483" d="M290.27363,803.40533s-3.89-22.374-34-22.182Z" transform="translate(-157.39961 -95.84172)" fill="#f0f0f0"/><path id="e16a8a0b-115e-4877-a9d6-27a72cf85b73-375" data-name="Path 482" d="M732.95759,803.97637s-12.753-31.391,25.505-54.934Z" transform="translate(-157.39961 -95.84172)" fill="#f0f0f0"/><path id="b0706b48-08e0-43ea-ab25-36cfaee90c12-376" data-name="Path 483" d="M717.27363,803.40533s-3.89-22.374-34-22.182Z" transform="translate(-157.39961 -95.84172)" fill="#f0f0f0"/><circle cx="565.05368" cy="394.03053" r="110.8529" fill="#f0f0f0"/><polygon points="565.358 394.03 565.663 394.03 571.145 708.317 559.572 708.317 565.358 394.03" fill="#f0f0f0"/><circle cx="803.05368" cy="479.08542" r="80.8529" fill="#f0f0f0"/><polygon points="803.276 479.085 803.498 479.085 807.496 708.317 799.055 708.317 803.276 479.085" fill="#f0f0f0"/><path d="M512.72772,575.74828a10.6636,10.6636,0,0,0,8.99946-13.652L552.462,539.92876l-18.40925-6.99159-26.364,22.12251a10.72142,10.72142,0,0,0,5.03894,20.6886Z" transform="translate(-157.39961 -95.84172)" fill="#ffb6b6"/><polygon points="332.796 697.353 323.037 697.352 318.394 659.71 332.798 659.71 332.796 697.353" fill="#ffb6b6"/><path d="M492.68433,802.65467l-31.4677-.00116v-.398a12.24876,12.24876,0,0,1,12.24811-12.24791h.00077l19.2194.00078Z" transform="translate(-157.39961 -95.84172)" fill="#2f2e41"/><polygon points="258.253 697.353 248.494 697.352 243.852 659.71 258.255 659.71 258.253 697.353" fill="#ffb6b6"/><path d="M418.14189,802.65467l-31.4677-.00116v-.398a12.24876,12.24876,0,0,1,12.2481-12.24791h.00078l19.2194.00078Z" transform="translate(-157.39961 -95.84172)" fill="#2f2e41"/><polygon points="265.791 488.031 245.109 601.135 237.875 690.973 261.361 689.818 274.73 602.578 307.96 526.618 317.85 689.608 339.47 689.678 351.103 483.507 265.791 488.031" fill="#2f2e41"/><path d="M511.15006,454.415l-28.9889-11.5343-33.25612,3.805L420.71221,462.271s8.624,108.15764-3.87664,133.52747c0,0,10.016,13.87358,50.82643,10.48683,0,0,39.75312-5.02431,40.73853-18.06008s1.19332-36.737,1.19332-36.737l13.7989-47.55075Z" transform="translate(-157.39961 -95.84172)" fill="#6c63ff"/><path d="M432.044,464.353l-11.33183-2.082s-12.05733,5.28675-11.93358,21.04064-21.30125,68.5705,4.33154,70.78479S432.044,516.64233,432.044,516.64233Z" transform="translate(-157.39961 -95.84172)" fill="#6c63ff"/><path d="M501.95577,461.12606l9.19429-6.71109s14.03761,3.17112,19.23007,14.47145c0,0,57.56571,41.74991,41.73193,57.58369s-48.11032,35.3215-48.11032,35.3215l-11.95038-13.53107,29.64882-26.85964-24.323-22.15808Z" transform="translate(-157.39961 -95.84172)" fill="#6c63ff"/><path d="M487.25519,412.89322a23.79938,23.79938,0,0,1-47.59875,0v-.91349a23.79938,23.79938,0,0,1,47.5805.91349Z" transform="translate(-157.39961 -95.84172)" fill="#ffb6b6"/><path d="M467.0732,409.05658c1.52248-.24969,3.17286-.4872,4.537.21315,2.96578,1.51639,2.28371,5.81587,3.90361,8.65377.63944,1.12664,1.67473,2.04621,2.101,3.26419s.16444,2.74046.83432,3.91581c.96831,1.69909,3.59306,1.94877,5.31648.93785a8.45465,8.45465,0,0,0,3.33726-4.7075c.57245-1.61992,1.05354-3.41036,2.436-4.47a5.16406,5.16406,0,0,0,1.33369-1.09009,3.28853,3.28853,0,0,0,.31669-1.86351c0-4.11678-.63944-7.3079.2923-11.29679,1.492-6.43095,2.85617-9.60989-1.86961-14.37829a16.35142,16.35142,0,0,0-8.90345-4.55526c-3.045-.49937-7.52712,3.75139-10.60862,3.654-7.83771-.31059-14.45135-7.56976-21.92369-5.22515a15.4197,15.4197,0,0,0-8.05085,5.92549c-3.65394,5.38348-3.3251,7.46623-2.79528,13.89109a2.37518,2.37518,0,0,0,.408,1.37023c.27406.32886.71861.50547.98656.84041a2.07669,2.07669,0,0,1,.3045,1.49813,10.07846,10.07846,0,0,1-.7247,3.045,1.25445,1.25445,0,0,0-.10962,1.09619,1.10836,1.10836,0,0,0,.609.41411c3.04495,1.09619,6.33352-1.017,9.59161-.96221s6.35178,2.235,9.71342,1.76C461.07465,410.53034,464.08307,409.54986,467.0732,409.05658Z" transform="translate(-157.39961 -95.84172)" fill="#2f2e41"/><path d="M466.91564,541.3665a2.839,2.839,0,0,1-.62927.16221l-26.42713,3.689a2.844,2.844,0,0,1-3.0613-1.8043l-22.74754-59.191a2.85615,2.85615,0,0,1,2.044-3.81247l.00014,0,24.852-5.54586a2.27074,2.27074,0,0,0,.55162-.20179l24.17208-12.63793a2.82911,2.82911,0,0,1,.58762-.22869l26.60157-7.0917a2.85071,2.85071,0,0,1,3.402,1.73517l19.83447,51.61088a2.842,2.842,0,0,1-.37523,2.73061l-6.85952,9.21159a2.85239,2.85239,0,0,1-1.26638.96006l-14.991,5.76115a2.255,2.255,0,0,0-.3115.14808L467.312,541.17827A2.85632,2.85632,0,0,1,466.91564,541.3665Z" transform="translate(-157.39961 -95.84172)" fill="#fff"/><path d="M479.21094,462.59444l-3.37808.90095-8.95188,2.38755-.016.00366-12.2558,6.40829-4.54822,2.37858-.00212.00081-6.831,3.57118-.18734.0422-7.09623,1.58249-3.42961.76682-13.9882,3.12134,21.95971,57.14092,14.41468-2.01148,3.53438-.49425,7.53322-1.0528.08744-.01126,24.207-13.87392,14.72819-5.66016,6.72448-9.02982-19.11548-49.74007Z" transform="translate(-157.39961 -95.84172)" fill="#e4e4e4"/><rect x="420.95351" y="481.09788" width="78.01578" height="3.47642" transform="translate(-299.99264 101.29638) rotate(-21.02215)" fill="#fff"/><rect x="425.11051" y="491.91473" width="78.01578" height="3.47642" transform="translate(-303.59627 103.50757) rotate(-21.02215)" fill="#fff"/><rect x="433.5076" y="513.76471" width="78.01578" height="3.47642" transform="translate(-310.87559 107.97414) rotate(-21.02215)" fill="#fff"/><polygon points="321.811 366.753 343.613 423.483 340.368 424.73 318.433 367.654 321.811 366.753" fill="#fff"/><polygon points="297.21 376.453 292.733 388.91 291.181 393.23 287.56 403.312 286.784 405.467 286.007 407.633 284.985 410.476 277.646 430.901 275.738 425.936 281.722 409.28 283.076 405.509 283.274 404.959 284.875 400.5 286.895 394.878 288.448 390.556 292.659 378.833 292.661 378.832 297.21 376.453" fill="#fff"/><polygon points="278.545 384.028 301.035 442.552 297.501 443.046 275.115 384.795 278.545 384.028" fill="#fff"/><circle cx="273.73095" cy="429.7149" r="10.35285" fill="#ffb6b6"/><circle cx="701.22511" cy="183.97567" r="183.97568" fill="#e4e4e4"/><path d="M994.46643,156.93609A183.99,183.99,0,0,1,687.90857,351.65056,183.99152,183.99152,0,1,0,994.46643,156.93609Z" transform="translate(-157.39961 -95.84172)" opacity="0.1" style="isolation:isolate"/><polygon points="700.72 183.975 700.214 183.975 691.116 705.577 710.323 705.577 700.72 183.975" fill="#e4e4e4"/><path d="M992.39961,803.64322h-834a1,1,0,0,1,0-2h834a1,1,0,0,1,0,2Z" transform="translate(-157.39961 -95.84172)" fill="#cacaca"/></svg>


--------------------------------------------------------------------------------
/src/components/ContentForm.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import axios from "axios";
  3 | import Button from "./ui/Button";
  4 | import Heading from "./ui/Heading";
  5 | import { ContentType } from "./Card";
  6 | import enrichContent, { ContentPayload } from "../lib/contentId";
  7 | import { useRecoilState, useSetRecoilState } from "recoil";
  8 | import { allContentAtom, filteredContentAtom } from "./recoil/atoms";
  9 | 
 10 | 
 11 | interface ContentFormProps {
 12 |   onClose: () => void;
 13 |   mainTitle?: string
 14 |   initialData?: ContentType
 15 |   updateModal?:boolean
 16 | }
 17 | 
 18 | const ContentForm: React.FC<ContentFormProps> = ({ 
 19 |   onClose, 
 20 |   mainTitle = 'Add New Content',
 21 |   initialData,
 22 |   updateModal
 23 |  }) => {
 24 |   const token = localStorage.getItem("token") || "";
 25 |   const [link, setLink] = useState(initialData?.link || '');
 26 |   const [type, setType] = useState(initialData?.type ||"");
 27 |   const [title, setTitle] = useState(initialData?.title || "");
 28 |   const [tags, setTags] = useState(initialData?.tags?.map(tag => tag.title) || []);
 29 |   const [newTag, setNewTag] = useState("");
 30 |   const BASE_URL = import.meta.env.VITE_BASE_URL;
 31 | 
 32 |   const setDisplayedContent = useSetRecoilState(filteredContentAtom)
 33 |   const [contentStore, setContentStore] = useRecoilState(allContentAtom)
 34 |   const contentTypes = ["image", "video", "article", "audio"];
 35 | 
 36 |   const isValidUrl = (url: string) =>
 37 |     /^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/.*)?$/.test(url);
 38 |   
 39 | 
 40 |   const handleAddTag = () => {
 41 |     if (newTag.trim() && !tags.includes(newTag.trim().toLowerCase())) {
 42 |       setTags((prev) => [...prev, newTag.trim().toLowerCase()]);
 43 |       setNewTag("");
 44 |     }
 45 |   };
 46 | 
 47 |   const handleRemoveTag = (tagToRemove: string) =>
 48 |     setTags((prev) => prev.filter((tag) => tag !== tagToRemove));
 49 | 
 50 |   const handleSubmit = async (e: React.FormEvent) => {
 51 |     e.preventDefault();
 52 | 
 53 |     if (!link || !isValidUrl(link)) return alert("Invalid URL.");
 54 |     if (!type) return alert("Please select a content type.");
 55 |     if (!title) return alert("Please enter a title.");
 56 |     const payload : ContentPayload = { 
 57 |       link, 
 58 |       type, 
 59 |       title, 
 60 |       tags,
 61 |       contentId: initialData?.contentId
 62 |     };
 63 | 
 64 |     const enrichedContent = enrichContent(payload)
 65 |     
 66 |     if (payload?.contentId && updateModal && initialData?.contentId) {
 67 |       // Update content
 68 |       const previousContentStore = [...contentStore];
 69 |       const updatedContent = contentStore.map(content => content.contentId === enrichedContent.contentId ? enrichedContent : content)  
 70 |       setContentStore(updatedContent);  // Update the FE first, then send out an request to BE. If it fails, rollback to befoer the update
 71 |       setDisplayedContent(updatedContent)
 72 |       onClose();
 73 |       try{
 74 |           await axios.put(
 75 |             `${BASE_URL}/content/`,
 76 |             {
 77 |               ...enrichedContent,
 78 |               contentId: initialData.contentId
 79 |             },
 80 |             { headers: { Authorization: `Bearer ${token}` } }
 81 |           );
 82 |       } catch(error){
 83 |           alert("Failed to update content.");
 84 |           console.error('failed to PUT content', error)
 85 |           setContentStore(previousContentStore);
 86 |           setDisplayedContent(previousContentStore) 
 87 |       }
 88 |     } else {
 89 |         // Create new content
 90 |         setContentStore((prevContent) => [...prevContent, enrichedContent]); // here the frontend and the backend are getting added in sync.
 91 |         setDisplayedContent((prevContent) => [...prevContent, enrichedContent])
 92 |         onClose();
 93 |         try{
 94 |           console.log(enrichedContent)
 95 |           await axios.post(
 96 |             `${BASE_URL}/content`,
 97 |             enrichedContent,
 98 |             { headers: { Authorization: `Bearer ${token}` } }
 99 |           );
100 |         } catch (error){
101 |           alert("Submission failed.");
102 |           console.error('failed to POST content', error)
103 |           const filteredContent = contentStore.filter(content => content.contentId != enrichedContent.contentId )
104 |           setContentStore(filteredContent);
105 |           setDisplayedContent(filteredContent) 
106 |         }
107 |       }
108 |   };
109 | 
110 |   return (
111 |     <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
112 |       <div className="bg-white p-5 rounded-lg shadow-xl relative w-[250px] md:w-[350px] text-black font-font1
113 |        text-[0.75rem] lg:text-[1rem]">
114 |         <Button
115 |           variant="primary"
116 |           onClick={onClose}
117 |           className="absolute top-3 right-4"
118 |         >
119 |           ✕
120 |         </Button>
121 |         <Heading variant="primary" size='sm' className="mb-6">
122 |           <span className="text-black">
123 |             {mainTitle}
124 |           </span>
125 |         </Heading>
126 |         <form onSubmit={handleSubmit} className="space-y-4">
127 |           <div>
128 |             <label className="block mb-2 font-bold" htmlFor="url">URL</label>
129 |             <input
130 |               type="text"
131 |               value={link}
132 |               id="url"
133 |               onChange={(e) => setLink(e.target.value)}
134 |               placeholder="Enter content URL"
135 |               className="w-full p-2 border rounded"
136 |               required
137 |             />
138 |           </div>
139 |           <div>
140 |             <label className="block mb-2 font-bold" htmlFor="type">Content Type</label>
141 |             <select
142 |               value={type}
143 |               id="type"
144 |               onChange={(e) => setType(e.target.value)}
145 |               className="w-full p-2 border rounded"
146 |               required
147 |             >
148 |               <option value="">Select Content Type</option>
149 |               {contentTypes.map((contentType) => (
150 |                 <option key={contentType} value={contentType}>
151 |                   {contentType.charAt(0).toUpperCase() + contentType.slice(1)}
152 |                 </option>
153 |               ))}
154 |             </select>
155 |           </div>
156 |           <div>
157 |             <label className="block mb-2 font-bold" htmlFor="title">Title</label>
158 |             <input
159 |               type="text"
160 |               value={title}
161 |               id="title"
162 |               onChange={(e) => setTitle(e.target.value)}
163 |               placeholder="Enter content title"
164 |               className="w-full p-2 border rounded"
165 |               required
166 |             />
167 |           </div>
168 |           <div>
169 |             <label className="block mb-2 font-bold" htmlFor="tags">Tags</label>
170 |             <div className="flex">
171 |               <input
172 |                 type="text"
173 |                 value={newTag}
174 |                 id="tags"
175 |                 onChange={(e) => setNewTag(e.target.value)}
176 |                 placeholder="Add a tag"
177 |                 className="flex-grow p-2 border rounded-l"
178 |               />
179 |               <Button
180 |                 type="button"
181 |                 variant="secondary"
182 |                 onClick={handleAddTag}
183 |               >
184 |                 Add
185 |               </Button>
186 |             </div>
187 |             <div className="flex flex-wrap gap-2 mt-2">
188 |               {tags.map((tag) => (
189 |                 <span key={tag} className="flex items-center bg-gray-200 px-2 py-1 rounded">
190 |                   {tag}
191 |                   <button
192 |                     type="button"
193 |                     onClick={() => handleRemoveTag(tag)}
194 |                     className="ml-2 text-red-500"
195 |                   >
196 |                     ✕
197 |                   </button>
198 |                 </span>
199 |               ))}
200 |             </div>
201 |           </div>
202 |           <Button type="submit" variant="secondary" className="w-full">
203 |             Submit
204 |           </Button>
205 |         </form>
206 |       </div>
207 |     </div>
208 |   );
209 | };
210 | 
211 | export default ContentForm;
212 | 


--------------------------------------------------------------------------------