Merge branch 'main' into framerMotion

backend/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+build
+.DS_Store
+.env
+.git
+.gitignore

backend/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:alpine AS builder
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm install
+COPY . .
+
+FROM node:alpine
+WORKDIR /app
+COPY --from=builder /app /app
+RUN npm install
+EXPOSE 8000
+CMD ["npm","start"]

compose.yaml

@@ -0,0 +1,18 @@
+version: '3.8'
+
+services:
+  devlab-frontend:
+    build:
+      context: ./frontend
+    ports:
+      - "3000:3000"
+    env_file:
+      - ./frontend/.env
+
+  devlab-backend:
+    build:
+      context: ./backend
+    ports:
+      - "8000:8000"
+    env_file:
+      - ./backend/.env

frontend/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+build
+.DS_Store
+.env
+.git
+.gitignore

frontend/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:alpine AS builder
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM node:alpine
+WORKDIR /app
+COPY --from=builder /app /app
+RUN npm install
+EXPOSE 3000
+CMD ["npm","start"]

frontend/src/App.js

@@ -1,8 +1,5 @@
-// App.js
-import React, { useState, useEffect } from "react";
-import { Route, Routes, BrowserRouter } from "react-router-dom";
-
-// Components
+import React, { useState } from "react";
+import { Route, Routes } from "react-router-dom";
 import "./App.css";
 import About from "./Component/About";
 import Footer from "./Component/Footer";
@@ -19,8 +16,6 @@ import Review from "./Component/Review";
 import AOS from "aos";
 import "aos/dist/aos.css";
 import { Toaster } from "react-hot-toast";
-
-
 import ScrollToTop from "./Component/ScrollToTop";
 import Faq from "./Component/Faq";
 
@@ -32,45 +27,40 @@ import Extension from "./pages/Extension";
 import UI from "./pages/UI";
 import FrontendTools from "./pages/FrontendTools";
 import EthicalHacking from "./pages/EthicalHacking";
-import CodingPlateform from "./pages/CodingPlateform.jsx";
-import CourcesPlatform from "./pages/CoursesPlatform.jsx";
-
-
 
+import CodingPlatform from "./pages/CodingPlateform"; // Corrected import
 
 function App() {
   const [searchQuery, setSearchQuery] = useState("");
-  AOS.init();  
-
-  return (
-      <>
-        <ScrollToTop />
-        <Navbar setSearchQuery={setSearchQuery} />
-        <Routes>
-          <Route path='/' element={<Home searchQuery={searchQuery} />}></Route>
-          <Route path='/bookmark' element={<BookMark />}></Route>
-          <Route path='/about' element={<About />}></Route>
-          <Route path='/open-source' element={<OpenSource />}></Route>
-          <Route path='/review' element={<Review />} />
-          <Route path='*' element={<NotFound />} /> {/* 404 route */}
-          <Route path="/faq" element={<Faq />}></Route>
-
-          <Route path="/remote-jobs" element={<RemoteJobs />}></Route>
-          <Route path="/ai" element={<AI />}></Route>
-          <Route path="/movies-series" element={<Movie />}></Route>
-          <Route path="/extension" element={<Extension />}></Route>
-          <Route path="/ui-design" element={<UI />}></Route>
-          <Route path="/front-end-tools" element={<FrontendTools />}></Route>
-          <Route path="/ethical-hacking" element={<EthicalHacking />}></Route>
-          <Route path="/coding-platform" element={<CodingPlateform />}></Route>
-          <Route path="/cources-platform" element={<CourcesPlatform />}></Route>
-        </Routes>
-        <BackToTopButton />
-        <Toaster />
-        <ChatAssistant />        <Footer />
-      </>
-
 
+  return (
+    <>
+      <ScrollToTop />
+      <Navbar setSearchQuery={setSearchQuery} />
+      <Routes>
+        <Route path="/" element={<Home searchQuery={searchQuery} />} />
+        <Route path="/bookmark" element={<BookMark />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/open-source" element={<OpenSource />} />
+        <Route path="/review" element={<Review />} />
+        <Route path="/faq" element={<Faq />} />
+        <Route path="/rateus" element={<Rateus />} />
+        <Route path="/remote-jobs" element={<RemoteJobs />} />
+        <Route path="/ai" element={<AI />} />
+        <Route path="/movies-series" element={<Movie />} />
+        <Route path="/extension" element={<Extension />} />
+        <Route path="/ui-design" element={<UI />} />
+        <Route path="/front-end-tools" element={<FrontendTools />} />
+        <Route path="/ethical-hacking" element={<EthicalHacking />} />
+        <Route path="/coding-platform" element={<CodingPlatform />} />
+        {/* Define other routes as needed */}
+        <Route path="*" element={<NotFound />} /> {/* 404 route */}
+      </Routes>
+      <BackToTopButton />
+      <Toaster />
+      <ChatAssistant />
+      <Footer />
+    </>
   );
 }
 

frontend/src/ChatAssistant/Avatar.jsx

@@ -5,7 +5,11 @@ import "../ChatAssistant/ChatAssistant.css"
 export default function Avatar() {
   return (
     <div>
-      <img className="Avatar" src={chatbotLogo}/>
+      <img
+        className="Avatar"
+        src={chatbotLogo}
+        alt="chatbot_avatar"
+      />
     </div>
   )
 }

frontend/src/ChatAssistant/UserAvatar.jsx

@@ -5,7 +5,11 @@ import "../ChatAssistant/ChatAssistant.css"
 export default function Avatar() {
   return (
     <div>
-      <img className="userAvatar" src={userAvatar}/>
+      <img
+        className="userAvatar"
+        src={userAvatar}
+        alt="useravatar_pic"
+      />
     </div>
   )
 }

frontend/src/Component/About.js

@@ -95,6 +95,7 @@ function About() {
           <img
             className="img"
             src="https://media.istockphoto.com/id/1276643671/vector/tiny-programmers-programming-website-for-internet-platform.jpg?s=612x612&w=0&k=20&c=7k24K8DYdSRxVHj3roqR_f4wkk-a_fG3WlT4hN-VJUg="
+            alt="img"
           />
         </div>
         <div className="bx-1">

frontend/src/Component/Footer.js

@@ -197,4 +197,4 @@ function Footer() {
   );
 }
 
-export default Footer;
+export default Footer;

frontend/src/DB/product.json

@@ -2959,7 +2959,14 @@
 		"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4dEvwYNKclGGZ0pMtgCfodUMu22JqspXQow&s",
 		"link": "https://www.framer.com/motion/",
 		"description": "Framer Motion is a powerful open-source motion library for React that makes it easy to create smooth and complex animations. It provides a flexible API for designing interactive UI animations, enhancing the user experience with seamless transitions and engaging visual effects."
-		}
+  }
+  {
+		"productName": "Iconfinder",
+		"category": "Icon Library",
+		"image": "https://static-00.iconduck.com/assets.00/iconfinder-icon-500x512-kl5zm80l.png",
+		"link": "https://www.iconfinder.com/",
+		"description": "Iconfinder is a comprehensive icon library offering a vast collection of high-quality icons for designers and developers. Easily find, customize, and integrate icons into your projects to enhance visual appeal and user experience."
+  }
 
 
 

frontend/src/index.js

@@ -36,10 +36,9 @@ const darkmode = new Darkmode(options);
 darkmode.showWidget();
 
 root.render(
-  <Provider store={store}>p
+  <Provider store={store}>
     <BrowserRouter> {/* Ensure BrowserRouter is only here */}
       <App />
       <ToastContainer />
-    </BrowserRouter>
   </Provider>
-);
+);