incorporate directus as CMS

Author: SamGu-NRX

.gitignore

@@ -25,7 +25,6 @@ build/
 .env.development.local
 .env.test.local
 .env.production.local
-.env
 /.vscode
 /vscode
 .vscode

backend/.env

@@ -0,0 +1,14 @@
+DISCORD_CLIENT_ID=your-discord-client-id
+DISCORD_CLIENT_SECRET=your-discord-client-secret
+DISCORD_REDIRECT_URI=https://samgu-nrx.github.io/LuminAI/auth/discord/callback
+
+PROJECT_ID=luminai-bootcamps
+PRIVATE_KEY_ID=01099d54ab1e7786f7a6892966bb27e25543712f
+PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCfUQogwQNdwbA/\n3TYuRZkZmjd84r00VltF2RPUjZqoYHESbtxjkiQkH6wHDs9YnKHNZyrJ89Kr0+DI\n6r1V0w5+VcnQAgMLn5slNDpwe3NhWnvzFya5EJVZmOBF5K6TJGzHtPnXPm1k59zN\n9WQggJOqYORORus5PkwK7VqBHliI1KyjEWCKBYjYo6If3bRT6ZDiu2gMK4v3YCmJ\nBOyIBblcCFVAy6WxDMqV8AqmJnPpKZ5SXBW2PhvxM1NN5FiqhWoe3h6JdZPlTbvD\nge/gXS5//XiAQqSZQbW8DyEs1wEPCu2ufjm3gdfDtSKA5eTKU48n4ABEMM4Vu6rb\nd47+zYuxAgMBAAECggEASRnPMt49ZCy2aWdgL/UhXb0ETtpfBH/HW5JSZgofd7jg\nyRtzJoDs8mJR9d8Wxsr/9xaqbIXjGZKbprUG8TVphhBpDHeP3Cp87qI7WldaxsXU\n7+KkkvAIB1d9OLTIYZ2qCCyDIv9zBITbLOm26q70ko3o0/34eoiaLb1g9LPu3cE2\niGK/1jmbddMVBrZJMO5WeZpVHYYGvz4SfaAPdmY6X1YPMyuE4dxbgHfz12scLlNL\nKP9ofJbq7llK0UXQRCnS8l6XBSqTB4QN/UyR3KChxWFGh3uvsJQvDHVMMz81LZRp\nRqO1Ln4BzchhrC+MMVsjnssV5206eSQ3B/NmduvfbQKBgQDSBW45PGtb7LTL70vi\nL+0vau0ZUCi3Z69nAgvheuln/eBQiGl4XjFAWOigFR96LngJGXwcekEsvZbcbQgq\nUoc9YD49GKmpn/163w84EO9wPzcPf2WSclVx6YZQF9+8NJkRxpQrXvoj42Tpy5RB\nAar5++RKb27dgce1/ReUB2OxswKBgQDCMeIu6gUNfLzU3QkbwsCUplcxhuM381A0\noc07yzZyXl2P0uEBi65ZUrd5jhlgO5rU3243XRNJG2oxTcW8VdjGghUsBtYcvHRu\nIw7OTxaU8D1qsOfoHsSy5aBmsk2Y+VErayuz5mjDYWoL8O0lnFg1vVTUMXk6wAuf\nKA+26MjzCwKBgHOK50v30HyfKgw0F0RV56A5rD1L20qjcV0zRAQFkdlTU5AarCO7\ndk8XWsuPM2UNoZ4n9h7Yp3iMyS11kpNuGdcLVtJX+idGzLZHd2D5+DCBprIQ/Xln\nC1kDB5CSwdUR/tBHtoZx1x3dYUw6YtKsrzqeeMb2rUCRwKR/m/QlaJR/AoGASESS\nHM1gJf3GtByx2A/o5SjmB/tfsaGttniETP05/OPbQ7vBmnal4n3i46ybCvIDk7a2\naIoNtEYshb6gmI8GBhHA2UqOAdGsLpSDXQmXqMOix4KgOwTARKcpwy4VrJkTuOnA\nMMnNMPCeq2T0i+ub9BvKZtEmgVOYv5kECBinN7MCgYAtUjDAHVRZcNJSbBmmuhqn\nsVSCHPaXCgFKXMp1RJXhwZ/WhjBrI6oWz1/3ns3xJHN4GgiuG0h5H1bLgp7DFo3t\n77MFaK8lh9HTxitd7Gs8SbLIMtR+mfz4zduA2S0LMLlYJl0+Ya1dXKtO+TZBfqPT\nw6bpzqWBUiDU7480zG1o5w==\n-----END PRIVATE KEY-----\n"
+CLIENT_EMAIL=firebase-adminsdk-ooddl@luminai-bootcamps.iam.gserviceaccount.com
+CLIENT_ID=116588898614403594826
+AUTH_URI=https://accounts.google.com/o/oauth2/auth
+TOKEN_URI=https://oauth2.googleapis.com/token
+AUTH_PROVIDER_X509_CERT_URL=https://www.googleapis.com/oauth2/v1/certs
+CLIENT_X509_CERT_URL=https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-ooddl%40luminai-bootcamps.iam.gserviceaccount.com
+UNIVERSE_DOMAIN=googleapis.com

