Merge pull request SLIIT-Y3S2#38 from SLIIT-Y3S2/fix-for-build

Fix for build

README.md

@@ -8,9 +8,95 @@
 
 ### Members
 
-- IT21109126 - Maharanhindage V.A.R
-- IT20611088 - Jayakody D.M.L.D
-- IT21012488 - Shavinda H.K.L
-- IT21001352 - Madhubhashana K.S 
-___
-#### **CODEXGURU** is an interactive programming assistance platform designed to help instructors and novice programmers collaborate and learn effectively.
+- [IT21109126 - Maharanhindage V.A.R](https://github.com/vibhashan)
+- [IT20611088 - Jayakody D.M.L.D](https://github.com/IT20611088)
+- [IT21012488 - Shavinda H.K.L](https://github.com/shavindaL)
+- [IT21001352 - Madhubhashana K.S](https://github.com/Sandaru-IT21001352)
+
+## Overview
+**CODEXGURU** is an interactive programming assistance platform designed to help instructors and novice programmers collaborate and learn effectively.
+
+### Features
+
+* Code Editor  
+An inbuilt code editor that supports more than 40 programming languages with syntax highlighting and auto completion for selected languages (JavaScript, TypeScript).  
+
+* Chat Forum  
+A chat forum (new session per lab) where students can post the doubts and others can reply.  
+
+* Online Examination Environment  
+An online exam environment, where an instructor can schedule an exam (typically MCQ based) with automated marking.
+
+* AI chatbot  
+An AI chatbot powered by OpenAI's API that can answer programming related questions.
+
+* User Management  
+This feature allows the platform admin to add/manage the relevant lab instructors and students.
+
+### Tech Stack
+
+* Next.js
+* Express.js
+* TypeScript
+* Socket.io
+* MongoDB
+* Docker
+* Firebase Storage
+
+### Instructions to run the project
+1. Clone the repository
+    ```
+    https://github.com/SLIIT-Y3S2/CodexGuru
+    ```
+2. Navigate to the project directory
+    ```
+    cd CodexGuru
+    ```
+
+3. Navigate to the frontend directory
+    ```
+    cd codexguru-client
+    ```
+4. Create a .env file in the frontend directory and add the following environment variables
+    ```
+    NEXTAUTH_SECRET= <Your NextAuth Secret>
+    NEXTAUTH_URL= <Your NextAuth URL>
+    BACKEND_URL= <Your Backend URL>
+    NEXT_PUBLIC_FIREBASE_API_KEY= <Your Firebase API Key>
+    NEXT_PUBLIC_FIREBASE_AUTH_DOMAI= <Your Firebase Auth Domain>
+    NEXT_PUBLIC_FIREBASE_PROJECT_ID= <Your Firebase Project ID>
+    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET= <Your Firebase Storage Bucket>
+    NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID= <Your Firebase Messaging Sender ID>
+    NEXT_PUBLIC_FIREBASE_APP_ID= <Your Firebase App ID>
+    ```
+
+5. Install the dependencies
+    ```
+    npm install
+    ```
+6. Run the frontend
+    ```
+    npm run dev
+    ```
+7. Navigate to the backend directory
+    ```
+    cd codexguru-server
+    ```
+8. Create a .env file in the backend directory and add the following environment variables
+    ```
+    MONGO_URI = <Your MongoDB URI>
+    PORT = <Your Port Number>
+    JWT_SECRET = <Your JWT Secret>
+    COMPILER_PATH = <Your Compiler Path>
+    OPENAI_API_KEY= <Your OpenAI API Key>
+    ```    
+9. Install the dependencies
+    ```
+    npm install
+    ```
+10. Run the backend
+    ```
+    npm run dev
+    ```
+11. Open the browser and navigate to the following URL : http://localhost:3000
+

codexguru-client/src/app/admin/layout.jsx

@@ -1,20 +1,19 @@
 "use client";
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import theme1 from "@/theme/themeConfig";
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
 
 import {
   DesktopOutlined,
   FileOutlined,
   DashboardOutlined,
   UserOutlined,
   SettingOutlined,
-  EditOutlined
-} from '@ant-design/icons';
-
-import { Breadcrumb, ConfigProvider, Layout, Menu, theme, Avatar } from 'antd';
-import UserList from '@/components/userManagement/UserList';
+  EditOutlined,
+} from "@ant-design/icons";
 
+import { Breadcrumb, ConfigProvider, Layout, Menu, theme, Avatar } from "antd";
+import UserList from "@/components/userManagement/UserList";
 
 const { Header, Content, Footer, Sider } = Layout;
 function getItem(label, key, icon, children) {
@@ -26,52 +25,50 @@ function getItem(label, key, icon, children) {
   };
 }
 
-
 const items = [
-  getItem('Dashboard', 1, <DashboardOutlined />),
-  getItem('Create Accounts', 2, <EditOutlined />),
-  getItem('Users', 'sub1', <UserOutlined />, [
-    getItem('Students', '3'),
-    getItem('Instructors', '4'),
+  getItem("Dashboard", 1, <DashboardOutlined />),
+  getItem("Create Accounts", 2, <EditOutlined />),
+  getItem("Users", "sub1", <UserOutlined />, [
+    getItem("Students", "3"),
+    getItem("Instructors", "4"),
     // getItem('Admins', '5'),
   ]),
-  getItem('Reports', 'sub2', <FileOutlined />, [getItem('Lab Attendance', '6')]),
+  getItem("Reports", "sub2", <FileOutlined />, [
+    getItem("Lab Attendance", "6"),
+  ]),
   // getItem('Reports', 'sub2', <FileOutlined />, [getItem('Lab Attendance', '6'), getItem('Team 2', '8')]),
-  getItem('Settings', '9', <SettingOutlined />),
+  getItem("Settings", "9", <SettingOutlined />),
 ];
 
-
 export default function DashboardLayout({ children }) {
-
   const [collapsed, setCollapsed] = useState(false);
   const {
     token: { colorBgContainer },
   } = theme.useToken();
   const router = useRouter();
 
-  const [breadcrumb, setBreadcrumb] = useState("Dashboard")
+  const [breadcrumb, setBreadcrumb] = useState("Dashboard");
 
   const handleMenuItemClick = (key) => {
-
     switch (key) {
-      case '1':
-        router.push('/admin/dashboard');
+      case "1":
+        router.push("/admin/dashboard");
         setBreadcrumb("Dashboard");
         break;
-      case '2':
-        router.push('/admin/createAccount');
+      case "2":
+        router.push("/admin/createAccount");
         setBreadcrumb("Create Account");
         break;
-      case '3':
-        router.push('/admin/users/student');
+      case "3":
+        router.push("/admin/users/student");
         setBreadcrumb("Students");
         break;
-      case '4':
-        router.push('/admin/users/instructor');
+      case "4":
+        router.push("/admin/users/instructor");
         setBreadcrumb("Instructors");
         break;
-      case '6':
-        router.push('/admin/reports/labattendance');
+      case "6":
+        router.push("/admin/reports/labattendance");
         setBreadcrumb("Lab Attendance");
         break;
       default:
@@ -81,66 +78,69 @@ export default function DashboardLayout({ children }) {
     console.log(key);
   };
 
-
-
-
-
-  return <section>
-
-    <ConfigProvider theme={theme1}>
-      <Layout
-        style={{
-          minHeight: '100vh',
-        }}
-      >
-        <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
-          <div className="demo-logo-vertical" />
-          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onClick={({ key }) => handleMenuItemClick(key)} />
-        </Sider>
-        <Layout>
-          <Header
-            style={{
-              padding: 0,
-              background: colorBgContainer,
-            }}
-
-          />
-          {/* <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /> */}
-          <Content
-            style={{
-              margin: '0 16px',
-            }}
+  return (
+    <section>
+      <ConfigProvider theme={theme1}>
+        <Layout
+          style={{
+            minHeight: "100vh",
+          }}
+        >
+          <Sider
+            collapsible
+            collapsed={collapsed}
+            onCollapse={(value) => setCollapsed(value)}
           >
-            <Breadcrumb
+            <div className="demo-logo-vertical" />
+            <Menu
+              theme="dark"
+              defaultSelectedKeys={["1"]}
+              mode="inline"
+              items={items}
+              onClick={({ key }) => handleMenuItemClick(key)}
+            />
+          </Sider>
+          <Layout>
+            <Header
               style={{
-                margin: '16px 0',
+                padding: 0,
+                background: colorBgContainer,
+              }}
+            />
+            {/* <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /> */}
+            <Content
+              style={{
+                margin: "0 16px",
               }}
             >
-              <Breadcrumb.Item>Home</Breadcrumb.Item>
-              <Breadcrumb.Item>{breadcrumb}</Breadcrumb.Item>
-            </Breadcrumb>
-            <div
+              <Breadcrumb
+                style={{
+                  margin: "16px 0",
+                }}
+              >
+                <Breadcrumb.Item>Home</Breadcrumb.Item>
+                <Breadcrumb.Item>{breadcrumb}</Breadcrumb.Item>
+              </Breadcrumb>
+              <div
+                style={{
+                  padding: 24,
+                  minHeight: 360,
+                  background: colorBgContainer,
+                }}
+              >
+                {children}
+              </div>
+            </Content>
+            <Footer
               style={{
-                padding: 24,
-                minHeight: 360,
-                background: colorBgContainer,
+                textAlign: "center",
               }}
             >
-              {children}
-            </div>
-          </Content>
-          <Footer
-            style={{
-              textAlign: 'center',
-            }}
-          >
-            Codexguru ©2023 Created by group 73
-          </Footer>
+              Codexguru ©2023 Created by group 73
+            </Footer>
+          </Layout>
         </Layout>
-      </Layout>
-    </ConfigProvider>
-
-
-
-  </section>
-}
+      </ConfigProvider>
+    </section>
+  );
+}