├── src
    ├── index.css
    ├── assets
    │   ├── logo.png
    │   └── react.svg
    ├── styles
    │   ├── Footer.module.css
    │   ├── Auth.module.css
    │   ├── RoadmapDetailsPage.module.css
    │   ├── ChatBot.module.css
    │   ├── Home.module.css
    │   └── Profile.module.css
    ├── components
    │   ├── Footer.jsx
    │   ├── ImageQuote.jsx
    │   ├── RoadmapItem.jsx
    │   ├── Navbar.jsx
    │   ├── TrendingFields.jsx
    │   ├── Roadmap.jsx
    │   ├── Steps.jsx
    │   ├── EditProfile.jsx
    │   ├── SignIn.jsx
    │   ├── SignUp.jsx
    │   └── ProfileCard.jsx
    ├── main.jsx
    ├── App.css
    ├── pages
    │   ├── RoadmapPage.jsx
    │   ├── AuthPage.jsx
    │   ├── HomePage.jsx
    │   ├── ProfilePage.jsx
    │   ├── RoadmapDetailsPage.jsx
    │   └── ChatbotPage.jsx
    ├── services
    │   ├── groq.js
    │   ├── chat.js
    │   ├── quotes.js
    │   ├── AuthApi.js
    │   └── RoadmapAPI.js
    └── App.jsx
├── .gitignore
├── index.html
├── vite.config.js
├── eslint.config.js
├── package.json
├── public
    └── vite.svg
└── README.md


/src/index.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NadaFeteiha/frontend/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/styles/Footer.module.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     background-color: #223a4d;
 3 |     color: #95a9b3;
 4 |     padding: 1.5rem 0;
 5 |     text-align: center;
 6 | }
 7 | 
 8 | hr {
 9 |     width: 100%;
10 |     border: 5px solid rgba(255, 255, 255, 0.1);
11 | }


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import styles from "../styles/Footer.module.css";
 2 | 
 3 | export default function Footer() {
 4 |     return (
 5 |         <footer >
 6 |             <hr />
 7 |             <div className={styles.container}>
 8 |                 <p>Coming soon..</p>
 9 |             </div>
10 |         </footer>
11 |     );
12 | }


--------------------------------------------------------------------------------
/src/components/ImageQuote.jsx:
--------------------------------------------------------------------------------
 1 | import styles from '../styles/Home.module.css';
 2 | 
 3 | export default function QuoteImage({ imgs }) {
 4 | 
 5 |     return (
 6 |         <div className={styles.quoteImageContainer}>
 7 |             <img src={imgs[0]} alt="quote" />
 8 |             <img src={imgs[1]} alt="quote" />
 9 |         </div>
10 |     );
11 | 
12 | };


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | .env
26 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react'
 2 | import { createRoot } from 'react-dom/client'
 3 | import './index.css'
 4 | import App from './App.jsx'
 5 | import { BrowserRouter } from "react-router-dom";
 6 | 
 7 | createRoot(document.getElementById('root')).render(
 8 |   <StrictMode>
 9 |     <BrowserRouter>
10 |       <App />
11 |     </BrowserRouter>
12 |   </StrictMode>,
13 | )
14 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/components/RoadmapItem.jsx:
--------------------------------------------------------------------------------
 1 | import styles from '../styles/Home.module.css';
 2 | 
 3 | export default function RoadmapItem({ roadmap, roadmapClick }) {
 4 |     return (
 5 |         <div className={styles.roadmapItem} onClick={roadmapClick}>
 6 |             <h3 className={styles.roadmapTitle}>{roadmap.title}</h3>
 7 |             <div className={styles.topicInfo}>
 8 |                 <p className={styles.roadmapDescription}>{roadmap.description}</p>
 9 |             </div>
10 |         </div>
11 |     );
12 | }


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | import tailwindcss from '@tailwindcss/vite'
 4 | 
 5 | // https://vite.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     react(),
 9 |     tailwindcss()
10 |   ],
11 |   server: {
12 |     proxy: {
13 |       "/api": {
14 |         // target: "http://localhost:4000",
15 |         target: "http://backend-moys.onrender.com",
16 |         changeOrigin: true,
17 |       },
18 |     },
19 |   },
20 | })
21 | 
22 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | :root {
 4 |     --primary-color: #4885ad;
 5 |     --secondary-color: #333;
 6 |     --danger-color: #ff0000;
 7 |     --success-color: #4885ad;
 8 |     --warning-color: #ffcc00;
 9 |     --main-bg-color: #061621;
10 | }
11 | 
12 | * {
13 |     box-sizing: border-box;
14 | }
15 | 
16 | html,
17 | body {
18 |     padding: 0;
19 |     margin: 0;
20 |     font-family: 'Roboto', sans-serif;
21 |     background-color: var(--main-bg-color);
22 |     color: #4885ad;
23 | }
24 | 
25 | h1 {
26 |     @apply text-xl font-bold mb-2;
27 | }


--------------------------------------------------------------------------------
/src/pages/RoadmapPage.jsx:
--------------------------------------------------------------------------------
 1 | import RoadmapApi from "../services/RoadmapAPI";
 2 | import { useState } from "react";
 3 | 
 4 | //TODO: Need another page for discofer roadmaps and resources
 5 | 
 6 | export default function RoadmapPage() {
 7 | 
 8 |     const [loading, setLoading] = useState(false);
 9 |     const [error, setError] = useState(null);
10 | 
11 |     //handel status
12 |     if (loading) return <p>Loading...</p>;
13 |     if (error) return <p>Error: {error.message}</p>;
14 | 
15 |     return (
16 |         <>
17 |             <h2>Roadmaps Search</h2>
18 |         </>
19 |     );
20 | };
21 | 
22 | 


--------------------------------------------------------------------------------
/src/services/groq.js:
--------------------------------------------------------------------------------
 1 | import Groq from 'groq-sdk';
 2 | 
 3 | // Creates a Groq sdk instance
 4 | const groq = new Groq({
 5 |     apiKey: import.meta.env.VITE_GROQ_API_KEY,
 6 |     dangerouslyAllowBrowser: true
 7 | });
 8 | 
 9 | /**
10 |  * Get Chat Completion
11 |  * @description sends arrays of message to Groq API
12 |  * @param {*} messages 
13 |  * @returns 
14 |  */
15 | export async function getChatCompletion(messages) {
16 |     try {
17 |         const completion = await groq.chat.completions.create({
18 |             messages: messages,
19 |             model: "llama-3.3-70b-versatile"
20 |         });
21 | 
22 |         if (!completion) {
23 |             throw new Error("Error generating chat completion.");
24 |         }
25 | 
26 |         return completion;
27 |     } catch (e) {
28 |         console.error(e.message)
29 |     }
30 | }


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom"
 2 | import styles from "../styles/Home.module.css";
 3 | import logo from "../assets/logo.png";
 4 | 
 5 | function Navbar() {
 6 |     return (
 7 |         <nav className={styles.navbar}>
 8 |             <ul>
 9 |                 <li>
10 |                     <img className={styles.logo} src={logo} alt="logo" />
11 |                 </li>
12 | 
13 |                 <li>
14 |                     <Link to="/">Home</Link>
15 |                 </li>
16 |                 <li>
17 |                     <Link to="/roadmap">Roadmap</Link>
18 |                 </li>
19 | 
20 |                 <li className={styles.auth}>
21 |                     <Link to="/profile">Profile</Link>
22 |                 </li>
23 |             </ul>
24 |         </nav>
25 |     )
26 | }
27 | 
28 | export default Navbar;
29 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | 
 6 | export default [
 7 |   { ignores: ['dist'] },
 8 |   {
 9 |     files: ['**/*.{js,jsx}'],
10 |     languageOptions: {
11 |       ecmaVersion: 2020,
12 |       globals: globals.browser,
13 |       parserOptions: {
14 |         ecmaVersion: 'latest',
15 |         ecmaFeatures: { jsx: true },
16 |         sourceType: 'module',
17 |       },
18 |     },
19 |     plugins: {
20 |       'react-hooks': reactHooks,
21 |       'react-refresh': reactRefresh,
22 |     },
23 |     rules: {
24 |       ...js.configs.recommended.rules,
25 |       ...reactHooks.configs.recommended.rules,
26 |       'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
27 |       'react-refresh/only-export-components': [
28 |         'warn',
29 |         { allowConstantExport: true },
30 |       ],
31 |     },
32 |   },
33 | ]
34 | 


