Merge branch 'main' into new

Signed-off-by: Ayush Sharma <[email protected]>
Bitbox-Connect · Oct 24, 2024 · 929a88b · 929a88b
2 parents 352dcc6 + e7f2dad
commit 929a88b
Show file tree

Hide file tree

Showing 61 changed files with 275 additions and 216 deletions.
diff --git a/.env.txt b/.env.txt
@@ -0,0 +1,9 @@
+# FOR CLIENT
+VITE_SERVER_PORT = ""
+
+# FOR SERVER
+MONGO_URI = ""
+EMAIL_USER = ""
+EMAIL_PASS = ""
+GOOGLE_CLIENT_ID = ""
+JWT_SECRET = ""
diff --git a/client/.env.sample b/client/.env.sample
@@ -0,0 +1,3 @@
+# FOR CLIENT
+VITE_SERVER_PORT = ""
+
diff --git a/client/.gitignore b/client/.gitignore
@@ -1,3 +1,5 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
 # dependencies
 node_modules
 /.pnp
@@ -11,12 +13,12 @@ node_modules
 
 # misc
 .DS_Store
-env
+.env
 env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
diff --git a/client/index.html b/client/index.html
@@ -9,8 +9,10 @@
       type="image/x-icon"
     />
     <title>Bitbox - Where Projects Find Solutions Together</title>
-    <!--Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server. -->
-    <script defer src="http://localhost:5000/socket.io/socket.io.js"></script>
+
+    <!-- Updated Socket.IO script for production URL -->
+    <script defer src="https://bitbox-uxbo.onrender.com/socket.io/socket.io.js"></script>
+
     <!-- Bootstrap CSS -->
     <link
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
@@ -44,7 +46,6 @@
     crossorigin="anonymous"
   ></script>
 
-
   <div class="gtranslate_wrapper"></div>
 
   <script>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -28,6 +28,7 @@
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
+    "dotenv": "^16.4.5",
     "firebase": "^10.10.0",
     "jotai": "^2.10.0",
     "localforage": "^1.10.0",

diff --git a/client/projectupload.html b/client/projectupload.html
@@ -7,7 +7,7 @@
   <link rel="shortcut icon" href="/assets/favicon-B48yql8W.ico" type="image/x-icon">
   <title>Bitbox - Where Projects Find Solutions Together</title>
   <!--Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server. -->
