hofang42 · justduck25 · May 18, 2025 · May 22, 2025 · May 24, 2025
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,9 @@
 
 # dependencies
 /node_modules
-/.pnp
+/Frontend/node_modules
+/Backend/node_modules
+/Backend/.env
 .pnp.js
 
 # testing

diff --git a/BackEnd/package.json b/BackEnd/package.json
diff --git a/BackEnd/server.js b/BackEnd/server.js
diff --git a/FrontEnd/.gitignore b/FrontEnd/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
@@ -3,13 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.6",
+    "bootstrap-icons": "^1.13.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.18",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -35,5 +45,17 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+
+  "devDependencies": {
+    "css-loader": "^7.1.2",
+    "postcss-loader": "^8.1.1",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.89.0",
+    "sass-loader": "^16.0.5"
+  },
+  "main": "index.js",
+  "author": "",
+  "license": "ISC",
+  "description": ""
 }
diff --git a/FrontEnd/public/favicon.ico b/FrontEnd/public/favicon.ico
diff --git a/FrontEnd/public/icons/appStore.png b/FrontEnd/public/icons/appStore.png
diff --git a/FrontEnd/public/icons/bell.png b/FrontEnd/public/icons/bell.png
diff --git a/FrontEnd/public/icons/cart.png b/FrontEnd/public/icons/cart.png
diff --git a/FrontEnd/public/icons/chplay.png b/FrontEnd/public/icons/chplay.png
diff --git a/FrontEnd/public/icons/clock.png b/FrontEnd/public/icons/clock.png
diff --git a/FrontEnd/public/icons/folder.png b/FrontEnd/public/icons/folder.png
diff --git a/FrontEnd/public/icons/heart.png b/FrontEnd/public/icons/heart.png
diff --git a/FrontEnd/public/icons/play.png b/FrontEnd/public/icons/play.png
diff --git a/FrontEnd/public/images/Logo.png b/FrontEnd/public/images/Logo.png
diff --git a/FrontEnd/public/images/defaultImageUser.png b/FrontEnd/public/images/defaultImageUser.png
diff --git a/FrontEnd/public/images/logo_black_bg.png b/FrontEnd/public/images/logo_black_bg.png
diff --git a/FrontEnd/public/index.html b/FrontEnd/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Flearning is a platform that provides a wide range of online courses and resources to help individuals learn new skills and advance their careers."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Flearning</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/FrontEnd/public/manifest.json b/FrontEnd/public/manifest.json
@@ -1,6 +1,7 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Flearning",
+  "name": "Flearning",
+  "description": "A platform for learning and sharing knowledge.",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/FrontEnd/src/App.js b/FrontEnd/src/App.js
@@ -1,25 +1,16 @@
 import logo from './logo.svg';
 import './App.css';
-
+import Header from './components/header/Header';
+import SumaryHeader from './components/sumaryCourse/SumaryHeader';
+import Footer from './components/footer/Footer';
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <Header/>
+      <SumaryHeader/>
+      <Footer/>
     </div>
   );
 }
 
-export default App;
+export default App;
diff --git a/FrontEnd/src/assets/footer/footer.css b/FrontEnd/src/assets/footer/footer.css
@@ -0,0 +1,30 @@
+.social-icon{
+    background-color: rgb(68, 66, 66) !important;
+    transition: all 0.3s ease-in-out !important;
+}
+.social-icon:hover{
+    background-color: #FF6F32 !important;
+}
+.footer-link{
+    text-decoration: none !important;
+}
+.list-links li{
+    margin-bottom: 10px;
+}
+@media screen and (min-width: 768px) {
+
+    .mobile-view{
+        display: none;
+    }
+    .desktop-view{
+        display: block;
+    }
+}
+@media screen and (max-width: 768px) {
+    .mobile-view{
+        display: block;
+    }
+    .desktop-view{
+        display: none;
+    }
+}
diff --git a/FrontEnd/src/assets/header/header.css b/FrontEnd/src/assets/header/header.css
@@ -0,0 +1,142 @@
+.nav--link {
+    padding: 10px 20px !important;
+}
+
+.nav--link.active {
+    border-top: 3px solid #FF6F32;
+}
+
+.nav--link:not(.active) {
+    padding-top: 13px !important;
+}
+
+.logo {
+    width: 100%;
+}
+
+.navbar--brand {
+    width: 14%;
+}
+
+.dropdown-1 {
+    margin-left: 3%;
+}
+
+.dropdown-1 button {
+    border-radius: 0px;
+    color: #565353;
+}
+
+/* for SearchBar */
+.search-btn {
+    background-color: unset;
+    border: none;
+    position: absolute;
+    left: 3%;
+    top: 30%;
+}
+.search-input:focus {
+    box-shadow: none !important;
+    border-color: #FF6F32 !important;
+}
+/* for HeaderRight */
+.icon{
+    width: 20px;
+    height: 20px;
+}
+.icon-btn{
+    width: 45px;
+    height: 45px;
+}
+.create-account-btn{
+    background-color: #FFEEE8;
+    border: none;
+    color: #FF6F32;
+    font-weight: 500;
+}
+.sign-in-btn{
+    background-color: #FF6F32;
+    border: none;
+    color: white;
+    font-weight: 500;
+}
+.fade{
+    box-shadow: 0px 0px 6px #7c736f;
+}
+.dropdown-item-hover:hover{
+    background-color: #FFEEE8!important;
+    color: #FF6F32!important;
+    transition: 0.4s ease;
+}
+
+/* sumary header */
+.summary-header{
+    background-color: #f7f5f4f9;
+    padding: 15px 0px;
+}
+.mini-icon{
+    width: 20px;
+    height: 20px;
+}
+.review-course-btn{
+    background-color: white;
+    border: none;
+    color: #FF6F32;
+    font-weight: 500;
+}
+/* end sumary header */
+/* For mobile navbar */
+.offcanvas-menu{
+    width: 80%;
+    background-color: #5f5e5ee9 !important;
+}
+.nav-mobile-link{
+    padding: 10px 20px !important;
+    border-radius: 5px;
+}
+.nav-mobile-link.active{
+    background-color: #FF6F32;
+}
+/* end */
+
+@media screen and (max-width: 768px) {
+    .mobile-item-view{
+        width: 300%;
+    }
+    .desktop-item-view{
+        display: none;
+    }
+}
+@media screen and (min-width: 768px) {
+    .mobile-item-view{
+        display: none;
+    }
+    .desktop-item-view{
+        display: block;
+    }
+}
+@media screen and (min-width: 1024px) {
+    .tablet-view-nav{
+        display: none;
+    }
+    .desktop-view-nav{
+        display: block;
+    }
+    .search-input{
+        border-radius: 0px;
+    }
+}
+@media screen and (max-width: 1024px) {
+    .tablet-view-nav{
+        display: block;
+    }
+    .desktop-view-nav{
+        display: none;
+    }
+    .navbar--brand {
+        width: 25%;
+    }
+    .search-input{
+        border-radius: 20px !important;
+    }
+}