frontend/.env

@@ -0,0 +1,2 @@
+VITE_API_URL='https://manage.redevs.com'
+VITE_DISCORD_REDIRECT_URI=https://samgu-nrx.github.io/LuminAI/auth/discord/callback

frontend/src/context/AuthContext.jsx

@@ -29,12 +29,12 @@ export const AuthContextProvider = ({ children }) => {
         };
     }, []);
 
-    // const logOut = () => {
-    //     signOut(); 
-    // }
+    const logOut = () => {
+        signOut(auth); 
+    }
 
     return (
-        <AuthContext.Provider value={{ googleSignIn }}>
+        <AuthContext.Provider value={{ googleSignIn, logOut, user}}>
             {children}
         </AuthContext.Provider>
     );

frontend/src/routes/Dashboard.jsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { createFileRoute } from '@tanstack/react-router';
 import { Helmet } from 'react-helmet-async';
+import { getItems } from '../services/directus';
 
 import AOS from 'aos';
 import 'aos/dist/aos.css';
@@ -17,39 +18,52 @@ export const Route = createFileRoute('/Staff')({
 function Staff() {
   const colorMode = getMode();
 
+  // TODO: Change to items & setItems to "teamMembers" to use as CMS database
+  const [items, setItems] = useState([]);
+
+  useEffect(() => {
+    const fetchStaffMembers = async () => {
+      const data = await getItems('luminai_team_members');
+      setItems(data.data);
+    };
+
+    fetchStaffMembers();
+  }, []);
+
   const teamMembers = [
     { 
       name: 'John Doe', 
       role: 'President', 
-      fact: 'Developed a state-of-the-art NLP model.', 
+      achievement: 'Developed a state-of-the-art NLP model.', 
       description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' 
     },
     { 
       name: 'Jane Smith', 
       role: 'Director of Coursework', 
-      fact: 'Specialized in machine learning algorithms.', 
+      achievement: 'Specialized in machine learning algorithms.', 
       description: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.' 
     },
     { 
       name: 'Emily Chen', 
       role: 'Director of Logistics', 
-      fact: 'Organized a statewide coding competition that attracted over 500 participants.', 
+      achievement: 'Organized a statewide coding competition that attracted over 500 participants.', 
       description: 'Emily is known for her exceptional organizational skills and ability to handle complex logistics with ease. She ensures everything runs smoothly.' 
     },
     { 
       name: 'Michael Thompson', 
       role: 'Director of Management', 
-      fact: 'Managed a team of 20 volunteers for a community tech education program.', 
+      achievement: 'Managed a team of 20 volunteers for a community tech education program.', 
       description: 'Michael\'s leadership and management skills have been instrumental in the success of several community projects, making a significant impact.' 
     },
     { 
       name: 'Sophia Martinez', 
       role: 'Director of Mentorship', 
-      fact: 'Created a peer mentoring program that improved academic performance and morale among students.', 
+      achievement: 'Created a peer mentoring program that improved academic performance and morale among students.', 
       description: 'Sophia is passionate about helping others succeed. Her mentorship program has been a game-changer for many students, providing guidance and support.' 
     }
   ];  
 
+
   return (
     <div
       data-scroll-section
@@ -72,13 +86,35 @@ function Staff() {
               className="bg-white bg-opacity-80 p-6 rounded-lg text-center relative group"
               data-aos="fade-up"
             >
+
               <div className="w-24 h-24 mx-auto mb-4">
                 <MovingGradient />
               </div>
+            
+              <div className="w-24 h-24 mx-auto mb-4 relative">
+                {member.photo ? (
+                  <div
+                    className="w-24 h-24 rounded-full border-4"
+                    style={{
+                      borderImage: generateRandomGradient(),
+                      borderImageSlice: 1,
+                    }}
+                  >
+                    <img
+                      src={member.photo}
+                      alt={member.name}
+                      className="w-full h-full rounded-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <MovingGradient />
+                )}
+              </div>
+
               <h2 className="text-2xl font-bold ">{member.name}</h2>
               <div className="transform absolute inset-0 duration-300 transition hover:scale-105 rounded-md bg-white bg-opacity-90 p-6 flex flex-col justify-center items-center opacity-0 group-hover:opacity-100 ">
                 <p className="text-lg">{member.role}</p>
-                <p className="text-sm italic">{member.fact}</p>
+                <p className="text-sm italic">{member.achievement}</p>
                 <p className="text-gray-600">{member.description}</p>
               </div>
             </div>

frontend/src/routes/Staff.jsx

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const API_URL = import.meta.env.VITE_API_URL;
+
+const api = axios.create({
+  baseURL: API_URL,
+});
+
+export const getItems = async (collection) => {
+  try {
+    const response = await api.get(`/items/${collection}`);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching items:', error);
+    throw error;
+  }
+};