-  <!-- <script defer src="http://localhost:5000/socket.io/socket.io.js"></script> -->
+  <!-- <script defer src="https://bitbox-uxbo.onrender.com/socket.io/socket.io.js"></script> -->
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"; // Import useState and useEffect
+import { useEffect, useState } from "react"; // Import useState and useEffect
 import "./App.css";
 import "./index.css";
 import {

diff --git a/client/src/UseTheme.jsx b/client/src/UseTheme.jsx
@@ -1,6 +1,6 @@
 
-import React, { createContext, useState, useContext } from 'react';
-import './component/css/Theme.css'
+import { createContext, useState, useContext } from 'react';
+import './css/Theme.css'
 const ThemeContext = createContext();
 
 export const ThemeProvider = ({ children }) => {

diff --git a/client/src/component/About.jsx b/client/src/component/About.jsx
@@ -1,4 +1,4 @@
-import "./css/About.css";
+import "../css/About.css";
 import PropTypes from 'prop-types';
 // import { useEffect } from "react";
 import img1 from "../assets/images/Anuj.png";

diff --git a/client/src/component/Community.jsx b/client/src/component/Community.jsx
@@ -5,7 +5,7 @@ import CommunityCard from "./CommunityCard";
 import axios from "axios";
 import PropTypes from "prop-types";
 import Skeleton from "@mui/material/Skeleton"; // Import Material UI Skeleton
-import "./css/Community.css";
+import "../css/Community.css";
 import avatar from "../assets/images/Dropdown/avatar.png";
 import ViewAllModalImg from "../assets/images/Modal Image/ViewAll.png";
 import githubModalImg from "../assets/images/Modal Image/GitHub.png";
@@ -20,7 +20,7 @@ import commentModalImg from "../assets/images/Modal Image/comment.png";
 import ShareModalImg from "../assets/images/Modal Image/Share.png";
 
 const Community = (props) => {
-  const host = "http://localhost:5000";
+  const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || 'https://bitbox-uxbo.onrender.com';
   const [loading, setLoading] = useState(true); // State to track loading
   const [project, setProject] = useState({
     id: "",
@@ -59,7 +59,7 @@ const Community = (props) => {
   // Avatar Profile Image
   useEffect(() => {
     axios
-      .get(`${host}/getAvatarImage`)
+      .get(`${VITE_SERVER_PORT}/getAvatarImage`)
       .then((res) => setImage(res.data[res.data.length - 1].image)) // Fetch the last uploaded image
       .catch((err) => console.log(err));
   });

diff --git a/client/src/component/CommunityCard.jsx b/client/src/component/CommunityCard.jsx
@@ -1,4 +1,4 @@
-import './css/ProjectCard.css'
+import '../css/ProjectCard.css'
 // import { useState } from 'react';
 import PropTypes from 'prop-types';
 import avatarImg from '../assets/images/logo.png'

diff --git a/client/src/component/Contributers.jsx b/client/src/component/Contributers.jsx
@@ -1,4 +1,4 @@
-import './css/Contributers.css'
+import '../css/Contributers.css'
 
 export default function Contributers() {
 

diff --git a/client/src/component/Discussion.jsx b/client/src/component/Discussion.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import "./css/Discussion.css";
+import "../css/Discussion.css";
 import { io } from "socket.io-client";
 // AUDIO
 import recieveMsg from "../assets/music/recieveMsg.mp3";
@@ -9,7 +9,7 @@ import userLeft from "../assets/music/userLeft.mp3";
 import InputModal from "./InputModal";
 
 // Create a Socket
-const socket = io("http://localhost:5000", { transports: ["websocket"] });
+const socket = io("https://bitbox-uxbo.onrender.com", { transports: ["websocket"] });
 
 const Discussion = (props) => {
   const [messages, setMessages] = useState([]); // State to store chat messages

diff --git a/client/src/component/EditProfile.jsx b/client/src/component/EditProfile.jsx
@@ -5,10 +5,10 @@ import axios from 'axios'
 import profileContext from '../context/profileContext';
 import userDummyImg from '../assets/images/User/User.png'
 // CSS
-import './css/EditProfile.css'
+import '../css/EditProfile.css';
 
 const EditProfile = (props) => {
-    const host = 'http://localhost:5000'
+    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || 'https://bitbox-uxbo.onrender.com';
     const userProfileContext = useContext(profileContext);
     const { updateUserProfile } = userProfileContext;
 
@@ -32,11 +32,11 @@ const EditProfile = (props) => {
             const reader = new FileReader();
             reader.onloadend = () => {
                 const imageData = reader.result;
-                axios.post(`${host}/uploadAvatarImage`, { image: imageData })
+                axios.post(`${VITE_SERVER_PORT}/uploadAvatarImage`, { image: imageData })
                     .then(res => {
                         console.log(res)
                         // After successful upload, fetch the updated image
-                        axios.get(`${host}/getAvatarImage`)
+                        axios.get(`${VITE_SERVER_PORT}/getAvatarImage`)
                             .then(res => setImage(res.data[res.data.length - 1].image)) // Fetch the last uploaded image
                             .catch(err => console.log(err))
                     })

diff --git a/client/src/component/Footer.jsx b/client/src/component/Footer.jsx
@@ -1,77 +1,91 @@
-import React from 'react'
-import '../component/css/footer.css'
+import '../css/Footer.css';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { FaXTwitter } from "react-icons/fa6";
 import { FaGithub, FaLinkedin, FaYoutube } from 'react-icons/fa';
+
 const Footer = (props) => {
     return (
         <>
-                  <hr style={{ border: '3px solid #0D92F4' }} />
-          <div className="Footer" style={{ backgroundColor: props.mode === 'dark' ? '#0B192C' : 'white'}}>
+            {/* Divider line */}
+            <hr style={{ border: '3px solid #0D92F4' }} />
 
-          <div className="container">
+            {/* Footer container with dynamic background color */}
+            <div className="Footer" style={{ backgroundColor: props.mode === 'dark' ? '#0B192C' : 'white' }}>
+                <div className="container">
                     <div className="row">
+                        {/* Left section with branding and social icons */}
                         <div className="col-md-6 col-lg-5 col-12 ft-1">
-                        <h3 style={{ fontFamily: "medium", fontSize: "2.5rem" }}>BIT<span className='code' style={{ Color: "#0D92F4"}}>BOX</span></h3>
-                            <p>Empowering Developers,<br/>
-                              Where Projects Find solution together</p>
-                              <div className="footer-icons">
-  <a href="https://github.com/bitboxcommunity" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
-  <FaGithub color="#211F1F" fontSize="2rem" />
-  </a>
-  <a href="https://twitter.com/BITBOX688152" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
-  <FaXTwitter color="#1da1f2" fontSize="2rem" />
-  </a>
-  <a href="https://www.youtube.com/channel/UCXUTdcw27jaH_go9iyUjJnA" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
-<FaYoutube color="red" fontSize="2rem" />
-  </a>
-  <a href="https://www.linkedin.com/in/bit-box-community" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
-  <FaLinkedin color="#0077b5" fontSize="2rem" />
-  </a>
-</div>
-
-
+                            <h3 style={{ fontFamily: "medium", fontSize: "2.5rem" }}>
+                                BIT<span className='code' style={{ color: "#0D92F4" }}>BOX</span>
+                            </h3>
+                            <p>
+                                Empowering Developers,<br />
+                                Where Projects Find Solutions Together
+                            </p>
+                            <div className="footer-icons">
+                                {/* Social media icons with links */}
+                                <a href="https://github.com/bitboxcommunity" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+                                    <FaGithub color="#211F1F" fontSize="2rem" />
+                                </a>
+                                <a href="https://twitter.com/BITBOX688152" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
+                                    <FaXTwitter color="#1da1f2" fontSize="2rem" />
+                                </a>
+                                <a href="https://www.youtube.com/channel/UCXUTdcw27jaH_go9iyUjJnA" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
+                                    <FaYoutube color="red" fontSize="2rem" />
+                                </a>
+                                <a href="https://www.linkedin.com/in/bit-box-community" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+                                    <FaLinkedin color="#0077b5" fontSize="2rem" />
+                                </a>
+                            </div>
                         </div>
+
+                        {/* Middle section with About links */}
                         <div className="col-md-6 col-lg-3 col-12 ft-2">
                             <h5>About</h5>
                             <ul>
                                 <li className="nav-item">
-                                <Link to="/contactus">Contact Us</Link>
+                                    <Link to="/contactus">Contact Us</Link>
                                 </li>
                                 <li className="nav-item">
-                                <Link to='/codeofconduct'>Code of Conduct</Link>
+                                    <Link to='/codeofconduct'>Code of Conduct</Link>
                                 </li>
                             </ul>
                         </div>
+
+                        {/* Right section with Legal links */}
                         <div className="col-md-7 col-lg-4 col-13 ft-3">
                             <h5>Legals</h5>
                             <ul>
                                 <li className="nav-item">
-                                <Link to="/feedback">Feedback</Link>
+                                    <Link to="/feedback">Feedback</Link>
                                 </li>
                                 <li className="nav-item">
-                                <Link to="/privacypolicy">Privacy Policy</Link>
+                                    <Link to="/privacypolicy">Privacy Policy</Link>
                                 </li>
                                 <li className="nav-item">
-                                <li><Link to="/termofuse">Terms of use</Link></li>
+                                    <Link to="/termofuse">Terms of use</Link>
                                 </li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
+
+            {/* Last footer section with copyright info */}
             <div className='Last-footer'>
-            <p className='copy-content'>© 2024 Bitbox.&nbsp; Made with 🤍 by Bitbox India.&nbsp; All rights reserved.</p>
+                <p className='copy-content'>
+                    © 2024 Bitbox.&nbsp; Made with 🤍 by Bitbox India.&nbsp; All rights reserved.
+                </p>
             </div>
         </>
-    )
+    );
 }
 
-
+// Prop types for validation
 Footer.propTypes = {
-  showAlert: PropTypes.func,
-  mode: PropTypes.string,
+    showAlert: PropTypes.func,
+    mode: PropTypes.string,
 };
 
-export default Footer
+export default Footer;
diff --git a/client/src/component/Footers/Codeofconduct.jsx b/client/src/component/Footers/Codeofconduct.jsx
@@ -1,4 +1,4 @@
-import '../css/Main.css';
+import '../../css/Main.css';
 import PropTypes from 'prop-types';
 
 const CodeOfConduct = () => {

diff --git a/client/src/component/Footers/Contactus.jsx b/client/src/component/Footers/Contactus.jsx
@@ -1,4 +1,4 @@
-import '../css/Main.css';
+import '../../css/Main.css';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { ToastContainer, toast } from 'react-toastify';

diff --git a/client/src/component/Footers/Privacypolicy.jsx b/client/src/component/Footers/Privacypolicy.jsx
@@ -1,4 +1,4 @@
-import '../css/Main.css';
+import '../../css/Main.css';
 import PropTypes from 'prop-types';
 
 const PrivacyPolicy = (props) => {

diff --git a/client/src/component/Footers/TermOfUse.jsx b/client/src/component/Footers/TermOfUse.jsx
@@ -1,4 +1,4 @@
-import '../css/Main.css'
+import '../../css/Main.css';
 import PropTypes from 'prop-types';
 
 export default function TermOfUse() {

diff --git a/client/src/component/ForgotPassword.jsx b/client/src/component/ForgotPassword.jsx
@@ -4,7 +4,7 @@ import { Input, Button } from "antd";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 
-const host = "http://localhost:5000";
+const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || 'https://bitbox-uxbo.onrender.com';
 
 const ForgotPassword = ({ showAlert, mode }) => {
   const [forgotEmail, setForgotEmail] = useState("");
@@ -14,7 +14,7 @@ const ForgotPassword = ({ showAlert, mode }) => {
   const handleForgotPassword = async () => {
     setLoading(true);
     try {
-      const response = await fetch(`${host}/api/auth/ResetByEmail`, {
+      const response = await fetch(`${VITE_SERVER_PORT}/api/auth/ResetByEmail`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -118,7 +118,7 @@ const ForgotPassword = ({ showAlert, mode }) => {
             marginLeft: "200px",
           }}
         >
-          No worries, we've got you covered!"
+          No worries, we&apos;ve got you covered!&quot;
         </p>
       </div>
     </div>

diff --git a/client/src/component/Home.jsx b/client/src/component/Home.jsx
@@ -1,4 +1,4 @@
-import './css/Home.css';
+import '../css/Home.css';
 import PropTypes from 'prop-types';
 import HeroImg from '../assets/images/Vector Gif/Hero.gif';
 import Learn from '../assets/images/Learn.png';