Merge pull request #93 from deepraj21/main

feat: added directory feature

client/src/components/Directory/UserDirectoryContent.tsx

@@ -5,8 +5,10 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { Card, CardContent } from "@/components/ui/card"
 import { groupUsersByFirstLetter, User } from './directoryUtils'
 
+const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
+
 async function getUsers() {
-  const res = await fetch('http://127.0.0.1:5000/directory')
+  const res = await fetch(`${backendUrl}/directory`)
   if (!res.ok) {
     throw new Error('Failed to fetch users')
   }

client/src/components/Footer/Footer.tsx

@@ -56,14 +56,15 @@ const Footer = () => {
                                     </AlertDialog>
                                 </li>
                                 <li><Link to="/playground" className="text-white-400 text-sm">DevBots</Link></li>
-                                <li><Link to="/v0" className="text-white-400 text-sm">DevMap</Link></li>
+                                <li><Link to="https://universal-box.dev" className="text-white-400 text-sm">Universal-Box</Link></li>
                             </ul>
                         </div>
                         <div>
                             <h3 className="font-semibold mb-3">Contact</h3>
                             <ul className="space-y-2">
                                 <li><Link to="https://github.com/devhub-ai/devhub" className="text-white-400 text-sm">GitHub</Link></li>
                                 <li><Link to="https://www.linkedin.com/in/deepraj-bera-b64996231" className="text-white-400 text-sm">Linkedin</Link></li>
+                                <li><Link to="https://discord.com/invite/u86Gy2qFHm" className="text-white-400 text-sm">Discord</Link></li>
                             </ul>
                         </div>
                         <div>
@@ -76,7 +77,7 @@ const Footer = () => {
                     </div>
                     <div className="flex items-center justify-between mt-16 pt-8 border-t border-zinc-800">
                         <div className="text-sm text-white-400">
-                            © 2024 DevHub
+                           Copyright © 2024 DevHub
                         </div>
                         <div className="flex items-center gap-2">
                             <ModeToggle />

client/src/components/MultiSelect/TagInput.jsx

@@ -20,6 +20,60 @@ const TAGS = [
   { value: "ai", label: "AI" },
   { value: "ml", label: "Machine Learning" },
   { value: "fintech", label: "Fintech" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "graphql", label: "GraphQL" },
+  { value: "next.js", label: "Next.js" },
+  { value: "vue", label: "Vue" },
+  { value: "angular", label: "Angular" },
+  { value: "svelte", label: "Svelte" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "sass", label: "SASS" },
+  { value: "bootstrap", label: "Bootstrap" },
+  { value: "tailwind", label: "Tailwind CSS" },
+  { value: "aws", label: "AWS" },
+  { value: "azure", label: "Azure" },
+  { value: "gcp", label: "Google Cloud Platform" },
+  { value: "docker", label: "Docker" },
+  { value: "kubernetes", label: "Kubernetes" },
+  { value: "ci/cd", label: "CI/CD" },
+  { value: "devops", label: "DevOps" },
+  { value: "database", label: "Database" },
+  { value: "mongodb", label: "MongoDB" },
+  { value: "postgresql", label: "PostgreSQL" },
+  { value: "mysql", label: "MySQL" },
+  { value: "redis", label: "Redis" },
+  { value: "graphql", label: "GraphQL" },
+  { value: "rest-api", label: "REST API" },
+  { value: "microservices", label: "Microservices" },
+  { value: "serverless", label: "Serverless" },
+  { value: "blockchain", label: "Blockchain" },
+  { value: "web3", label: "Web3" },
+  { value: "cybersecurity", label: "Cybersecurity" },
+  { value: "game-development", label: "Game Development" },
+  { value: "data-science", label: "Data Science" },
+  { value: "data-analytics", label: "Data Analytics" },
+  { value: "big-data", label: "Big Data" },
+  { value: "nlp", label: "Natural Language Processing" },
+  { value: "computer-vision", label: "Computer Vision" },
+  { value: "cloud-computing", label: "Cloud Computing" },
+  { value: "iot", label: "Internet of Things (IoT)" },
+  { value: "ar-vr", label: "AR/VR" },
+  { value: "startup", label: "Startup" },
+  { value: "design", label: "Design" },
+  { value: "ui-ux", label: "UI/UX" },
+  { value: "opensource", label: "Open Source" },
+  { value: "software-engineering", label: "Software Engineering" },
+  { value: "product-management", label: "Product Management" },
+  { value: "project-management", label: "Project Management" },
+  { value: "testing", label: "Testing" },
+  { value: "agile", label: "Agile" },
+  { value: "scrum", label: "Scrum" },
+  { value: "ecommerce", label: "E-Commerce" },
+  { value: "saas", label: "SaaS" },
+  { value: "automation", label: "Automation" },
+  { value: "robotics", label: "Robotics" }
+
 ];
 
 export default function TagInput({ selectedTags, onTagsChange }) {

client/src/components/Navbar/Navbar.tsx

@@ -59,7 +59,8 @@ export function Navbar() {
         <div className="flex h-16 items-center justify-between">
           <div className="flex items-center gap-8">
             <Link to="/" className="flex items-center gap-2">
-              <span className="text-[25px]">dh</span><span>|</span><span className="text-[25px]">DevHub</span>
+                <span className="text-[25px] md:hidden">dh</span>
+                <span className="text-[25px] hidden md:inline">DevHub</span>
             </Link>
             <div className="hidden md:flex items-center gap-6">
               <Link to="/docs" className="text-sm text-white-800 dark:text-gray-400 hover:text-white">

client/src/components/Posts/ShowPosts.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { ChevronUp, ChevronDown, MessageCircle, Send } from "lucide-react";
+import { ChevronUp, ChevronDown, MessageCircle, Send, Share } from "lucide-react";
 import {
     AlertDialog,
     AlertDialogCancel,
@@ -11,7 +11,7 @@ import {
     AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Cross1Icon } from "@radix-ui/react-icons";
-import {toast} from 'sonner';
+import { toast } from 'sonner';
 import { PostContext } from '../Sidebar/Sidebar';
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
@@ -66,14 +66,14 @@ export default function ShowPosts() {
             );
 
             if (response.status === 200) {
-                setPosts(prevPosts => 
-                    prevPosts.map(post => 
-                        post._id === postId 
+                setPosts(prevPosts =>
+                    prevPosts.map(post =>
+                        post._id === postId
                             ? {
                                 ...post,
                                 upvotes: voteType === 'upvote' ? post.upvotes + 1 : post.upvotes,
                                 downvotes: voteType === 'downvote' ? post.downvotes + 1 : post.downvotes
-                              }
+                            }
                             : post
                     )
                 );
@@ -120,6 +120,19 @@ export default function ShowPosts() {
             });
     };
 
+    const handleCopyUrl = (postId: string) => {
+        const url = `https://devhub.page/post/${postId}`;
+        navigator.clipboard
+            .writeText(url)
+            .then(() => {
+                toast.success('URL copied to clipboard');
+            })
+            .catch(err => {
+                console.error('Failed to copy URL:', err);
+                toast.error('Failed to copy URL');
+            });
+    };
+
     useEffect(() => {
     }, [posts, selectedPost]); // This will re-run whenever `posts` or `selectedPost` changes
 
@@ -128,7 +141,7 @@ export default function ShowPosts() {
             <div className="max-w-2xl mx-auto space-y-0 md:space-y-8">
                 {posts.map((post) => (
                     <div key={post._id} className="bg-background shadow-lg md:rounded-lg overflow-hidden border">
-                        <div className="flex items-center border-b p-4">
+                        <div className="flex items-center p-4">
                             <div className='h-8 w-8 rounded-full overflow-hidden'>
                                 <img src={`https://api.dicebear.com/6.x/initials/svg?seed=${post.author_username}`} />
                             </div>
@@ -138,12 +151,18 @@ export default function ShowPosts() {
                                     Posted {new Date(post.created_at).toLocaleDateString()}
                                 </p>
                             </div>
+                            <div className='flex-grow'></div>
+                            <div>
+                                <Button variant="outline" className="w-10 h-10" onClick={() => handleCopyUrl(post._id)}>
+                                    <Share className="w-2 h-2" />
+                                </Button>
+                            </div>
                         </div>
                         {post.image_link && (
                             <img
                                 src={post.image_link}
                                 alt="Post image"
-                                className="w-full h-96 object-cover mb-1 border-b"
+                                className="w-full h-96 object-cover p-2"
                             />
                         )}
                         <div className="flex items-center gap-4 ml-1">
@@ -243,6 +262,6 @@ export default function ShowPosts() {
                 ))}
             </div>
         </PostContext.Provider>
-        
+
     );
 }

client/src/components/Products/Products.tsx

@@ -1,36 +1,59 @@
+import { BookCheck, PencilRuler, Terminal, Bot, SquarePlus, ChartArea } from 'lucide-react';
+
 const Products = () => {
-    const features = [
+    const DevBots = [
+        {
+            name: 'Customized Chatbots.',
+            description:
+                'Easily create customized chatbot with just filling forms.',
+            icon: Bot,
+        },
+        {
+            name: 'Easy Integration.',
+            description: 'Get Free API keys and integrate with your website in minutes.',
+            icon: SquarePlus,
+        },
         {
-            name: 'Push to deploy.',
+            name: 'Analytics Dashboard.',
+            description: 'Get detailed analytics of your chatbot queries, timestamps, IPs and much more.',
+            icon: ChartArea,
+        },
+    ]
+    const UniversalBox = [
+        {
+            name: 'Prebuilt Templates.',
             description:
-                'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
-            // icon: CloudArrowUpIcon,
+                'Explore our extensive library of 50+ project templates designed for various applications.',
+            icon: BookCheck,
         },
         {
-            name: 'SSL certificates.',
-            description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',
-            // icon: LockClosedIcon,
+            name: 'One click setup.',
+            description: 'npm package helps users to install the package and Scaffolding in one click.',
+            icon: PencilRuler,
         },
         {
-            name: 'Database backups.',
-            description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
-            // icon: ServerIcon,
+            name: 'More optional commands.',
+            description: 'Explore more optional commands to clone, customize and deploy your projects.',
+            icon: Terminal,
         },
     ]
   return (
       <div className="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
           <div className="max-w-7xl w-full space-y-20">
               <div className="flex flex-col lg:flex-row items-center justify-center gap-12">
                   <div className="lg:w-1/2 space-y-8">
-                      <h2 className="text-4xl font-semibold tracking-tight text-primary sm:text-5xl text-center lg:text-left">
+                      <h2 className="text-4xl font-semibold tracking-tight text-primary sm:text-5xl">
                           DevBots
                       </h2>
                       <dl className="space-y-8">
-                          {features.map((feature) => (
+                          {DevBots.map((feature) => (
                               <div key={feature.name} className="relative">
-                                  <dt className="font-semibold text-primary underline">
-                                      {feature.name}
-                                  </dt>
+                                  <div className='flex-row flex items-center gap-2'>
+                                      {feature.icon && <feature.icon className="h-5 w-5 text-primary" />}
+                                      <dt className="font-semibold text-primary underline">
+                                          {feature.name}
+                                      </dt>
+                                  </div>
                                   <dd className="mt-2">{feature.description}</dd>
                               </div>
                           ))}
@@ -51,22 +74,25 @@ const Products = () => {
                   <div className="lg:w-1/2 items-center justify-center flex flex-col">
                       <img
                           alt="Product screenshot"
-                          src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png"
+                          src="https://i.ibb.co/wRjgvtJ/Screenshot-2024-12-12-104932.png"
                           width={2432}
                           height={1442}
                           className="w-full max-w-lg rounded-xl shadow-xl ring-1 ring-gray-400/10"
                       />
                   </div>
                   <div className="lg:w-1/2 space-y-8">
-                      <h2 className="text-4xl font-semibold tracking-tight text-primary sm:text-5xl text-center lg:text-left">
-                          DevMap
+                      <h2 className="text-4xl font-semibold tracking-tight text-primary sm:text-5xl">
+                          Universal-Box
                       </h2>
                       <dl className="space-y-8">
-                          {features.map((feature) => (
+                          {UniversalBox.map((feature) => (
                               <div key={feature.name} className="relative">
-                                  <dt className="font-semibold text-primary underline">
-                                      {feature.name}
-                                  </dt>
+                                <div className='flex-row flex items-center gap-2'>
+                                      {feature.icon && <feature.icon className="h-5 w-5 text-primary" />}
+                                      <dt className="font-semibold text-primary underline">
+                                          {feature.name}
+                                      </dt>
+                                </div>
                                   <dd className="mt-2">{feature.description}</dd>
                               </div>
                           ))}

client/src/components/Sidebar/Sidebar.tsx

@@ -108,6 +108,12 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
         }
     };
 
+    const handleSettingsClick = () => {
+        if (!username) {
+            toast.error('Please login to access settings');
+        }
+    };
+
 
     return (
         <Sidebar className="border-r-0" {...props}>
@@ -276,30 +282,31 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
                                 </AlertDialogContent>
                             </AlertDialog>
                             <AlertDialog>
-                                <AlertDialogTrigger>
-                                    <SidebarMenuItem >
-                                        <SidebarMenuButton asChild>
+                                <AlertDialogTrigger asChild>
+                                    <SidebarMenuItem>
+                                        <SidebarMenuButton asChild onClick={handleSettingsClick}>
                                             <div>
                                                 <Settings />
                                                 <span>Settings</span>
                                             </div>
                                         </SidebarMenuButton>
                                     </SidebarMenuItem>
                                 </AlertDialogTrigger>
-                                <AlertDialogContent>
-                                    <div className="flex">
-                                        <AlertDialogHeader className="text-2xl mt-1.5">
-                                            Settings
-                                        </AlertDialogHeader>
-                                        <div className="flex-grow"></div>
-                                        <AlertDialogCancel>
-                                            <Cross1Icon className="h-3 w-3" />
-                                        </AlertDialogCancel>
-                                    </div>
-                                    <Setting />
 
-                                </AlertDialogContent>
+                                {username && (
+                                    <AlertDialogContent>
+                                        <div className="flex">
+                                            <AlertDialogHeader className="text-2xl mt-1.5">Settings</AlertDialogHeader>
+                                            <div className="flex-grow"></div>
+                                            <AlertDialogCancel>
+                                                <Cross1Icon className="h-3 w-3" />
+                                            </AlertDialogCancel>
+                                        </div>
+                                        <Setting />
+                                    </AlertDialogContent>
+                                )}
                             </AlertDialog>
+
                             <SidebarMenuItem >
                                 <SidebarMenuButton asChild>
                                     <a href={username ? `/user/${username}` : "/login"}>

client/src/pages/ErrorPage.tsx

@@ -18,11 +18,6 @@ const ErrorPage = () => {
                             Go back home
                         </Link>
                     </Button>
-                    <Button variant="link" asChild>
-                        <Link to="/support" className="text-sm font-semibold">
-                            Contact support <span aria-hidden="true">→</span>
-                        </Link>
-                    </Button>
                 </div>
             </div>
         </main>

client/src/pages/Home.tsx

@@ -9,14 +9,13 @@ import { SidebarLeft } from '@/components/Sidebar/Sidebar'
 
 const Home = () => {
   const navigate = useNavigate();
+  const username = localStorage.getItem('devhub_username');
 
   useEffect(() => {
-    const username = localStorage.getItem('devhub_username');
-
     if (!username) {
       navigate('/login');
     }
-  }, [navigate]);
+  }, [navigate, username]);
 
   return (
     <SidebarProvider>