I'll help you set up both projects with all the requested features. Let's start with the EDUVAULT project first, then we'll create GEN-Z-LIBRARY. { "name": "eduvault-genz-library", "version": "1.0.0", "private": true, "dependencies": { "@heroicons/react": "^2.1.1", "firebase": "^10.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.18.0", "tailwindcss": "^3.3.3" }, "scripts": { "start": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "@types/react": "^18.2.41", "@types/react-dom": "^18.2.18", "@vitejs/plugin-react": "^4.0.3", "autoprefixer": "^10.4.16", "postcss": "^8.4.31", "vite": "^4.4.5" } } import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], }) module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], darkMode: 'class', } module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } import { useState, useEffect } from 'react' import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import Navbar from './components/Navbar' import Home from './pages/Home' import Admin from './pages/Admin' import { auth } from './firebaseConfig' import { onAuthStateChanged } from 'firebase/auth' function App() { const [darkMode, setDarkMode] = useState(false) const [user, setUser] = useState(null) useEffect(() => { const savedMode = localStorage.getItem('darkMode') if (savedMode) setDarkMode(savedMode === 'true') onAuthStateChanged(auth, (user) => { setUser(user) }) }, []) const toggleDarkMode = () => { const newMode = !darkMode setDarkMode(newMode) localStorage.setItem('darkMode', newMode) } return (

} /> } />

) } export default App import { initializeApp } from 'firebase/app' import { getAuth } from 'firebase/auth' import { getFirestore } from 'firebase/firestore' import { getStorage } from 'firebase/storage' const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_SENDER_ID", appId: "YOUR_APP_ID" } const app = initializeApp(firebaseConfig) export const auth = getAuth(app) export const db = getFirestore(app) export const storage = getStorage(app) import { Link } from 'react-router-dom' import { MoonIcon, SunIcon } from '@heroicons/react/24/solid' export default function Navbar({ darkMode, toggleDarkMode, user }) { return ( ) } import { useState, useEffect } from 'react' import { collection, getDocs } from 'firebase/firestore' import { db } from '../firebaseConfig' import ResourceCard from '../components/ResourceCard' import SearchBar from '../components/SearchBar' export default function Home() { const [resources, setResources] = useState([]) const [filteredResources, setFilteredResources] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const fetchResources = async () => { try { const querySnapshot = await getDocs(collection(db, 'resources')) const resourcesData = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })) setResources(resourcesData) setFilteredResources(resourcesData) setLoading(false) } catch (error) { console.error('Error fetching resources:', error) setLoading(false) } } fetchResources() }, []) const handleSearch = (searchTerm, platformFilter) => { let filtered = resources if (searchTerm) { filtered = filtered.filter(resource => resource.title.toLowerCase().includes(searchTerm.toLowerCase()) || resource.description.toLowerCase().includes(searchTerm.toLowerCase()) } if (platformFilter) { filtered = filtered.filter(resource => resource.platform === platformFilter) } setFilteredResources(filtered) } if (loading) { return (

) } return (

{filteredResources.map(resource => ( ))}

{filteredResources.length === 0 && (

No resources found matching your criteria.

)}

) } import { ArrowDownTrayIcon } from '@heroicons/react/24/solid' import { getDownloadURL, ref } from 'firebase/storage' import { storage } from '../firebaseConfig' export default function ResourceCard({ resource }) { const handleDownload = async () => { try { const url = await getDownloadURL(ref(storage, resource.filePath)) window.open(url, '_blank') // Here you would also update the download count in Firestore } catch (error) { console.error('Error downloading file:', error) } } return (

{resource.title}

{resource.platform}

{resource.description}

{resource.fileSize} • {resource.fileType}

) } import { useState, useEffect } from 'react' import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import Navbar from './components/Navbar' import Home from './pages/Home' import Admin from './pages/Admin' import { auth } from './firebaseConfig' import { onAuthStateChanged } from 'firebase/auth' function App() { const [darkMode, setDarkMode] = useState(false) const [user, setUser] = useState(null) useEffect(() => { const savedMode = localStorage.getItem('darkMode') if (savedMode) setDarkMode(savedMode === 'true') onAuthStateChanged(auth, (user) => { setUser(user) }) }, []) const toggleDarkMode = () => { const newMode = !darkMode setDarkMode(newMode) localStorage.setItem('darkMode', newMode) } return (

} /> } />

{book.title}

{book.author}

{book.tags.map(tag => ( {tag} ))}

{book.fileSize} • {book.fileType}

) } This is the initial setup for both projects. You'll need to: 1. Create a Firebase project and update the configuration in both firebaseConfig.js files 2. Add your logo.png file to the public folder 3. Complete the Admin components for both projects 4. Set up the authentication system for the admin panels 5. Add more components as needed for both projects Would you like me to continue with any specific part of either project?