--------------------------------------------------------------------------------
/src/services/chat.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | const API_URL = import.meta.env.VITE_BASE_URL;
 4 | axios.defaults.baseURL = API_URL;
 5 | 
 6 | // Create a new chat
 7 | export async function createChat(messages, title) {
 8 |     const res = await axios.post("/api/chat", { messages, title });
 9 |     return res.data;
10 | }
11 | 
12 | // Get all chats
13 | export async function getChats() {
14 |     const res = await axios.get("/api/chat/");
15 |     return res.data;
16 | }
17 | 
18 | // Get a specific chat
19 | export async function getChat(chatId) {
20 |     const res = await axios.get(`/api/chat/${chatId}`);
21 |     return res.data;
22 | }
23 | 
24 | // Update a chat
25 | export async function updateChat(chatId, messages, title) {
26 |     const res = await axios.patch(`/api/chat/${chatId}`, {
27 |         messages,
28 |         title,
29 |     });
30 |     return res.data;
31 | }
32 | 
33 | // Delete a chat
34 | export async function deleteChat(chatId) {
35 |     await axios.delete(`/api/chat/${chatId}`);
36 | }
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview",
11 |     "clean": "rm -rf dist && rm -rf node_modules && rm -rf .cache"
12 | 
13 |   },
14 |   "dependencies": {
15 |     "@tailwindcss/vite": "^4.0.15",
16 |     "axios": "^1.8.4",
17 |     "groq-sdk": "^0.17.0",
18 |     "react": "^19.0.0",
19 |     "react-dom": "^19.0.0",
20 |     "react-icons": "^5.5.0",
21 |     "react-router-dom": "^7.4.0"
22 |   },
23 |   "devDependencies": {
24 |     "@eslint/js": "^9.21.0",
25 |     "@types/react": "^19.0.10",
26 |     "@types/react-dom": "^19.0.4",
27 |     "@vitejs/plugin-react": "^4.3.4",
28 |     "autoprefixer": "^10.4.21",
29 |     "eslint": "^9.21.0",
30 |     "eslint-plugin-react-hooks": "^5.1.0",
31 |     "eslint-plugin-react-refresh": "^0.4.19",
32 |     "globals": "^15.15.0",
33 |     "postcss": "^8.5.3",
34 |     "tailwindcss": "^4.0.15",
35 |     "vite": "^6.2.0"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/TrendingFields.jsx:
--------------------------------------------------------------------------------
 1 | import styles from '../styles/Home.module.css';
 2 | 
 3 | function TrendingFields({ chatBotClick, trendTopics }) {
 4 |     return (
 5 |         <div className={styles.container}>
 6 |             <p className={styles.subtitle}>The most common study fields or languages for this year...</p>
 7 |             <div className={styles.trendTopicContainer}>
 8 |                 {
 9 |                     trendTopics.map(topic => (
10 |                         <TopicItem key={topic.id} topic={topic} />
11 |                     ))
12 |                 }
13 |             </div>
14 |             <br />
15 |             <button
16 |                 className={styles.chatButton}
17 |                 onClick={chatBotClick}
18 |             >
19 |                 Chat with AI
20 |             </button>
21 |         </div>
22 |     );
23 | }
24 | 
25 | 
26 | function TopicItem({ topic }) {
27 |     return (
28 |         <div className={styles.trendTopic}>
29 |             <h3>{topic.title}</h3>
30 |         </div>
31 |     );
32 | }
33 | 
34 | export default TrendingFields;
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/src/services/quotes.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const BASE_URL = "https://api.unsplash.com/";
 3 | const API_KEY = import.meta.env.VITE_UNSPLASH_API_KEY;
 4 | /**
 5 |  * @param {string} orientation
 6 |  * @param {string} quote
 7 |  * @param {number} per_page
 8 |  * @description Fetch a quote image from Unsplash API
 9 |  */
10 | export async function getQuoteImgs(orientation = "landscape", quote = "study quotes", per_page = 10) {
11 |     try {
12 |         const response = await fetch(`${BASE_URL}search/photos?query=${quote}&orientation=${orientation}&per_page=${per_page}&page=1&client_id=${API_KEY}`);
13 |         if (!response.ok) {
14 |             throw new Error("Failed to fetch quote");
15 |         }
16 | 
17 |         const data = await response.json();
18 |         const images = data.results
19 |             .sort(() => 0.5 - Math.random())
20 |             .slice(0, 2)
21 |             .map(result => result.urls.regular);
22 | 
23 |         return images;
24 |     } catch (error) {
25 |         console.error(error);
26 |     }
27 | }
28 | 
29 | function getRandomInt(max, min = 0) {
30 |     return Math.floor(Math.random() * (max - min) + min);
31 | }
32 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import './App.css'
 2 | import { Routes, Route } from 'react-router-dom'
 3 | import Navbar from './components/Navbar'
 4 | import Home from './pages/HomePage'
 5 | import Profile from './pages/ProfilePage'
 6 | import AuthPage from './pages/AuthPage'
 7 | import ChatBot from './pages/ChatbotPage'
 8 | import Roadmap from './pages/RoadmapPage'
 9 | import RoadmapDetails from './pages/RoadmapDetailsPage'
10 | import { useState } from 'react'
11 | 
12 | function App() {
13 | 
14 |   const [isChatbotOpen, setIsChatbotOpen] = useState(false)
15 | 
16 |   return (
17 |     <div>
18 |       {
19 |         !isChatbotOpen && <Navbar />
20 |       }
21 | 
22 |       <Routes>
23 |         <Route path="/" element={<Home setIsChatbotOpen={setIsChatbotOpen} />} />
24 |         <Route path="/profile/" element={<Profile />} />
25 |         <Route path='/auth/' element={<AuthPage />} />
26 |         <Route path="/chatbot/" element={<ChatBot />} />
27 |         <Route path="/roadmap/" element={<Roadmap />} />
28 |         <Route path='/roadmap/:roadmapId' element={<RoadmapDetails />} />
29 | 
30 |       </Routes>
31 |     </div>
32 |   )
33 | }
34 | 
35 | export default App
36 | 


--------------------------------------------------------------------------------
/src/components/Roadmap.jsx:
--------------------------------------------------------------------------------
 1 | import styles from '../styles/Home.module.css';
 2 | import RoadmapItem from './RoadmapItem';
 3 | 
 4 | function Roadmap({ roadmaps, allRoadmapClick, roadmapClick }) {
 5 |     return (
 6 |         <div className={styles.mainContainer}>
 7 | 
 8 |             <div className={styles.header}>
 9 |                 <h2 className={styles.stepsTitle}>Roadmaps</h2>
10 |             </div>
11 | 
12 |             <div className={styles.roadmapListContainer}>
13 |                 {roadmaps.map((roadmap) => (
14 |                     <RoadmapItem
15 |                         key={roadmap.id}
16 |                         roadmap={roadmap}
17 |                         roadmapClick={() => roadmapClick(roadmap.id)}
18 |                     />
19 |                 ))}
20 |                 <MoreRoadmapItem roadmapClick={allRoadmapClick} />
21 |             </div>
22 | 
23 |         </div>
24 |     );
25 | }
26 | 
27 | function MoreRoadmapItem({ roadmapClick }) {
28 |     return (
29 |         <div className={styles.moreRoadmap} onClick={roadmapClick}>
30 |             <h3 className={styles.more}>more</h3>
31 |         </div>
32 |     );
33 | }
34 | 
35 | export default Roadmap;


--------------------------------------------------------------------------------
/src/pages/AuthPage.jsx:
--------------------------------------------------------------------------------
 1 | import AuthAPI from "../services/AuthApi";
 2 | import SignIn from "../components/SignIn";
 3 | import SignUp from "../components/SignUp";
 4 | import styles from "../styles/Auth.module.css";
 5 | import { useEffect, useState } from "react";
 6 | 
 7 | //TODO: Check if user is logged in or not by token
 8 | //TODO: If user is logged in, redirect to Profile Page
 9 | //Todo: implement login , forgot password, reset password, register
10 | //TODO: change focus when clicked on signup in  signin component and vice versa
11 | 
12 | function AuthPage() {
13 | 
14 |     const [userId, setUserId] = useState("");
15 | 
16 |     useEffect(() => {
17 |         if (userId) {
18 |             localStorage.setItem("userID", userId);
19 |         }
20 |     }, [userId]);
21 | 
22 |     return (
23 |         <div className={styles.authContainer}>
24 | 
25 |             <SignIn setUserId={setUserId} />
26 | 
27 |             <div className={styles.dividerContainer}>
28 |                 <div className={styles.divider}></div>
29 |             </div>
30 | 
31 |             <SignUp setUserId={setUserId} />
32 |         </div>
33 |     );
34 | };
35 | 
36 | 
37 | export default AuthPage;


--------------------------------------------------------------------------------
/src/styles/Auth.module.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | /********************* Auth page *****************************/
 4 | .authContainer {
 5 |     @apply flex justify-around items-start h-screen align-top mt-32;
 6 | }
 7 | 
 8 | .dividerContainer {
 9 |     @apply flex h-[90%] mt-5;
10 | }
11 | 
12 | .divider {
13 |     @apply w-px h-1/2 bg-gray-300 shadow-lg;
14 | }
15 | 
16 | /***************** Sign-in and register *************/
17 | .signContainer {
18 |     @apply flex flex-col w-[40%] min-h-[400px] items-center gap-4 bg-[#ffffff] p-8 rounded-md shadow-lg;
19 | }
20 | 
21 | .form {
22 |     @apply flex flex-col w-[100%] items-start gap-4;
23 | }
24 | 
25 | .inputGroup {
26 |     @apply flex flex-col text-left w-[100%];
27 | }
28 | 
29 | .inputGroup label {
30 |     @apply font-medium mb-1;
31 | }
32 | 
33 | .inputGroup input {
34 |     @apply p-2 border border-gray-300 rounded-md text-sm;
35 | }
36 | 
37 | .inputGroup input:focus {
38 |     @apply focus:outline-none focus:ring-2 focus:ring-[#041323] focus:border-transparent;
39 | }
40 | 
41 | .forgotPassword {
42 |     @apply text-right text-sm text-gray-500 mt-1 hover:underline;
43 | }
44 | 
45 | .btnContainer {
46 |     @apply flex justify-center w-[100%];
47 | }
48 | 
49 | .signInButton {
50 |     @apply bg-black text-white py-2 px-4 rounded-md text-sm hover:bg-[#4885ad]
51 | }
52 | 
53 | .error {
54 |     @apply text-red-500 text-sm mb-2;
55 | }


--------------------------------------------------------------------------------
/src/components/Steps.jsx:
--------------------------------------------------------------------------------
 1 | import styles from "../styles/RoadmapDetailsPage.module.css";
 2 | 
 3 | 
 4 | export default function Steps({ steps }) {
 5 | 
 6 |     return (
 7 |         <div className={styles.mainStepContainer}>
 8 |             <div className={styles.stepsContainer}>
 9 |                 <h2 className={styles.stepsTitle}>Steps</h2>
10 |                 <ol className={styles.stepsList}>
11 |                     {steps.map(step => (
12 |                         <li key={step.id} className={styles.stepItem}>
13 |                             <div className={styles.stepHeader}>
14 |                                 <span className={styles.stepNumber}>Step {step.order}</span>
15 |                                 <h3 className={styles.stepTitle}>{step.title}</h3>
16 |                             </div>
17 |                             <div className={styles.topicInfo}>
18 |                                 <span className={styles.topicLabel}>Topic:</span>
19 |                                 <span className={styles.topicTitle}>{step.topic.title}</span>
20 |                                 <p className={styles.topicDescription}>{step.topic.description}</p>
21 |                                 <span className={styles.topicType}>{step.topic.type}</span>
22 |                             </div>
23 |                         </li>
24 |                     ))}
25 |                 </ol>
26 |             </div>
27 |         </div>
28 |     )
29 | };
30 | 
31 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Roadmap Learning Platform
 2 | 
 3 | This project is a web-based platform designed to help users achieve their learning goals through structured roadmaps. Users can explore various roadmaps, track their progress, and interact with AI-powered chatbots for guidance.
 4 | 
 5 | ## Features
 6 | 
 7 | - **Roadmaps**: Explore curated learning paths with steps and topics to achieve specific goals.
 8 | - **Progress Tracking**: Track your progress through roadmaps and mark steps as completed.
 9 | - **User Profiles**: Manage your profile, including updating your name and profile picture.
10 | - **AI Chatbot**: Interact with an AI chatbot for personalized learning assistance.
11 | - **Trending Topics**: Discover the most popular study fields and topics.
12 | - **Resource Management**: Access resources like articles, videos, and tutorials for each topic.
13 | 
14 | ## Tech Stack
15 | 
16 | - **React**: A JavaScript library for building user interfaces.
17 | - **Vite**: A fast build tool for modern web projects.
18 | - **CSS Modules**: Scoped and modular CSS for styling components.
19 | - **React Router**: For client-side routing.
20 | - **Axios**: For making HTTP requests to the backend.
21 | - **React Icons**: For adding icons to the UI.
22 | 
23 | ## Installation
24 | 
25 | ### Steps
26 | 
27 | 1. Clone the repository:
28 | 
29 |    ```bash
30 |    git clone <repo-url>
31 |    cd Capstone
32 |    cd frontend
33 |    ```
34 | 
35 | 2. Install dependencies:
36 | 
37 |    ```bash
38 |    npm i
39 |    ```
40 | 
41 | 3. Set up environment variables:
42 | 
43 |    ```
44 |    VITE_UNSPLASH_API_KEY=<your-unsplash-api-key>
45 |    VITE_GROQ_API_KEY=<your-groq-api-key>
46 |    ```
47 | 
48 | 4. Start the frontend development server:
49 |    ```bash
50 |    npm run dev
51 |    ```
52 | 
53 | ## Folder Structure
54 | 
55 | - **src/components**: Reusable React components.
56 | - **src/pages**: Page-level components for routing.
57 | - **src/services**: API service files for interacting with the backend.
58 | - **src/styles**: CSS modules for styling.
59 | 


--------------------------------------------------------------------------------
/src/components/EditProfile.jsx:
--------------------------------------------------------------------------------
 1 | import styles from "../styles/Profile.module.css";
 2 | import { useState } from "react";
 3 | 
 4 | export default function EditProfile({ user, updateUserInfo, cancel }) {
 5 |     const [name, setName] = useState(user?.name || "");
 6 |     const [profilePicture, setProfilePicture] = useState(user?.profilePicture || "");
 7 | 
 8 |     const handleSubmit = (event) => {
 9 |         event.preventDefault();
10 |         const updatedUser = { name, profilePicture };
11 |         updateUserInfo(updatedUser);
12 |     };
13 | 
14 |     return (
15 |         <div className={styles.editContainer}>
16 |             <h1>Edit Profile</h1>
17 |             <form onSubmit={handleSubmit}>
18 |                 <div className={styles.profileImgSection}>
19 |                     <img
20 |                         src={profilePicture || "https://via.placeholder.com/100"}
21 |                         alt="Profile Preview"
22 |                         className={styles.profilePreview}
23 |                     />
24 |                     <input
25 |                         type="text"
26 |                         placeholder="Enter Image URL"
27 |                         value={profilePicture}
28 |                         onChange={(e) => setProfilePicture(e.target.value)}
29 |                     />
30 |                 </div>
31 | 
32 |                 <div className={styles.inputGroup}>
33 |                     <label>Name:</label>
34 |                     <input
35 |                         type="text"
36 |                         value={name}
37 |                         onChange={(e) => setName(e.target.value)}
38 |                         required
39 |                     />
40 |                 </div>
41 | 
42 |                 <div className={styles.buttonGroup}>
43 |                     <button onClick={cancel} className={styles.saveButton}>Cancel</button>
44 | 
45 |                     <button type="submit" className={styles.saveButton}>Save Changes</button>
46 |                 </div>
47 |             </form>
48 |         </div>
49 |     );
50 | };


--------------------------------------------------------------------------------
/src/pages/HomePage.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | import { useNavigate } from 'react-router-dom';
 3 | import RoadmapApi from '../services/RoadmapAPI.js';
 4 | import TrendingFields from '../components/TrendingFields.jsx';
 5 | import Roadmap from '../components/Roadmap.jsx';
 6 | import { getQuoteImgs as QuoteImg } from '../services/quotes.js';
 7 | import QuoteImage from '../components/ImageQuote.jsx';
 8 | import Footer from '../components/Footer.jsx';
 9 | 
10 | function HomePage({ setIsChatbotOpen }) {
11 |     const navigate = useNavigate();
12 |     const [roadmaps, setRoadmaps] = useState([]);
13 |     const [trendTopics, setTrendTopics] = useState([]);
14 |     const [imgs, setImgs] = useState([]);
15 | 
16 |     useEffect(() => {
17 |         RoadmapApi.getAllRoadmap()
18 |             .then(response => {
19 |                 console.log(response);
20 |                 setRoadmaps(response);
21 |             })
22 |             .catch(error => {
23 |                 console.log(error);
24 |             });
25 | 
26 |         //get triend topics 
27 |         RoadmapApi.mostPopularTopics()
28 |             .then(response => {
29 |                 console.log("popular topics");
30 |                 console.log(response);
31 |                 setTrendTopics(response);
32 |             })
33 |             .catch(error => {
34 |                 console.log(error);
35 |             });
36 |     }, []);
37 | 
38 |     // call the QuoteImg function to get a random quote image
39 |     useEffect(() => {
40 |         QuoteImg().then(response => {
41 |             setImgs(response);
42 |         }).catch(error => {
43 |             console.log(error);
44 |         });
45 |     }, []);
46 | 
47 |     return (
48 |         <main>
49 |             <TrendingFields chatBotClick={() => {
50 |                 setIsChatbotOpen(true);
51 |                 navigate('/chatbot')
52 |             }
53 |             } trendTopics={trendTopics} />
54 |             <Roadmap
55 |                 roadmaps={roadmaps}
56 |                 allRoadmapClick={() => navigate('/roadmap')}
57 |                 roadmapClick={(roadmapId) => navigate(`/roadmap/${roadmapId}`)}
58 |             />
59 |             <QuoteImage imgs={imgs} />
60 |             <Footer />
61 |         </main>
62 |     );
63 | }
64 | 
65 | export default HomePage;


--------------------------------------------------------------------------------
/src/services/AuthApi.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | const API_URL = import.meta.env.VITE_BASE_URL;
 4 | axios.defaults.baseURL = API_URL;
 5 | axios.defaults.headers.post['Content-Type'] = 'application/json';
 6 | 
 7 | //TODO: forgot password, reset password
 8 | 
 9 | const login = async (email, password) => {
10 |     const response = await axios.post('/api/auth/login', {
11 |         email: email, password: password
12 |     });
13 | 
14 |     if (response.data.status === false) {
15 |         console.log(response.data);
16 |         throw new Error(response.data.message);
17 |     }
18 | 
19 |     console.log(response.data);
20 |     return response.data;
21 | };
22 | 
23 | const register = async (userName, Name, email, password) => {
24 |     const response = await axios.post('/api/auth/register',
25 |         { email: email, userName: userName, name: Name, password: password });
26 | 
27 |     if (response.data.status == false) {
28 |         console.log(response.data);
29 |         throw new Error(response.message);
30 |     }
31 | 
32 |     console.log(response.data);
33 |     return response.data;
34 | };
35 | 
36 | const myProfile = async (userId) => {
37 |     const response = await axios.get(`/api/user/profile/${userId}`);
38 | 
39 |     if (response.data.status === false) {
40 |         console.log(response.data);
41 |         throw new Error(response.data.message);
42 |     }
43 |     return response.data;
44 | };
45 | 
46 | const deleteAccount = async (userId) => {
47 |     const response = await axios.delete(`/api/user/${userId}`);
48 |     if (response.data.status === false) {
49 |         console.log(response.data);
50 |         throw new Error(response.data.message);
51 |     }
52 |     return response.data;
53 | }
54 | 
55 | const updateProfile = async (userId, updatedUser) => {
56 |     console.log(`Updating user profile for user: ${userId}`);
57 |     console.log(updatedUser);
58 |     const response = await axios.patch(`/api/user/profile/${userId}`,
59 |         {
60 |             name: updatedUser.name,
61 |             profilePicture: updatedUser.profilePicture
62 |         }
63 |     );
64 | 
65 |     console.log(response.data);
66 | 
67 |     if (response.data.status === false) {
68 |         console.log(response.data);
69 |         throw new Error(response.data.message);
70 |     }
71 |     return response.data;
72 | }
73 | 
74 | const AuthAPI = {
75 |     login,
76 |     register,
77 |     myProfile,
78 |     deleteAccount,
79 |     updateProfile
80 | };
81 | 
82 | export default AuthAPI;


--------------------------------------------------------------------------------
/src/services/RoadmapAPI.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import axios from 'axios';
 3 | 
 4 | const API_URL = import.meta.env.VITE_BASE_URL;
 5 | axios.defaults.baseURL = API_URL;
 6 | 
 7 | axios.defaults.headers.post['Content-Type'] = 'application/json';
 8 | 
 9 | const getAllRoadmap = async () => {
10 |     const response = await axios.get(`/api/roadmap`);
11 | 
12 |     if (response.data.status === false) {
13 |         console.log(response.data);
14 |         throw new Error(response.data.message);
15 |     }
16 |     return response.data.data;
17 | };
18 | 
19 | 
20 | const getRoadmap = async (roadmapId) => {
21 |     const response = await axios.get(`/api/roadmap/${roadmapId}`);
22 | 
23 |     if (response.data.status === false) {
24 |         console.log(response.data);
25 |         throw new Error(response.data.message);
26 |     }
27 | 
28 |     return response.data.data;
29 | };
30 | 
31 | 
32 | const mostPopularTopics = async () => {
33 |     const response = await axios.get(`/api/topic/popular`);
34 | 
35 |     if (response.data.status === false) {
36 |         console.log(response.data);
37 |         throw new Error(response.data.message);
38 |     }
39 |     return response.data.data;
40 | }
41 | 
42 | const setRoadmapToUser = async (roadmapId, userId) => {
43 |     const response = await axios.post(`/api/user/${userId}/roadmap/${roadmapId}`);
44 | 
45 |     if (response.data.status === false) {
46 |         console.log(response.data);
47 |         throw new Error(response.data.message);
48 |     }
49 |     console.log("set roadmap to user");
50 |     console.log(response);
51 |     return response.data.data;
52 | }
53 | 
54 | const isUserInRoadmap = async (roadmapId, userId) => {
55 |     const response = await axios.get(`/api/user/${userId}/roadmap/${roadmapId}`);
56 | 
57 |     if (response.data.status === false) {
58 |         console.log(response.data);
59 |         throw new Error(response.data.message);
60 |     }
61 |     return response.data.data.inRoadmap;
62 | }
63 | 
64 | const deleteRoadmapFromUser = async (roadmapId, userId) => {
65 |     const response = await axios.delete(`/api/user/${userId}/roadmap/${roadmapId}`);
66 | 
67 |     if (response.data.status === false) {
68 |         console.log(response.data);
69 |         throw new Error(response.data.message);
70 |     }
71 |     return response.data.data.success;
72 | }
73 | 
74 | const RoadmapApi = {
75 |     getAllRoadmap,
76 |     getRoadmap,
77 |     mostPopularTopics,
78 |     setRoadmapToUser,
79 |     isUserInRoadmap,
80 |     deleteRoadmapFromUser
81 | };
82 | 
83 | export default RoadmapApi;


--------------------------------------------------------------------------------
/src/pages/ProfilePage.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import AuthAPI from "../services/AuthApi";
 3 | import ProfileCard from "../components/ProfileCard";
 4 | import EditProfile from "../components/EditProfile";
 5 | 
 6 | function ProfilePage() {
 7 |     const [user, setUser] = useState(null);
 8 |     const [isEditing, setIsEditing] = useState(false);
 9 |     const [error, setError] = useState(null);
10 |     const [loading, setLoading] = useState(true);
11 | 
12 |     useEffect(() => {
13 |         const userId = localStorage.getItem("userID");
14 |         setError(null);
15 | 
16 |         // if not logged in, redirect to login page
17 |         if (!userId) {
18 |             window.location.href = "/auth";
19 |         }
20 | 
21 |         // if logged in, get user profile
22 |         setLoading(true);
23 |         AuthAPI.myProfile(userId)
24 |             .then((res) => {
25 |                 console.log(res.data);
26 |                 setUser(res.data);
27 |             })
28 |             .catch((err) => {
29 |                 console.log(err);
30 |                 setError(err.message);
31 |             }).finally(() => {
32 |                 setLoading(false);
33 |             });
34 |     }, []);
35 | 
36 |     const handleEditProfile = () => {
37 |         setIsEditing(true);
38 |     }
39 | 
40 |     const updateUserInfo = (updatedUser) => {
41 |         // reset 
42 |         setError(null);
43 |         setLoading(true);
44 | 
45 |         AuthAPI.updateProfile(user.id, updatedUser)
46 |             .then((res) => {
47 |                 // just reset the user  details not roadmaps
48 |                 console.log("updated user");
49 |                 console.log(res.data);
50 |                 const newUser = {
51 |                     ...user,
52 |                     name: res.data.name,
53 |                     email: res.data.email,
54 |                     userName: res.data.userName,
55 |                     role: res.data.role,
56 |                     profilePicture: res.data.profilePicture,
57 |                 }
58 | 
59 |                 setUser(newUser);
60 |                 setIsEditing(false);
61 |             })
62 |             .catch((err) => {
63 |                 console.log(err);
64 |                 setError(err.message);
65 |             }).finally(() => {
66 |                 setLoading(false);
67 |             });
68 |     }
69 | 
70 |     if (loading) return <p>Loading...</p>;
71 |     if (error) return <p>Error: {error}</p>;
72 |     if (!user) return <p>User not found.</p>;
73 | 
74 |     return (
75 |         !isEditing ?
76 |             <ProfileCard user={user} handleEditProfile={handleEditProfile} />
77 |             :
78 |             <EditProfile user={user} updateUserInfo={updateUserInfo} cancel={() => setIsEditing(false)} />
79 |     );
80 | };
81 | 
82 | export default ProfilePage;


--------------------------------------------------------------------------------
/src/components/SignIn.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from "../styles/Auth.module.css";
 3 | import { useState } from "react";
 4 | import AuthApi from "../services/AuthApi";
 5 | 
 6 | const SignIn = ({ setUserId }) => {
 7 |     const [email, setEmail] = useState("");
 8 |     const [password, setPassword] = useState("");
 9 |     const [loading, setLoading] = useState(false);
10 |     const [error, setError] = useState("");
11 | 
12 |     const handleSubmit = async (e) => {
13 |         e.preventDefault();
14 |         setError("");// => RESET ERROR
15 |         setLoading(true);
16 |         try {
17 |             const response = await AuthApi.login(email, password)
18 |             // if success, redirect to home page
19 |             console.log(" heere");
20 |             console.log(response);
21 |             if (response.status == true) {
22 |                 setUserId(response.data.id);
23 |                 window.location.href = "/";
24 |             }
25 |         } catch (error) {
26 |             console.log("Error heere");
27 |             console.log(error.message);
28 |             setError(error.message);
29 |         } finally {
30 |             setLoading(false);
31 |         }
32 |     };
33 | 
34 |     return (
35 |         <div className={styles.signContainer}>
36 |             <h1>Welcome back!</h1>
37 | 
38 |             <form className={styles.form} onSubmit={handleSubmit}>
39 |                 <div className={styles.inputGroup}>
40 |                     <label>Email</label>
41 |                     <input
42 |                         type="text"
43 |                         placeholder="Type your email"
44 |                         value={email}
45 |                         onChange={(e) => setEmail(e.target.value)}
46 |                         required
47 |                     />
48 |                 </div>
49 | 
50 |                 <div className={styles.inputGroup}>
51 |                     <label>Password</label>
52 |                     <input
53 |                         type="password"
54 |                         placeholder="Type your password"
55 |                         value={password}
56 |                         onChange={(e) => setPassword(e.target.value)}
57 |                         required
58 |                     />
59 |                     <a href="/forgot-password" className={styles.forgotPassword}>
60 |                         Forgot Password?
61 |                     </a>
62 |                 </div>
63 | 
64 |                 {error && <p className={styles.error}>{error}</p>}
65 | 
66 |                 <div className={styles.btnContainer}>
67 |                     <button type="submit" className={styles.signInButton} disabled={loading}>
68 |                         {loading ? "Signing In..." : "Sign In"}
69 |                     </button>
70 |                 </div>
71 |             </form >
72 |         </div >
73 |     );
74 | };
75 | 
76 | export default SignIn;


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/pages/RoadmapDetailsPage.jsx:
--------------------------------------------------------------------------------
  1 | import { useParams } from "react-router-dom"
  2 | import RoadmapApi from "../services/RoadmapAPI";
  3 | import { useEffect } from "react";
  4 | import { useState } from "react";
  5 | import styles from "../styles/RoadmapDetailsPage.module.css";
  6 | import Steps from "../components/Steps";
  7 | 
  8 | //TODO: check if user alread started this roadmap
  9 | //TODO: if yes display the last step completed
 10 | //TODO: if no show start now button
 11 | //TODO: let user mark step if done or not
 12 | 
 13 | export default function RoadmapDetailsPage() {
 14 |     const params = useParams();
 15 |     const roadmapId = params.roadmapId;
 16 |     const [roadmap, setRoadmap] = useState(null);
 17 |     const [steps, setSteps] = useState([]);
 18 |     const [inThisAlready, setInThisAlready] = useState(null);
 19 |     const [userId, setUserId] = useState(null);
 20 | 
 21 |     const [loading, setLoading] = useState(false);
 22 |     const [error, setError] = useState(null);
 23 | 
 24 |     useEffect(() => {
 25 |         setLoading(true);
 26 |         setError(null);
 27 | 
 28 |         RoadmapApi.getRoadmap(roadmapId)
 29 |             .then(data => {
 30 |                 if (data?.roadmap) {
 31 |                     setRoadmap(data.roadmap);
 32 |                     setSteps(data.steps || []);
 33 |                 }
 34 |             })
 35 |             .catch(error => {
 36 |                 setError(error);
 37 |             }).then(() => {
 38 |                 setLoading(false);
 39 |             });
 40 | 
 41 |         const userId = localStorage.getItem("userID");
 42 |         setUserId(userId);
 43 |         if (!userId) {
 44 |             setInThisAlready(false);
 45 |         }
 46 | 
 47 |         // show the button if not in this roadmap
 48 |         RoadmapApi.isUserInRoadmap(roadmapId, userId).then(data => {
 49 |             console.log("=========== is in roadmap ===========");
 50 |             console.log(data);
 51 |             setInThisAlready(data);
 52 |         }).catch(error => {
 53 |             console.error(error);
 54 |         });
 55 |     }, [roadmapId]);
 56 | 
 57 |     const handleStart = () => {
 58 |         if (!userId) {
 59 |             window.location.href = "/auth";
 60 |         }
 61 | 
 62 |         RoadmapApi.setRoadmapToUser(roadmapId, userId)
 63 |             .then(data => {
 64 |                 if (data?.success) {
 65 |                     setInThisAlready(true);
 66 |                 }
 67 |             }).catch(error => {
 68 |                 console.error(error);
 69 |             });
 70 |     };
 71 | 
 72 |     const handleDelete = () => {
 73 |         RoadmapApi.deleteRoadmapFromUser(roadmapId, userId)
 74 |             .then(isSuccess => {
 75 |                 console.log("=========== delete roadmap ===========");
 76 |                 console.log(isSuccess);
 77 |                 setInThisAlready(!isSuccess);
 78 |             }).catch(error => {
 79 |                 console.error(error);
 80 |             });
 81 |     };
 82 | 
 83 |     //handel status
 84 |     if (loading) return <p>Loading...</p>;
 85 |     if (error) return <p>Error: {error.message}</p>;
 86 |     if (!roadmap) return <p>No roadmap found.</p>;
 87 | 
 88 |     return (
 89 |         <div className={styles.container}>
 90 |             <div className={styles.headerContainer}>
 91 |                 <div>
 92 |                     <h2>{roadmap.title}</h2>
 93 |                     <p >{roadmap.description}</p>
 94 |                 </div>
 95 |                 {!inThisAlready && <button onClick={handleStart}>Start this roadmap</button>}
 96 |                 {inThisAlready && userId && <button className={styles.deleteBtn} onClick={handleDelete}>Delete</button>}
 97 |                 {/* TODO progress bar for the user show his progress in case he already in the roadmap. */}
 98 |             </div>
 99 | 
100 |             <div className={styles.roadmapInfo}>
101 |                 <p><strong>Total Steps:</strong> {roadmap.totalSteps}</p>
102 |                 <p><strong>Total Topics:</strong> {roadmap.totalTopics}</p>
103 |                 <p><strong>Last Updated:</strong> {new Date(roadmap.lastUpdated).toLocaleDateString()}</p>
104 |             </div>
105 | 
106 |             <Steps steps={steps} />
107 |         </div>
108 |     );
109 | };


--------------------------------------------------------------------------------
/src/styles/RoadmapDetailsPage.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |     width: 100%;
  3 |     height: 100vh;
  4 |     display: flex;
  5 |     flex-direction: column;
  6 | }
  7 | 
  8 | .headerContainer {
  9 |     display: flex;
 10 |     justify-content: space-between;
 11 |     align-items: center;
 12 |     margin-bottom: 20px;
 13 |     padding: 20px;
 14 | }
 15 | 
 16 | h2 {
 17 |     font-size: 28px;
 18 |     color: #20c060;
 19 |     margin-bottom: 10px;
 20 | }
 21 | 
 22 | p {
 23 |     font-size: 18px;
 24 |     color: #b6c0c5;
 25 |     margin-bottom: 20px;
 26 | }
 27 | 
 28 | button {
 29 |     display: inline-block;
 30 |     padding: 10px 20px;
 31 |     font-size: 16px;
 32 |     color: white;
 33 |     background-color: #28a745;
 34 |     border: none;
 35 |     border-radius: 5px;
 36 |     cursor: pointer;
 37 | }
 38 | 
 39 | button:hover {
 40 |     background-color: #218838;
 41 | }
 42 | 
 43 | .roadmapInfo {
 44 |     margin: 0 20px 0 20px;
 45 |     padding: 15px;
 46 |     background: #e3eaf5;
 47 |     border-left: 5px solid #4a90e2;
 48 |     border-radius: 5px;
 49 | }
 50 | 
 51 | .roadmapInfo p {
 52 |     margin: 5px 0;
 53 |     font-size: 16px;
 54 |     color: #333;
 55 | }
 56 | 
 57 | /********** Step component ****************/
 58 | .mainStepContainer {
 59 |     width: 100%;
 60 |     height: 100%;
 61 | }
 62 | 
 63 | .stepsContainer {
 64 |     width: 100%;
 65 |     display: flex;
 66 |     flex-direction: column;
 67 |     max-width: 800px;
 68 |     margin: 0 auto;
 69 |     padding: 2rem;
 70 | }
 71 | 
 72 | .stepsTitle {
 73 |     font-size: 2rem;
 74 |     color: #b6c0c5;
 75 |     margin-bottom: 2rem;
 76 |     text-align: center;
 77 |     position: relative;
 78 |     padding-bottom: 0.5rem;
 79 | }
 80 | 
 81 | .stepsTitle::after {
 82 |     content: '';
 83 |     position: absolute;
 84 |     bottom: 0;
 85 |     left: 50%;
 86 |     transform: translateX(-50%);
 87 |     width: 80px;
 88 |     height: 4px;
 89 |     background: linear-gradient(90deg, #3498db, #9b59b6);
 90 |     border-radius: 2px;
 91 | }
 92 | 
 93 | .stepsList {
 94 |     list-style: none;
 95 |     padding: 0;
 96 |     counter-reset: step-counter;
 97 | }
 98 | 
 99 | .stepItem {
100 |     position: relative;
101 |     background: #dfe5e8;
102 |     padding: 1.5rem;
103 |     margin-bottom: 1.5rem;
104 |     border-radius: 8px;
105 |     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
106 |     counter-increment: step-counter;
107 | }
108 | 
109 | .stepItem:hover {
110 |     transform: translateY(-3px);
111 |     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
112 | }
113 | 
114 | .stepItem::before {
115 |     content: counter(step-counter);
116 |     position: absolute;
117 |     top: -15px;
118 |     left: -15px;
119 |     width: 40px;
120 |     height: 40px;
121 |     background: linear-gradient(135deg, #3498db, #9b59b6);
122 |     color: white;
123 |     border-radius: 50%;
124 |     display: flex;
125 |     align-items: center;
126 |     justify-content: center;
127 |     font-weight: bold;
128 |     font-size: 1.2rem;
129 |     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
130 | }
131 | 
132 | .stepHeader {
133 |     margin-bottom: 1rem;
134 |     display: flex;
135 |     align-items: center;
136 |     gap: 1rem;
137 | }
138 | 
139 | .stepNumber {
140 |     background: #f0f8ff;
141 |     color: #2980b9;
142 |     padding: 0.3rem 0.8rem;
143 |     border-radius: 20px;
144 |     font-weight: bold;
145 |     font-size: 0.9rem;
146 | }
147 | 
148 | .stepTitle {
149 |     margin: 0;
150 |     color: #2c3e50;
151 |     font-size: 1.3rem;
152 | }
153 | 
154 | .topicInfo {
155 |     background: #f9f9f9;
156 |     padding: 1rem;
157 |     border-radius: 6px;
158 |     border-left: 4px solid #9b59b6;
159 | }
160 | 
161 | .topicLabel {
162 |     font-weight: bold;
163 |     color: #8e44ad;
164 |     margin-right: 0.5rem;
165 | }
166 | 
167 | .topicTitle {
168 |     color: #2c3e50;
169 |     font-weight: 500;
170 | }
171 | 
172 | .topicDescription {
173 |     color: #555;
174 |     margin: 0.5rem 0;
175 |     line-height: 1.5;
176 | }
177 | 
178 | .topicType {
179 |     display: inline-block;
180 |     background: #e0e0e0;
181 |     color: #555;
182 |     padding: 0.2rem 0.5rem;
183 |     border-radius: 4px;
184 |     font-size: 0.8rem;
185 |     text-transform: uppercase;
186 | }
187 | 
188 | .deleteBtn {
189 |     background: #e74c3c;
190 |     color: white;
191 |     padding: 0.5rem 1rem;
192 |     border: none;
193 |     border-radius: 4px;
194 |     cursor: pointer;
195 | }


--------------------------------------------------------------------------------
/src/components/SignUp.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { useState } from "react";
  3 | import styles from "../styles/Auth.module.css";
  4 | import AuthApi from "../services/AuthApi";
  5 | 
  6 | //TODO: cheeck if usename is already taken
  7 | 
  8 | const SignUp = ({ setUserId }) => {
  9 |     const [email, setEmail] = useState("");
 10 |     const [userName, setUserName] = useState("");
 11 |     const [name, setName] = useState("");
 12 |     const [password, setPassword] = useState("");
 13 |     const [confirmPassword, setConfirmPassword] = useState("");
 14 | 
 15 |     const [loading, setLoading] = useState(false);
 16 |     const [error, setError] = useState("");
 17 | 
 18 |     const handleSubmit = async (e) => {
 19 |         e.preventDefault();
 20 | 
 21 |         setError("");// => RESET ERROR
 22 |         setLoading(true);
 23 | 
 24 |         try {
 25 |             const response = await AuthApi.register(userName, name, email, password);
 26 |             // if success, redirect to home page
 27 |             console.log(response);
 28 |             if (response.status == true) {
 29 |                 setUserId(response.data.id);
 30 |                 window.location.href = "/";
 31 |             }
 32 |         }
 33 |         catch (error) {
 34 |             setError(error.message);
 35 |         }
 36 |         finally {
 37 |             setLoading(false);
 38 |         }
 39 |     };
 40 | 
 41 | 
 42 |     return (
 43 |         <div className={styles.signContainer}>
 44 |             <h1>Create your account</h1>
 45 | 
 46 |             <form className={styles.form} onSubmit={handleSubmit}>
 47 |                 <div className={styles.inputGroup}>
 48 |                     <label>Full name</label>
 49 |                     <input
 50 |                         type="text"
 51 |                         placeholder="Enter your name"
 52 |                         value={name}
 53 |                         onChange={(e) => setName(e.target.value)}
 54 |                         required
 55 |                     />
 56 |                 </div>
 57 | 
 58 |                 <div className={styles.inputGroup}>
 59 |                     <label>Username</label>
 60 |                     <input
 61 |                         type="text"
 62 |                         placeholder="Enter your Username"
 63 |                         value={userName}
 64 |                         onChange={(e) => setUserName(e.target.value)}
 65 |                         required
 66 |                     />
 67 |                 </div>
 68 | 
 69 |                 <div className={styles.inputGroup}>
 70 |                     <label>Email</label>
 71 |                     <input
 72 |                         type="email"
 73 |                         placeholder="Type your e-mail"
 74 |                         value={email}
 75 |                         onChange={(e) => setEmail(e.target.value)}
 76 |                         required
 77 |                     />
 78 |                 </div>
 79 | 
 80 |                 <div className={styles.inputGroup}>
 81 |                     <label>Password</label>
 82 |                     <input
 83 |                         type="password"
 84 |                         placeholder="Type your password"
 85 |                         value={password}
 86 |                         onChange={(e) => setPassword(e.target.value)}
 87 |                         required
 88 |                     />
 89 |                 </div>
 90 | 
 91 |                 <div className={styles.inputGroup}>
 92 |                     <label>Confirm Password</label>
 93 |                     <input
 94 |                         type="password"
 95 |                         placeholder="Type your password again to confirm"
 96 |                         value={confirmPassword}
 97 |                         onChange={(e) => setConfirmPassword(e.target.value)}
 98 |                         required
 99 |                     />
100 |                 </div>
101 | 
102 |                 {error && <p className={styles.error}>{error}</p>}
103 |                 {password !== confirmPassword && <p className={styles.error}>Passwords do not match</p>}
104 | 
105 |                 <div className={styles.btnContainer}>
106 |                     <button type="submit" className={styles.signInButton} disabled={loading}>
107 |                         {loading ? "Signing Up..." : "Sign Up"}
108 |                     </button>
109 |                 </div>
110 |             </form>
111 |         </div>
112 |     );
113 | };
114 | 
115 | export default SignUp;


--------------------------------------------------------------------------------
/src/styles/ChatBot.module.css:
--------------------------------------------------------------------------------
  1 | .mainContainer {
  2 |     display: flex;
  3 |     background: #061621;
  4 |     color: #b6c0c5;
  5 |     height: 100vh;
  6 | }
  7 | 
  8 | .sidebar {
  9 |     width: 300px;
 10 |     background: rgba(255, 255, 255, 0.05);
 11 |     border-right: 1px solid rgba(255, 255, 255, 0.1);
 12 |     display: flex;
 13 |     flex-direction: column;
 14 |     padding: 1.5rem;
 15 | }
 16 | 
 17 | .sidebarHeader {
 18 |     display: flex;
 19 |     justify-content: space-between;
 20 |     align-items: center;
 21 |     margin-bottom: 1.5rem;
 22 |     padding-bottom: 1rem;
 23 |     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 24 | }
 25 | 
 26 | .title {
 27 |     font-size: 1.2rem;
 28 |     font-weight: 600;
 29 |     color: #3498db;
 30 |     margin: 0;
 31 | }
 32 | 
 33 | .iconsContainer {
 34 |     display: flex;
 35 |     gap: 1rem;
 36 | }
 37 | 
 38 | .icon {
 39 |     font-size: 1.2rem;
 40 |     color: #b6c0c5;
 41 |     cursor: pointer;
 42 |     transition: color 0.3s ease;
 43 | }
 44 | 
 45 | .newChatIcon:hover {
 46 |     color: #3498db;
 47 | }
 48 | 
 49 | .chatsList {
 50 |     flex: 1;
 51 |     overflow-y: auto;
 52 |     margin-bottom: 1rem;
 53 | }
 54 | 
 55 | .chatItem {
 56 |     padding: 0.8rem;
 57 |     margin-bottom: 0.5rem;
 58 |     border-radius: 6px;
 59 |     cursor: pointer;
 60 |     display: flex;
 61 |     justify-content: space-between;
 62 |     align-items: center;
 63 |     transition: all 0.3s ease;
 64 | }
 65 | 
 66 | .chatItem:hover {
 67 |     background: rgba(255, 255, 255, 0.1);
 68 | }
 69 | 
 70 | .activeChat {
 71 |     background: rgba(52, 152, 219, 0.2);
 72 |     border-left: 3px solid #3498db;
 73 | }
 74 | 
 75 | .chatTitle {
 76 |     white-space: nowrap;
 77 |     overflow: hidden;
 78 |     text-overflow: ellipsis;
 79 |     flex: 1;
 80 | }
 81 | 
 82 | .deleteButton {
 83 |     background: none;
 84 |     border: none;
 85 |     color: #d9534f;
 86 |     font-size: 1.2rem;
 87 |     cursor: pointer;
 88 |     padding: 0 0.5rem;
 89 | }
 90 | 
 91 | .deleteButton:hover {
 92 |     color: #c9302c;
 93 | }
 94 | 
 95 | .userInfo {
 96 |     display: flex;
 97 |     align-items: center;
 98 |     gap: 0.8rem;
 99 |     padding-top: 1rem;
100 |     border-top: 1px solid rgba(255, 255, 255, 0.1);
101 |     margin-top: auto;
102 | }
103 | 
104 | .userIcon {
105 |     font-size: 1.8rem;
106 |     border: 1px solid #b6c0c5;
107 |     border-radius: 50%;
108 |     padding: 0.3rem;
109 | }
110 | 
111 | .userName {
112 |     font-size: 1rem;
113 |     color: #3498db;
114 |     margin: 0;
115 | }
116 | 
117 | .chatContainer {
118 |     flex: 1;
119 |     display: flex;
120 |     flex-direction: column;
121 |     background: rgba(255, 255, 255, 0.03);
122 | }
123 | 
124 | .chatHeader {
125 |     font-size: 1.2rem;
126 |     font-weight: 600;
127 |     color: #3498db;
128 |     padding: 1rem;
129 |     background: rgba(255, 255, 255, 0.05);
130 |     margin: 0;
131 |     text-align: center;
132 | }
133 | 
134 | .messagesContainer {
135 |     flex: 1;
136 |     padding: 1.5rem;
137 |     overflow-y: auto;
138 | }
139 | 
140 | .message {
141 |     display: flex;
142 |     align-items: flex-start;
143 |     margin-bottom: 1.5rem;
144 |     gap: 1rem;
145 | }
146 | 
147 | .messageIcon {
148 |     font-size: 1.5rem;
149 |     margin-top: 20px;
150 | }
151 | 
152 | .messageContent {
153 |     background: rgba(255, 255, 255, 0.05);
154 |     padding: 1rem;
155 |     border-radius: 8px;
156 |     border-left: 3px solid #3498db;
157 |     flex: 1;
158 | }
159 | 
160 | .messageContentRight {
161 |     background: rgba(255, 255, 255, 0.05);
162 |     padding: 1rem;
163 |     border-radius: 8px;
164 |     border-right: 3px solid #3498db;
165 |     flex: 1;
166 | }
167 | 
168 | .inputForm {
169 |     display: flex;
170 |     gap: 1rem;
171 |     padding: 1rem;
172 |     background: rgba(255, 255, 255, 0.05);
173 |     margin-top: auto;
174 | }
175 | 
176 | .promptInput {
177 |     flex: 1;
178 |     padding: 0.8rem 1rem;
179 |     border: 1px solid rgba(255, 255, 255, 0.1);
180 |     border-radius: 6px;
181 |     background: rgba(255, 255, 255, 0.05);
182 |     color: #fff;
183 |     font-size: 1rem;
184 | }
185 | 
186 | .promptInput:focus {
187 |     outline: none;
188 |     border-color: #3498db;
189 | }
190 | 
191 | .submitButton {
192 |     padding: 0 1.5rem;
193 |     background: #3498db;
194 |     color: white;
195 |     border: none;
196 |     border-radius: 6px;
197 |     cursor: pointer;
198 |     font-weight: 500;
199 |     transition: background 0.3s ease;
200 | }
201 | 
202 | .submitButton:hover {
203 |     background: #2980b9;
204 | }
205 | 
206 | .disclaimer {
207 |     text-align: center;
208 |     font-size: 0.8rem;
209 |     color: rgba(182, 192, 197, 0.6);
210 |     padding: 0.5rem;
211 |     background: rgba(255, 255, 255, 0.03);
212 | }


--------------------------------------------------------------------------------
/src/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .navbar {
  2 |     padding: 15px 20px;
  3 |     display: flex;
  4 |     align-items: center;
  5 |     border-bottom: 2px solid #64849c;
  6 | }
  7 | 
  8 | .logo {
  9 |     width: 60px;
 10 |     height: auto;
 11 | }
 12 | 
 13 | .navbar ul {
 14 |     list-style: none;
 15 |     display: flex;
 16 |     gap: 20px;
 17 |     margin: 0;
 18 |     padding: 0;
 19 |     width: 100%;
 20 |     align-items: center;
 21 | }
 22 | 
 23 | .navbar li {
 24 |     display: inline;
 25 | }
 26 | 
 27 | .navbar a {
 28 |     text-decoration: none;
 29 |     color: #5eade1;
 30 |     font-weight: bold;
 31 |     font-size: 18px;
 32 | }
 33 | 
 34 | .navbar a:hover {
 35 |     color: #b4d3e8;
 36 | }
 37 | 
 38 | .auth {
 39 |     margin-left: auto;
 40 | }
 41 | 
 42 | /**********  Trending fields  *************/
 43 | .container {
 44 |     display: flex;
 45 |     flex-direction: column;
 46 |     align-items: center;
 47 |     background-color: #516773;
 48 |     color: #041323;
 49 |     height: 50%;
 50 |     justify-content: center;
 51 |     padding: 20px;
 52 | }
 53 | 
 54 | .subtitle {
 55 |     font-size: 2rem;
 56 |     color: #f3fbff;
 57 |     margin-bottom: 2rem;
 58 |     text-align: center;
 59 |     position: relative;
 60 |     padding-bottom: 0.5rem;
 61 | }
 62 | 
 63 | .subtitle:after {
 64 |     content: '';
 65 |     position: absolute;
 66 |     bottom: 0;
 67 |     left: 50%;
 68 |     transform: translateX(-50%);
 69 |     width: 600px;
 70 |     height: 4px;
 71 |     background: linear-gradient(90deg, #3498db, #9b59b6);
 72 |     border-radius: 2px;
 73 | }
 74 | 
 75 | .chatButton {
 76 |     background-color: white;
 77 |     color: black;
 78 |     padding: 10px 20px;
 79 |     border: none;
 80 |     cursor: pointer;
 81 |     font-size: 16px;
 82 |     border-radius: 5px;
 83 |     margin-bottom: 30px;
 84 | }
 85 | 
 86 | .chatButton:hover {
 87 |     background-color: #e0e0e0;
 88 | }
 89 | 
 90 | .heading {
 91 |     font-size: 24px;
 92 |     margin-bottom: 20px;
 93 | }
 94 | 
 95 | .trendTopicContainer {
 96 |     display: flex;
 97 |     gap: 20px;
 98 | }
 99 | 
100 | .trendTopic {
101 |     padding: 10px 20px;
102 |     border-radius: 5px;
103 |     background-color: #64849c;
104 |     color: white;
105 |     cursor: pointer;
106 | }
107 | 
108 | .circle {
109 |     width: 60px;
110 |     height: 60px;
111 |     background-color: white;
112 |     border-radius: 50%;
113 | }
114 | 
115 | /************* Roadmap component  ****************/
116 | .mainContainer {
117 |     width: 100%;
118 |     height: 100%;
119 |     display: flex;
120 |     flex-direction: column;
121 |     padding: 2rem;
122 | }
123 | 
124 | .roadmapContainer {
125 |     width: 100%;
126 |     display: flex;
127 |     flex-direction: column;
128 |     max-width: 800px;
129 |     margin: 0 auto;
130 |     padding: 2rem;
131 | }
132 | 
133 | .header {
134 |     display: flex;
135 |     justify-content: center;
136 |     align-items: center;
137 |     margin-bottom: 2rem;
138 | }
139 | 
140 | .stepsTitle {
141 |     font-size: 2rem;
142 |     color: #b6c0c5;
143 |     margin: 0;
144 |     position: relative;
145 |     padding-bottom: 0.5rem;
146 | }
147 | 
148 | .stepsTitle:after {
149 |     content: '';
150 |     position: absolute;
151 |     bottom: 0;
152 |     left: 0;
153 |     width: 150px;
154 |     height: 4px;
155 |     background: linear-gradient(90deg, #3498db, #9b59b6);
156 |     border-radius: 2px;
157 | }
158 | 
159 | .viewAllButton {
160 |     width: 120px;
161 |     padding: 0.6rem 1.2rem;
162 |     background: #3498db;
163 |     color: white;
164 |     border: none;
165 |     border-radius: 5px;
166 |     font-weight: bold;
167 |     cursor: pointer;
168 |     transition: all 0.3s ease;
169 | }
170 | 
171 | .viewAllButton:hover {
172 |     background: #2980b9;
173 |     transform: translateY(-2px);
174 | }
175 | 
176 | /* Roadmap List Styles */
177 | .roadmapContainer {
178 |     display: flex;
179 |     flex-direction: column;
180 |     gap: 2rem;
181 | }
182 | 
183 | .roadmapListContainer {
184 |     display: flex;
185 |     flex-direction: flex-start;
186 |     flex-wrap: wrap;
187 |     gap: 1rem;
188 | }
189 | 
190 | .roadmapItem {
191 |     background: #dfe5e8;
192 |     padding: 1.5rem;
193 |     border-radius: 8px;
194 |     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
195 |     cursor: pointer;
196 | }
197 | 
198 | .roadmapTitle {
199 |     margin: 0;
200 |     color: #2c3e50;
201 |     font-size: 1.3rem;
202 | }
203 | 
204 | .roadmapDescription {
205 |     color: #555;
206 |     margin: 0 0 0.5rem 0;
207 |     line-height: 1.5;
208 | }
209 | 
210 | /*********** Image component ***************/
211 | /* make the imge full width */
212 | .quoteImageContainer {
213 |     display: flex;
214 |     flex-direction: row;
215 |     align-items: center;
216 | }
217 | 
218 | .quoteImageContainer img {
219 |     width: 500%;
220 |     height: 300px;
221 |     border-radius: 8px;
222 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
223 | }
224 | 
225 | 
226 | .moreRoadmap {
227 |     background: #3d687d;
228 |     padding: 1.5rem;
229 |     border-radius: 8px;
230 |     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
231 |     cursor: pointer;
232 |     display: flex;
233 |     flex-direction: column;
234 |     justify-content: center;
235 | }
236 | 
237 | .more {
238 |     color: #f3fbff;
239 |     font-size: 1.3rem;
240 |     margin: 0;
241 |     font-size: 1.3rem;
242 |     font-weight: bolder;
243 |     font-style: italic;
244 | }


--------------------------------------------------------------------------------
/src/styles/Profile.module.css:
--------------------------------------------------------------------------------
  1 | /*********** Edit Profile  **********/
  2 | .editContainer {
  3 |     max-width: 400px;
  4 |     margin: 40px auto;
  5 |     padding: 20px;
  6 |     background: #fff;
  7 |     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  8 |     border-radius: 8px;
  9 |     text-align: center;
 10 | }
 11 | 
 12 | h1 {
 13 |     font-size: 22px;
 14 |     margin-bottom: 20px;
 15 | }
 16 | 
 17 | .profileImgSection {
 18 |     display: flex;
 19 |     flex-direction: column;
 20 |     align-items: center;
 21 |     margin-bottom: 20px;
 22 | }
 23 | 
 24 | .profilePreview {
 25 |     width: 100px;
 26 |     height: 100px;
 27 |     border-radius: 50%;
 28 |     border: 2px solid #ddd;
 29 |     margin-bottom: 10px;
 30 | }
 31 | 
 32 | .inputGroup {
 33 |     margin-bottom: 15px;
 34 |     text-align: left;
 35 | }
 36 | 
 37 | .inputGroup label {
 38 |     display: block;
 39 |     font-weight: bold;
 40 |     margin-bottom: 5px;
 41 | }
 42 | 
 43 | .inputGroup input,
 44 | .profileImgSection input {
 45 |     width: 100%;
 46 |     padding: 8px;
 47 |     font-size: 16px;
 48 |     border: 1px solid #ccc;
 49 |     border-radius: 5px;
 50 | }
 51 | 
 52 | .saveButton:hover {
 53 |     background: #0056b3;
 54 | }
 55 | 
 56 | .buttonGroup {
 57 |     display: flex;
 58 |     justify-content: center;
 59 |     gap: 10px;
 60 | }
 61 | 
 62 | 
 63 | /********* Profile card **************/
 64 | .mainContainer {
 65 |     width: 100%;
 66 |     height: 100%;
 67 | }
 68 | 
 69 | .profileContainer {
 70 |     width: 100%;
 71 |     display: flex;
 72 |     flex-direction: column;
 73 |     max-width: 800px;
 74 |     margin: 0 auto;
 75 |     padding: 2rem;
 76 | }
 77 | 
 78 | .stepsTitle {
 79 |     font-size: 2rem;
 80 |     color: #b6c0c5;
 81 |     margin-bottom: 2rem;
 82 |     text-align: center;
 83 |     position: relative;
 84 |     padding-bottom: 0.5rem;
 85 | }
 86 | 
 87 | .stepsTitle::after {
 88 |     content: '';
 89 |     position: absolute;
 90 |     bottom: 0;
 91 |     left: 50%;
 92 |     transform: translateX(-50%);
 93 |     width: 100px;
 94 |     height: 4px;
 95 |     background: linear-gradient(90deg, #3498db, #9b59b6);
 96 |     border-radius: 2px;
 97 | }
 98 | 
 99 | .profileSection {
100 |     display: flex;
101 |     gap: 2rem;
102 |     align-items: center;
103 |     background: #dfe5e8;
104 |     padding: 1.5rem;
105 |     border-radius: 8px;
106 |     margin-bottom: 2rem;
107 |     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
108 | }
109 | 
110 | .avatarContainer {
111 |     position: relative;
112 | }
113 | 
114 | .profilePicture {
115 |     width: 120px;
116 |     height: 120px;
117 |     border-radius: 50%;
118 |     object-fit: cover;
119 |     border: 5px solid transparent;
120 |     background:
121 |         linear-gradient(#dfe5e8, #dfe5e8) padding-box,
122 |         linear-gradient(135deg, #3498db, #9b59b6) border-box;
123 | }
124 | 
125 | .profileDetails {
126 |     flex-grow: 1;
127 |     display: flex;
128 |     flex-direction: column;
129 |     gap: 0.8rem;
130 | }
131 | 
132 | .detailItem {
133 |     display: flex;
134 |     gap: 0.5rem;
135 | }
136 | 
137 | .detailLabel {
138 |     font-weight: bold;
139 |     color: #2c3e50;
140 | }
141 | 
142 | .detailValue {
143 |     color: #2c3e50;
144 | }
145 | 
146 | .role {
147 |     display: inline-block;
148 |     background: #e0e0e0;
149 |     color: #555;
150 |     padding: 0.2rem 0.5rem;
151 |     border-radius: 4px;
152 |     font-size: 0.8rem;
153 |     text-transform: uppercase;
154 | }
155 | 
156 | /* Progress/Roadmap Section */
157 | .progressContainer {
158 |     margin-bottom: 2rem;
159 | }
160 | 
161 | .stepsList {
162 |     list-style: none;
163 |     padding: 0;
164 |     counter-reset: step-counter;
165 | }
166 | 
167 | .stepItem {
168 |     position: relative;
169 |     background: #dfe5e8;
170 |     padding: 1.5rem;
171 |     margin-bottom: 1.5rem;
172 |     border-radius: 8px;
173 |     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
174 |     counter-increment: step-counter;
175 | }
176 | 
177 | 
178 | .stepHeader {
179 |     margin-bottom: 1rem;
180 |     display: flex;
181 |     align-items: center;
182 |     gap: 1rem;
183 | }
184 | 
185 | .stepNumber {
186 |     background: #f0f8ff;
187 |     color: #2980b9;
188 |     padding: 0.3rem 0.8rem;
189 |     border-radius: 20px;
190 |     font-weight: bold;
191 |     font-size: 0.9rem;
192 | }
193 | 
194 | .stepTitle {
195 |     margin: 0;
196 |     color: #2c3e50;
197 |     font-size: 1.3rem;
198 | }
199 | 
200 | .topicInfo {
201 |     background: #f9f9f9;
202 |     padding: 1rem;
203 |     border-radius: 6px;
204 |     border-left: 4px solid #9b59b6;
205 | }
206 | 
207 | .infoRow {
208 |     margin-bottom: 0.5rem;
209 | }
210 | 
211 | .topicLabel {
212 |     font-weight: bold;
213 |     color: #8e44ad;
214 |     margin-right: 0.5rem;
215 | }
216 | 
217 | .topicTitle,
218 | .topicDescription,
219 | .topicType {
220 |     color: #2c3e50;
221 | }
222 | 
223 | .actionButtons {
224 |     display: flex;
225 |     justify-content: center;
226 |     gap: 1rem;
227 |     margin-top: 2rem;
228 | }
229 | 
230 | .editButton,
231 | .logoutButton,
232 | .deleteButton {
233 |     padding: 0.8rem 1.5rem;
234 |     border: none;
235 |     border-radius: 5px;
236 |     font-weight: bold;
237 |     cursor: pointer;
238 |     transition: all 0.3s ease;
239 | }
240 | 
241 | .editButton {
242 |     background: #3498db;
243 |     color: white;
244 | }
245 | 
246 | .editButton:hover {
247 |     background: #2980b9;
248 | }
249 | 
250 | .logoutButton {
251 |     background: #207180;
252 |     color: white;
253 | }
254 | 
255 | .logoutButton:hover {
256 |     background: #1a5f6b;
257 | }
258 | 
259 | .deleteButton {
260 |     background: #d9534f;
261 |     color: white;
262 | }
263 | 
264 | .deleteButton:hover {
265 |     background: #c9302c;
266 | }


--------------------------------------------------------------------------------
/src/components/ProfileCard.jsx:
--------------------------------------------------------------------------------
  1 | import styles from "../styles/Profile.module.css";
  2 | import AuthAPI from "../services/AuthApi";
  3 | 
  4 | export default function ProfileCard({ user, handleEditProfile }) {
  5 | 
  6 |     const handleLogout = () => {
  7 |         localStorage.removeItem("userID");
  8 |         window.location.href = "/auth";
  9 |     }
 10 | 
 11 |     const handleDeleteAccount = () => {
 12 |         localStorage.removeItem("userID");
 13 |         AuthAPI.deleteAccount(user.id);
 14 |         window.location.href = "/auth";
 15 |     }
 16 | 
 17 |     const calculateCompletion = (roadmap) => {
 18 |         if (roadmap.totalSteps === 0) {
 19 |             return 0;
 20 |         } else {
 21 |             return Math.round((roadmap.completedCount / roadmap.totalSteps) * 100);
 22 |         }
 23 |     }
 24 | 
 25 |     return (
 26 |         <div className={styles.mainContainer}>
 27 |             <div className={styles.profileContainer}>
 28 |                 <h2 className={styles.stepsTitle}>Profile</h2>
 29 | 
 30 |                 <div className={styles.profileSection}>
 31 |                     <div className={styles.avatarContainer}>
 32 |                         <img
 33 |                             className={styles.profilePicture}
 34 |                             src={user.profilePicture || "https://via.placeholder.com/150"}
 35 |                             alt={user.name}
 36 |                         />
 37 |                     </div>
 38 |                     <div className={styles.profileDetails}>
 39 |                         <div className={styles.detailItem}>
 40 |                             <span className={styles.detailLabel}>Name:</span>
 41 |                             <span className={styles.detailValue}>{user.name}</span>
 42 |                         </div>
 43 |                         <div className={styles.detailItem}>
 44 |                             <span className={styles.detailLabel}>Username:</span>
 45 |                             <span className={styles.detailValue}>@{user.userName}</span>
 46 |                         </div>
 47 |                         <div className={styles.detailItem}>
 48 |                             <span className={styles.detailLabel}>Email:</span>
 49 |                             <span className={styles.detailValue}>{user.email}</span>
 50 |                         </div>
 51 |                         <div className={styles.detailItem}>
 52 |                             <span className={styles.detailLabel}>Role:</span>
 53 |                             <span className={styles.role}>{user.role}</span>
 54 |                         </div>
 55 |                     </div>
 56 |                 </div>
 57 | 
 58 |                 {user.roadmaps && user.roadmaps.length > 0 && (
 59 |                     <div className={styles.progressContainer}>
 60 |                         <h2 className={styles.stepsTitle}>My Roadmaps</h2>
 61 |                         <ol className={styles.stepsList}>
 62 |                             {user.roadmaps.map((roadmap) => (
 63 |                                 <li key={roadmap.id} className={styles.stepItem}>
 64 |                                     <div className={styles.stepHeader}>
 65 |                                         <span className={styles.stepNumber}>Roadmap</span>
 66 |                                         <h3 className={styles.stepTitle}>{roadmap.title}</h3>
 67 |                                     </div>
 68 |                                     <div className={styles.topicInfo}>
 69 |                                         <div className={styles.infoRow}>
 70 |                                             <span className={styles.topicLabel}>Description:</span>
 71 |                                             <span className={styles.topicTitle}>{roadmap.description}</span>
 72 |                                         </div>
 73 |                                         {roadmap.currentStep && (
 74 |                                             <div className={styles.infoRow}>
 75 |                                                 <span className={styles.topicLabel}>Current Step:</span>
 76 |                                                 <span className={styles.topicTitle}>
 77 |                                                     {roadmap.currentStep.order}. {roadmap.currentStep.title}
 78 |                                                 </span>
 79 |                                             </div>
 80 |                                         )}
 81 |                                         <div className={styles.infoRow}>
 82 |                                             <span className={styles.topicLabel}>Progress:</span>
 83 |                                             <span className={styles.topicDescription}>
 84 |                                                 {calculateCompletion(roadmap)}% ({roadmap.completedCount}/{roadmap.totalSteps} steps)
 85 |                                             </span>
 86 |                                         </div>
 87 |                                         <div className={styles.infoRow}>
 88 |                                             <span className={styles.topicLabel}>Started:</span>
 89 |                                             <span className={styles.topicType}>
 90 |                                                 {new Date(roadmap.startedAt).toLocaleDateString()}
 91 |                                             </span>
 92 |                                         </div>
 93 |                                         <div className={styles.infoRow}>
 94 |                                             <span className={styles.topicLabel}>Last Active:</span>
 95 |                                             <span className={styles.topicType}>
 96 |                                                 {new Date(roadmap.lastActive).toLocaleDateString()}
 97 |                                             </span>
 98 |                                         </div>
 99 |                                     </div>
100 |                                 </li>
101 |                             ))}
102 |                         </ol>
103 |                     </div>
104 |                 )}
105 | 
106 |                 <div className={styles.actionButtons}>
107 |                     <button className={styles.editButton} onClick={handleEditProfile}>
108 |                         Edit Profile
109 |                     </button>
110 |                     <button className={styles.logoutButton} onClick={handleLogout}>
111 |                         Logout
112 |                     </button>
113 |                     <button className={styles.deleteButton} onClick={handleDeleteAccount}>
114 |                         Delete Account
115 |                     </button>
116 |                 </div>
117 |             </div>
118 |         </div>
119 |     );
120 | }


--------------------------------------------------------------------------------
/src/pages/ChatbotPage.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useRef, useEffect } from "react";
  2 | import { getChatCompletion } from "../services/groq";
  3 | import { CiUser } from "react-icons/ci";
  4 | import { LuBot } from "react-icons/lu";
  5 | import { IoIosSearch } from "react-icons/io";
  6 | import { FaRegPenToSquare } from "react-icons/fa6";
  7 | import { BsWindowSidebar } from "react-icons/bs";
  8 | import {
  9 |     getChats,
 10 |     getChat,
 11 |     createChat,
 12 |     updateChat,
 13 |     deleteChat,
 14 | } from "../services/chat";
 15 | import styles from "../styles/ChatBot.module.css";
 16 | 
 17 | function ChatBot() {
 18 |     const promptInputRef = useRef(null);
 19 |     const [prompt, setPrompt] = useState("");
 20 |     const [messages, setMessages] = useState([]);
 21 |     const [chats, setChats] = useState([]);
 22 |     const [currentChatId, setCurrentChatId] = useState(null);
 23 | 
 24 |     useEffect(() => {
 25 |         const fetchChats = async () => {
 26 |             try {
 27 |                 const allChats = await getChats();
 28 |                 setChats(allChats);
 29 |             } catch (error) {
 30 |                 console.error("Failed to fetch chats:", error);
 31 |             }
 32 |         };
 33 |         fetchChats();
 34 |     }, []);
 35 | 
 36 |     useEffect(() => {
 37 |         promptInputRef.current.focus();
 38 |     }, []);
 39 | 
 40 |     const handleSubmit = async (e) => {
 41 |         e.preventDefault();
 42 |         const newMessage = { role: "user", content: prompt };
 43 |         const newMessages = [...messages, newMessage];
 44 | 
 45 |         try {
 46 |             const completion = await getChatCompletion(newMessages);
 47 |             const assistantMessage = {
 48 |                 role: "assistant",
 49 |                 content: completion.choices[0].message.content,
 50 |             };
 51 | 
 52 |             const updatedMessages = [...newMessages, assistantMessage];
 53 |             if (currentChatId) {
 54 |                 await updateChat(currentChatId, [newMessage, assistantMessage]);
 55 |             } else {
 56 |                 const newChat = await createChat(
 57 |                     updatedMessages,
 58 |                     prompt.substring(0, 30) + "..."
 59 |                 );
 60 |                 setCurrentChatId(newChat._id);
 61 |                 setChats([newChat, ...chats]);
 62 |             }
 63 | 
 64 |             setMessages(updatedMessages);
 65 |             setPrompt("");
 66 |         } catch (error) {
 67 |             console.error("Error processing chat:", error);
 68 |         }
 69 |     };
 70 | 
 71 |     const handleChatSelect = async (chatId) => {
 72 |         try {
 73 |             const chat = await getChat(chatId);
 74 |             setMessages(chat.messages);
 75 |             setCurrentChatId(chatId);
 76 |         } catch (error) {
 77 |             console.error("Error loading chat:", error);
 78 |         }
 79 |     };
 80 | 
 81 |     const handleNewChat = () => {
 82 |         setMessages([]);
 83 |         setCurrentChatId(null);
 84 |     };
 85 | 
 86 |     const handleDeleteChat = async (chatId) => {
 87 |         try {
 88 |             await deleteChat(chatId);
 89 |             setChats(chats.filter((chat) => chat._id !== chatId));
 90 |             if (currentChatId === chatId) {
 91 |                 setMessages([]);
 92 |                 setCurrentChatId(null);
 93 |             }
 94 |         } catch (error) {
 95 |             console.error("Error deleting chat:", error);
 96 |         }
 97 |     };
 98 | 
 99 |     return (
100 |         <main className={styles.mainContainer}>
101 |             {/* history.. */}
102 |             <section className={styles.sidebar}>
103 |                 <div className={styles.sidebarHeader}>
104 |                     <BsWindowSidebar className={styles.icon} />
105 |                     <h1 className={styles.title}>Chatbot</h1>
106 |                     <div className={styles.iconsContainer}>
107 |                         <IoIosSearch className={styles.icon} />
108 |                         <FaRegPenToSquare
109 |                             className={`${styles.icon} ${styles.newChatIcon}`}
110 |                             onClick={handleNewChat}
111 |                         />
112 |                     </div>
113 |                 </div>
114 | 
115 |                 {/* PREVIOUS CHATS */}
116 |                 <div className={styles.chatsList}>
117 |                     {chats.map((chat) => (
118 |                         <div
119 |                             key={chat._id}
120 |                             className={`${styles.chatItem} ${currentChatId === chat._id ? styles.activeChat : ""
121 |                                 }`}
122 |                             onClick={() => handleChatSelect(chat._id)}
123 |                         >
124 |                             <span className={styles.chatTitle}>{chat.title}</span>
125 |                             <button
126 |                                 onClick={(e) => {
127 |                                     e.stopPropagation();
128 |                                     handleDeleteChat(chat._id);
129 |                                 }}
130 |                                 className={styles.deleteButton}
131 |                             >
132 |                                 ×
133 |                             </button>
134 |                         </div>
135 |                     ))}
136 |                 </div>
137 | 
138 |                 <div className={styles.userInfo}>
139 |                     <CiUser className={styles.userIcon} />
140 |                     <h3 className={styles.userName}>User</h3>
141 |                 </div>
142 |             </section>
143 | 
144 |             {/* conversation */}
145 |             <section className={styles.chatContainer}>
146 |                 <h2 className={styles.chatHeader}>Chat</h2>
147 |                 <div className={styles.messagesContainer}>
148 |                     {messages.map((message, idx) => (
149 |                         <div
150 |                             key={idx}
151 |                             className={`${styles.message} ${message.role === "user"
152 |                                 ? styles.userMessage
153 |                                 : styles.botMessage
154 |                                 }`}
155 |                         >
156 |                             {message.role === "user" ? (
157 |                                 <>
158 |                                     <div className={styles.messageContent}>
159 |                                         {message.content}
160 |                                     </div>
161 |                                     <CiUser className={styles.messageIcon} />
162 |                                 </>
163 |                             ) : (
164 |                                 <>
165 |                                     <LuBot className={styles.messageIcon} />
166 |                                     <div className={styles.messageContentRight}>
167 |                                         {message.content}
168 |                                     </div>
169 |                                 </>
170 |                             )}
171 |                         </div>
172 |                     ))}
173 |                 </div>
174 | 
175 |                 <form onSubmit={handleSubmit} className={styles.inputForm}>
176 |                     <input
177 |                         ref={promptInputRef}
178 |                         type="text"
179 |                         className={styles.promptInput}
180 |                         placeholder="Type your message..."
181 |                         value={prompt}
182 |                         onChange={(e) => setPrompt(e.target.value)}
183 |                         required
184 |                     />
185 |                     <button type="submit" className={styles.submitButton}>
186 |                         Send
187 |                     </button>
188 |                 </form>
189 |             </section>
190 |         </main>
191 |     );
192 | }
193 | 
194 | export default ChatBot;


--------------------------------------------------------------------------------