feat: implement admin panel and add backend verification

Frontend/app/admin/page.tsx

@@ -0,0 +1,179 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { api } from '@/lib/api'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { toast } from 'sonner'
+import { Header } from '@/components/header'
+import { Footer } from '@/components/footer'
+
+export default function AdminPage() {
+    const [isLoggedIn, setIsLoggedIn] = useState(false)
+    const [adminKey, setAdminKey] = useState('')
+    const [projects, setProjects] = useState([])
+    const [blogs, setBlogs] = useState([])
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        const savedKey = localStorage.getItem('admin_key')
+        if (savedKey) {
+            setIsLoggedIn(true)
+            fetchData()
+        }
+    }, [])
+
+    const fetchData = async () => {
+        setLoading(true)
+        try {
+            const [projectsData, blogsData] = await Promise.all([
+                api.projects.list(),
+                api.blogs.list()
+            ])
+            setProjects(projectsData)
+            setBlogs(blogsData)
+        } catch (error) {
+            console.error('Failed to fetch data:', error)
+            toast.error('Failed to load data. Please check your admin key.')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const handleLogin = (e: React.FormEvent) => {
+        e.preventDefault()
+        localStorage.setItem('admin_key', adminKey)
+        setIsLoggedIn(true)
+        fetchData()
+        toast.success('Logged in successfully')
+    }
+
+    const handleLogout = () => {
+        localStorage.removeItem('admin_key')
+        setIsLoggedIn(false)
+        setProjects([])
+        setBlogs([])
+    }
+
+    if (!isLoggedIn) {
+        return (
+            <>
+                <Header />
+                <main className="min-h-screen flex items-center justify-center bg-muted/30 pt-20">
+                    <Card className="w-full max-w-md mx-4">
+                        <CardHeader>
+                            <CardTitle className="text-2xl text-center">Admin Login</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <form onSubmit={handleLogin} className="space-y-4">
+                                <div className="space-y-2">
+                                    <label htmlFor="adminKey" className="text-sm font-medium">Admin API Key</label>
+                                    <Input
+                                        id="adminKey"
+                                        type="password"
+                                        placeholder="Enter your admin key"
+                                        value={adminKey}
+                                        onChange={(e) => setAdminKey(e.target.value)}
+                                        required
+                                    />
+                                </div>
+                                <Button type="submit" className="w-full">Login</Button>
+                            </form>
+                        </CardContent>
+                    </Card>
+                </main>
+                <Footer />
+            </>
+        )
+    }
+
+    return (
+        <>
+            <Header />
+            <main className="min-h-screen bg-background pt-24 pb-12 px-4 md:px-6">
+                <div className="container mx-auto max-w-6xl">
+                    <div className="flex justify-between items-center mb-8">
+                        <h1 className="text-3xl font-bold">Admin Dashboard</h1>
+                        <Button variant="outline" onClick={handleLogout}>Logout</Button>
+                    </div>
+
+                    <Tabs defaultValue="projects" className="w-full">
+                        <TabsList className="grid w-full grid-cols-2 mb-8">
+                            <TabsTrigger value="projects">Projects</TabsTrigger>
+                            <TabsTrigger value="blogs">Blogs</TabsTrigger>
+                        </TabsList>
+
+                        <TabsContent value="projects">
+                            <Card>
+                                <CardHeader className="flex flex-row items-center justify-between">
+                                    <CardTitle>Manage Projects</CardTitle>
+                                    <Button size="sm">Add Project</Button>
+                                </CardHeader>
+                                <CardContent>
+                                    {loading ? (
+                                        <p className="text-center py-4">Loading projects...</p>
+                                    ) : (
+                                        <div className="space-y-4">
+                                            {projects.length === 0 ? (
+                                                <p className="text-center text-muted-foreground py-4">No projects found.</p>
+                                            ) : (
+                                                projects.map((project: any) => (
+                                                    <div key={project.id} className="flex items-center justify-between p-4 border rounded-lg">
+                                                        <div>
+                                                            <h3 className="font-semibold">{project.title}</h3>
+                                                            <p className="text-sm text-muted-foreground">{project.description.substring(0, 100)}...</p>
+                                                        </div>
+                                                        <div className="flex gap-2">
+                                                            <Button variant="ghost" size="sm">Edit</Button>
+                                                            <Button variant="ghost" size="sm" className="text-destructive">Delete</Button>
+                                                        </div>
+                                                    </div>
+                                                ))
+                                            )}
+                                        </div>
+                                    )}
+                                </CardContent>
+                            </Card>
+                        </TabsContent>
+
+                        <TabsContent value="blogs">
+                            <Card>
+                                <CardHeader className="flex flex-row items-center justify-between">
+                                    <CardTitle>Manage Blogs</CardTitle>
+                                    <Button size="sm">Add Blog</Button>
+                                </CardHeader>
+                                <CardContent>
+                                    {loading ? (
+                                        <p className="text-center py-4">Loading blogs...</p>
+                                    ) : (
+                                        <div className="space-y-4">
+                                            {blogs.length === 0 ? (
+                                                <p className="text-center text-muted-foreground py-4">No blogs found.</p>
+                                            ) : (
+                                                blogs.map((blog: any) => (
+                                                    <div key={blog.id} className="flex items-center justify-between p-4 border rounded-lg">
+                                                        <div>
+                                                            <h3 className="font-semibold">{blog.title}</h3>
+                                                            <p className="text-sm text-muted-foreground">By {blog.author}</p>
+                                                        </div>
+                                                        <div className="flex gap-2">
+                                                            <Button variant="ghost" size="sm">Edit</Button>
+                                                            <Button variant="ghost" size="sm" className="text-destructive">Delete</Button>
+                                                        </div>
+                                                    </div>
+                                                ))
+                                            )}
+                                        </div>
+                                    )}
+                                </CardContent>
+                            </Card>
+                        </TabsContent>
+                    </Tabs>
+                </div>
+            </main>
+            <Footer />
+        </>
+    )
+}

Frontend/components/featured-projects.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { ArrowRight } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { ArrowRight, Loader2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { api } from '@/lib/api'
 
-const projects = [
+const staticProjects = [
   {
     title: 'AgriTech Nepal',
     description: 'Smart agricultural solutions connecting farmers with modern technology to improve crop yield and reduce costs',
@@ -28,6 +30,28 @@ const projects = [
 ]
 
 export function FeaturedProjects() {
+  const [projects, setProjects] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadProjects = async () => {
+      try {
+        const data = await api.projects.list()
+        if (data && data.length > 0) {
+          setProjects(data)
+        } else {
+          setProjects(staticProjects)
+        }
+      } catch (error) {
+        console.error('Failed to fetch projects:', error)
+        setProjects(staticProjects)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadProjects()
+  }, [])
+
   return (
     <section id="featured-projects" className="py-12 sm:py-16 md:py-20 px-4 md:px-6 bg-muted/30 scroll-mt-20" aria-labelledby="projects-heading">
       <div className="container mx-auto">
@@ -40,58 +64,64 @@ export function FeaturedProjects() {
           </p>
         </div>
 
-        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8 max-w-6xl mx-auto">
-          {projects.map((project, index) => (
-            <article
-              key={index}
-              className="bg-card rounded-xl sm:rounded-2xl overflow-hidden border border-border hover:border-primary transition-all duration-300 hover:shadow-xl group"
-            >
-              {/* Project Image */}
-              <div
-                className="h-36 sm:h-40 md:h-48 bg-cover bg-center group-hover:scale-110 transition-transform duration-300"
-                style={{ background: project.image }}
-                role="img"
-                aria-label={`${project.title} project visual`}
-              />
+        {loading ? (
+          <div className="flex justify-center py-20">
+            <Loader2 className="w-8 h-8 animate-spin text-primary" />
+          </div>
+        ) : (
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8 max-w-6xl mx-auto">
+            {projects.map((project, index) => (
+              <article
+                key={index}
+                className="bg-card rounded-xl sm:rounded-2xl overflow-hidden border border-border hover:border-primary transition-all duration-300 hover:shadow-xl group"
+              >
+                {/* Project Image */}
+                <div
+                  className="h-36 sm:h-40 md:h-48 bg-cover bg-center group-hover:scale-110 transition-transform duration-300"
+                  style={{ background: project.image || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}
+                  role="img"
+                  aria-label={`${project.title} project visual`}
+                />
 
-              {/* Project Content */}
-              <div className="p-4 sm:p-5 md:p-6">
-                <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-foreground mb-1.5 sm:mb-2">
-                  {project.title}
-                </h3>
-                <p className="text-sm sm:text-base text-muted-foreground mb-3 sm:mb-4 leading-relaxed line-clamp-3">
-                  {project.description}
-                </p>
+                {/* Project Content */}
+                <div className="p-4 sm:p-5 md:p-6">
+                  <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-foreground mb-1.5 sm:mb-2">
+                    {project.title}
+                  </h3>
+                  <p className="text-sm sm:text-base text-muted-foreground mb-3 sm:mb-4 leading-relaxed line-clamp-3">
+                    {project.description}
+                  </p>
 
-                {/* Tags */}
-                <div className="flex flex-wrap gap-1.5 sm:gap-2 mb-3 sm:mb-4">
-                  {project.tags.map((tag) => (
-                    <span
-                      key={tag}
-                      className="text-[10px] sm:text-xs font-medium bg-primary/10 text-primary px-2 sm:px-3 py-0.5 sm:py-1 rounded-full"
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                </div>
+                  {/* Tags */}
+                  <div className="flex flex-wrap gap-1.5 sm:gap-2 mb-3 sm:mb-4">
+                    {(project.tags || []).map((tag: string) => (
+                      <span
+                        key={tag}
+                        className="text-[10px] sm:text-xs font-medium bg-primary/10 text-primary px-2 sm:px-3 py-0.5 sm:py-1 rounded-full"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
 
-                {/* Contributors and View Button */}
-                <div className="flex items-center justify-between">
-                  <div className="text-xs sm:text-sm text-muted-foreground">
-                    <span className="font-semibold text-foreground">{project.contributors}</span> contributors
+                  {/* Contributors and View Button */}
+                  <div className="flex items-center justify-between">
+                    <div className="text-xs sm:text-sm text-muted-foreground">
+                      <span className="font-semibold text-foreground">{project.contributors || 0}</span> contributors
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-primary hover:text-primary/80 text-xs sm:text-sm px-2 sm:px-3"
+                    >
+                      View <ArrowRight className="w-3 h-3 sm:w-4 sm:h-4 ml-1 sm:ml-2" aria-hidden="true" />
+                    </Button>
                   </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-primary hover:text-primary/80 text-xs sm:text-sm px-2 sm:px-3"
-                  >
-                    View <ArrowRight className="w-3 h-3 sm:w-4 sm:h-4 ml-1 sm:ml-2" aria-hidden="true" />
-                  </Button>
                 </div>
-              </div>
-            </article>
-          ))}
-        </div>
+              </article>
+            ))}
+          </div>
+        )}
 
         {/* See All Projects Button */}
         <div className="text-center mt-8 sm:mt-10 md:mt-12">

Frontend/components/footer.tsx

@@ -5,14 +5,14 @@ import { Github, Linkedin, ExternalLink } from 'lucide-react'
 // Instagram SVG Icon component
 const Instagram = ({ className }: { className?: string }) => (
   <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
+    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
   </svg>
 )
 
 // Discord SVG Icon component
 const Discord = ({ className }: { className?: string }) => (
   <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/>
+    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z" />
   </svg>
 )
 
@@ -33,9 +33,9 @@ export function Footer() {
       title: 'Resources',
       links: [
         { label: 'Documentation', href: '#' },
-        { label: 'Blog', href: '#' },
-        { label: 'Research Papers', href: '#' },
-        { label: 'Tutorials', href: '#' },
+        { label: 'Blog', href: '/blogs' },
+        { label: 'Research Papers', href: '/research' },
+        { label: 'Admin Panel', href: '/admin' },
       ],
     },
     {

Frontend/lib/api.ts

@@ -0,0 +1,39 @@
+const API_BASE_URL = 'https://ios-ioe-website-backend.hf.space/api';
+
+export async function fetchWithAuth(endpoint: string, options: RequestInit = {}) {
+  const adminKey = typeof window !== 'undefined' ? localStorage.getItem('admin_key') : null;
+  
+  const headers = {
+    'Content-Type': 'application/json',
+    ...(adminKey ? { 'X-Admin-Key': adminKey } : {}),
+    ...options.headers,
+  };
+
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    ...options,
+    headers,
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ detail: 'An error occurred' }));
+    throw new Error(error.detail || 'Request failed');
+  }
+
+  return response.json();
+}
+
+export const api = {
+  projects: {
+    list: () => fetchWithAuth('/v1/projects/'),
+    create: (data: any) => fetchWithAuth('/v1/projects/', { method: 'POST', body: JSON.stringify(data) }),
+    update: (id: string, data: any) => fetchWithAuth(`/v1/projects/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+    delete: (id: string) => fetchWithAuth(`/v1/projects/${id}`, { method: 'DELETE' }),
+  },
+  blogs: {
+    list: () => fetchWithAuth('/v1/blogs/'),
+    create: (data: any) => fetchWithAuth('/v1/blogs/', { method: 'POST', body: JSON.stringify(data) }),
+    update: (id: string, data: any) => fetchWithAuth(`/v1/blogs/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+    delete: (id: string) => fetchWithAuth(`/v1/blogs/${id}`, { method: 'DELETE' }),
+  },
+  // Add other endpoints as needed
+};

README.md

@@ -1,2 +1,17 @@
+---
+title: Ignite Open Source Website Backend
+emoji: 🔥
+colorFrom: red
+colorTo: green
+sdk: docker
+pinned: false
+app_port: 7860
+---
+
 # Website
-This is the repository for the website of the ignite open source community
+This is the repository for the website of the ignite open source community.
+
+## Deployment
+This backend is configured for deployment on Hugging Face Spaces using Docker.
+- **Port:** 7860
+- **SDK:** Docker

app/api/v1/test_db.py

@@ -3,7 +3,14 @@ from app.db.supabase import supabase
 
 router = APIRouter()
 
+from app.dependencies.admin_auth import admin_auth
+from fastapi import Depends
+
 @router.get("/db-test")
 def db_test():
     data = supabase.table("projects").select("*").limit(1).execute()
     return {"data": data.data}
+
+@router.get("/verify-key", dependencies=[Depends(admin_auth)])
+def verify_key():
+    return {"status": "valid"}