First Commit

lesson 9
2025-11-18 19:37:17 +00:00 · 2025-01-03 17:45:23 +00:00 · 2025-01-02 02:23:30 +00:00 · 2025-01-01 04:23:18 +00:00 · 2024-12-31 01:34:37 +00:00 · 2024-12-31 00:12:59 +00:00
1640 changed files with 17355 additions and 274 deletions
--- a/nodeJS/Learning/05/public/css/lesson.css
+++ b/nodeJS/Learning/05/public/css/lesson.css
@ -3,44 +3,48 @@

 /* font: sans-serif for headers, serif for paragraphs, mono for whatever */

-@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");

-body{
-    background-color: rgb(232, 163, 217);
-    color: rgb(146, 0, 24)
+body {
+	background-color: rgb(232, 163, 217);
+	color: rgb(146, 0, 24);
 }

-h1, h2, h3, h4, h5 {
-    font-family: 'Cutive Mono', monospace;
+h1,
+h2,
+h3,
+h4,
+h5 {
+	font-family: "Cutive Mono", monospace;
 }

 p {
-    font-family: 'EB Garamond', serif;
+	font-family: "EB Garamond", serif;
 }

 .title-text {
-    font-size: 30px;
-    margin-bottom: 0px;
+	font-size: 30px;
+	margin-bottom: 0px;
 }

 .form-submit {
-    background-color: rgb(151, 227, 29);
+	background-color: rgb(151, 227, 29);
 }

 .form-submit:hover {
-    background:rgb(62, 100, 2);
-    cursor: pointer;
+	background: rgb(62, 100, 2);
+	cursor: pointer;
 }

 .todo-input {
-    background: rgb(16, 232, 236)
+	background: rgb(16, 232, 236);
 }

 .container {
-        display: flex;
-        flex-direction: column;
-        align-content: space-around;
-        align-items: center;
-        justify-content: flex-end;
-        flex-wrap: nowrap;
+	display: flex;
+	flex-direction: column;
+	align-content: space-around;
+	align-items: center;
+	justify-content: flex-end;
+	flex-wrap: nowrap;
 }
--- a/nodeJS/Learning/05/public/css/main.css
+++ b/nodeJS/Learning/05/public/css/main.css
@ -3,158 +3,178 @@

 /* font: sans-serif for headers, serif for paragraphs, mono for whatever */

-@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");

-body{
-    background-color: rgb(238, 213, 232);
-    color: rgb(92, 89, 92)
+body {
+	background-color: rgb(238, 213, 232);
+	color: rgb(92, 89, 92);
 }

-h1, h2, h3, h4, h5 {
-    font-family: 'EB Garamond', serif;
+h1,
+h2,
+h3,
+h4,
+h5 {
+	font-family: "EB Garamond", serif;
 }

 p {
-    font-family: 'Curtive Mono', monospace;
+	font-family: "Curtive Mono", monospace;
 }

 .title-text {
-    font-size: 30px;
-    margin-bottom: 0px;
+	font-size: 30px;
+	margin-bottom: 0px;
 }

 img {
-    width: 10%;
-    height: auto;
-    margin-top: 5px;
-  }
+	width: 10%;
+	height: auto;
+	margin-top: 5px;
+}

 .form-submit {
-    background-color: rgb(255, 124, 192);
+	background-color: rgb(255, 124, 192);
 }

 .form-submit:hover {
-    background:rgb(252, 27, 121);
-    cursor: pointer;
+	background: rgb(252, 27, 121);
+	cursor: pointer;
 }

-form input, form textarea {
-    font-family: 'Cutive Mono', monospace;
-  }
+form input,
+form textarea {
+	font-family: "Cutive Mono", monospace;
+}

 .todo-input {
-    text-align: left;
-    margin-top: 30px;
-  }
+	text-align: left;
+	margin-top: 30px;
+}

-  label, input, button {
-    display: block;
-    width: 100%;
-    padding: 0;
-    border: none;
-    outline: none;
-    box-sizing: border-box;
-  }
+label,
+input,
+button {
+	display: block;
+	width: 100%;
+	padding: 0;
+	border: none;
+	outline: none;
+	box-sizing: border-box;
+}

-  label {
-    margin-bottom: 4px;
-  }
+label {
+	margin-bottom: 4px;
+}

-  label:nth-of-type(2) {
-    margin-top: 12px;
-  }
+label:nth-of-type(2) {
+	margin-top: 12px;
+}

-  input::placeholder {
-    color: gray;
-  }
+input::placeholder {
+	color: gray;
+}

-  input {
-    background: #ecf0f3;
-    padding: 10px;
-    padding-left: 20px;
-    height: 50px;
-    font-size: 14px;
-    border-radius: 50px;
-    box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
-  }
+input {
+	background: #ecf0f3;
+	padding: 10px;
+	padding-left: 20px;
+	height: 50px;
+	font-size: 14px;
+	border-radius: 50px;
+	box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
+}

-  button {
-    color: white;
-    font-family: 'Curtive Mono', monospace;
-    font-size: 16px;
-    margin: 20px auto;
-    height: 40px;
-    width: 100px;
-    border-radius: 20px;
-    cursor: pointer;
-    display: block;
-  }
+.form-submit {
+	color: white;
+	font-family: "Curtive Mono", monospace;
+	font-size: 16px;
+	margin: 20px auto;
+	height: 40px;
+	width: 100px;
+	border-radius: 20px;
+	cursor: pointer;
+	display: block;
+}

 .container {
-        display: flex;
-        flex-direction: column;
-        align-content: space-around;
-        align-items: center;
-        justify-content: flex-end;
-        flex-wrap: nowrap;
+	display: flex;
+	flex-direction: column;
+	align-content: space-around;
+	align-items: center;
+	justify-content: flex-end;
+	flex-wrap: nowrap;
 }

 .todo-container {
-    max-width: 300px;
-    font-family: 'Curtive Mono', monospace;
-    background-color: #fff5f7; /* Soft cream background for the list */
-    border: 4px solid #ffd0dc; /* Pink border */
-    border-radius: 30px;
-    box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
-    position: relative;
-    padding: 20px 20px 20px 20px;/* up left down right */
-    background-image: url('/images/polka.jpg'); /* Add your image path */
-    background-size: cover; /* Scale the image to cover the entire list item */
-    background-repeat: no-repeat; /* Prevent the image from repeating */
-    background-position: center; /* Center thse image within the list item */
-  }
-
-  .inner-todo {
-    background-color: #fee6eb;
-    padding: 20px;
-    border-radius: 20px;
+	max-width: 300px;
+	font-family: "Curtive Mono", monospace;
+	background-color: #fff5f7; /* Soft cream background for the list */
+	border: 4px solid #ffd0dc; /* Pink border */
+	border-radius: 30px;
+	box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
+	position: relative;
+	padding: 20px 20px 20px 20px; /* up left down right */
+	background-image: url("/images/polka.jpg"); /* Add your image path */
+	background-size: cover; /* Scale the image to cover the entire list item */
+	background-repeat: no-repeat; /* Prevent the image from repeating */
+	background-position: center; /* Center thse image within the list item */
 }

-  /* Heading */
-  .todo-container h1 {
-    font-size: 25px;
-    font-family: 'EB Garamond', serif;
-    color: #545353; /* Pink color for title */
-    margin-top: 10px;
-    font-weight: bold;
-  }
+.inner-todo {
+	background-color: #fee6eb;
+	padding: 20px;
+	border-radius: 20px;
+}

-  /* List Styling */
-  ol {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
+/* Heading */
+.todo-container h1 {
+	font-size: 25px;
+	font-family: "EB Garamond", serif;
+	color: #545353; /* Pink color for title */
+	margin-top: 10px;
+	font-weight: bold;
+}

-  ol li {
-    color: #545353; /* Adjust text color for visibility */
-    margin: 10px;
-    background-color: #ffffff; /* Soft cream background for the list */
-    padding: 20px; /* Increase padding for better layout */
-    border-radius: 20px;
-    text-align: left;
-    font-family: 'Curtive Mono', monospace; /* Consistent font */
-    min-width: 250px;
-  }
+/* List Styling */
+ol {
+	padding: 0;
+	margin: 0;
+}

-  /* Decoration Image */
-  .decor {
-    position: absolute;
-    bottom: -20px;
-    right: -20px;
-  }
+ol li {
+	color: #545353; /* Adjust text color for visibility */
+	margin: 10px;
+	background-color: #ffffff; /* Soft cream background for the list */
+	padding: 20px; /* Increase padding for better layout */
+	border-radius: 20px;
+	text-align: left;
+	font-family: "Curtive Mono", monospace; /* Consistent font */
+	min-width: 250px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}

-  .decor img {
-    width: 150px;
-    height: auto;
-  }
+ol li i {
+	font-size: 20px;
+}
+
+li button {
+	background-color: white;
+	color: rgb(61, 61, 61); /* Button text color */
+	cursor: pointer; /* Pointer cursor for interactivity */
+	width: 15px;
+}
+
+/* Decoration Image */
+.decor {
+	position: absolute;
+	bottom: -20px;
+	right: 250px;
+}
+
+.decor img {
+	width: 150px;
+	height: auto;
+}
--- a/nodeJS/Learning/05/public/html/index.html
+++ b/nodeJS/Learning/05/public/html/index.html
@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Tiffy's to-do list website</title>
+
+		<meta name="description" content="Tiffy's todo list website" />
+		<meta name="keywords" content="list, todo" />
+		<meta name="author" content="Tiffany" />
+
+		<link rel="icon" href="images/favicon.ico" />
+
+		<link rel="stylesheet" href="css/main.css" />
+
+		<link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+			integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
+			crossorigin="anonymous"
+			referrerpolicy="no-referrer"
+		/>
+	</head>
+
+	<body>
+		<section>
+			<div class="container">
+				<h1 class="title-text">Tiffy's to-do list website</h1>
+
+				<img src="images/image.jpg" alt="Image not found" />
+
+				<p><i>Add something cute to my to-do list!</i></p>
+				<form action="/form-action" method="post">
+					<label for="to-do"></label>
+					<input
+						name="todo"
+						type="text"
+						placeholder="Enter a to-do"
+						required
+						class="todo-input"
+					/>
+					<button type="submit" class="form-submit">Add</button>
+				</form>
+
+				<!-- List -->
+				<!-- ordered list -->
+
+				<div class="todo-container">
+					<div class="inner-todo">
+						<h1>To do list</h1>
+						<ol>
+							<!-- <li>Learn from Ronald</li>
+                            <li>Watch movies</li>
+                            <li>Sleep</li> -->
+						</ol>
+						<div class="decor">
+							<img src="images/cryinggirl.gif" />
+						</div>
+					</div>
+				</div>
+
+				<!-- unordered list -->
+				<!-- <ul></ul> -->
+			</div>
+		</section>
+	</body>
+
+	<script src="js/todo.js"></script>
+</html>
--- a/nodeJS/Learning/05/public/html/lesson.html
+++ b/nodeJS/Learning/05/public/html/lesson.html
--- a/nodeJS/Learning/05/public/js/todo.js
+++ b/nodeJS/Learning/05/public/js/todo.js
@ -1,15 +1,51 @@
 //fetch: send a url request, client side rendering
-//update the list, by default: fetch uses get
-fetch('/get-todos', {method: 'GET'}). then((response) => {
-    response.json(). then((data) => {
-        const ol = document.querySelector('ol');
-        data.forEach((item) => {
-            //Create li
-            const li = document.createElement('li');
-            //add text to li
-            li.textContent = item;
-            //add li underneath (child) ol
-            ol.appendChild(li);
-        })
-    });
+//update the list, by default: fetch uses "get"
+fetch("/get-todos", { method: "GET" }).then((response) => {
+	response.json().then((data) => {
+		const ol = document.querySelector("ol");
+		data.forEach((item) => {
+			//Create li
+			const li = document.createElement("li");
+			//add text to li
+			li.textContent = item;
+
+			// Create button
+			const button = document.createElement("button");
+			button.type = "submit";
+
+			// Add icon to button
+			const icon = document.createElement("i");
+			icon.className = "fa-solid fa-delete-left";
+
+			// Append icon to button
+			button.appendChild(icon);
+
+			// Append button to li
+			li.appendChild(button);
+
+			// Add delete functionality
+			button.addEventListener("click", () => {
+				// Send DELETE request
+				fetch(`/delete-todo`, {
+					method: "DELETE",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({ todo: item }),
+				})
+					.then((response) => {
+						if (response.ok) {
+							// Remove the item from the DOM
+							li.remove();
+						} else {
+							console.error("Failed to delete to-do item");
+						}
+					})
+					.catch((error) => console.error("Error:", error));
+			});
+
+			// Append li underneath (child) ol
+			ol.appendChild(li);
+		});
+	});
 });
--- a/nodeJS/Learning/05/src/index.html
+++ b/nodeJS/Learning/05/src/index.html
@ -1,62 +0,0 @@
-<!DOCTYPE html> 
-<html lang="en">
- <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tiffy's to-do list website</title>
-
-    <meta name="description" content="Tiffy's todo list website" />
-    <meta name="keywords" content="list, todo" />
-    <meta name="author" content="Tiffany" />
-
-    <link rel="icon" href="images/favicon.ico" />
-
-    <link rel="stylesheet" href="css/main.css"/>
-</head>
-
-
-<body>
-    <section>
-          <div class="container">
-            <h1 class="title-text">Tiffy's to-do list website</h1>
-            <p><i>Add something cute to my to-do list!</i></p>
-
-            <img src="images/image.jpg" alt="Image not found">
-
-            <form action="/form-action" method="post">
-                <label for="to-do"></label>
-                <input name="todo" type="text" placeholder="Enter a to-do" required class="todo-input"/>
-                
-                <!-- button, if it's a submit button then it will end the form and submit it, other than that the button doesnt do anything -->
-                <button type="submit" class="form-submit">Add</button>
-            </form>
-
-            <!-- List -->
-            <!-- ordered list -->
-
-            <div class="todo-container">
-                <div class="inner-todo">
-                    <h1>To do list</h1>
-                    <ol>
-                        <!-- <li>Learn from Ronald</li>
-                        <li>Watch movies</li>
-                        <li>Sleep</li> -->
-                    </ol>
-                    <div class="decor">
-                      <img src="images/cryinggirl.gif"/>
-                    </div>
-                </div>
-            </div>
-
-
-            <!-- unordered list -->
-            <!-- <ul></ul> -->
-          </div>
-    </section>
-    
-
-</body>
-
-<script src="js/todo.js"> </script>
-
-</html>
--- a/nodeJS/Learning/05/src/index.ts
+++ b/nodeJS/Learning/05/src/index.ts
@ -1,23 +1,24 @@
 //importing the dotenv package (secret file), configuring dotenv for our project
 //dotenv, secret file, people cant read
-import dotenv from 'dotenv';
+import dotenv from "dotenv";
 dotenv.config({ path: `${__dirname}/../.env` });

 //Variable declaration

 //we named express as a variable name, usually name same as imported package
 //express: designed to easily make a web server
-import express, { Request, Response } from 'express';
+import express, { Application, Request, Response } from "express";

 //bodyParser: sending form action to my server, wrap the user's data in "body" to my server, and my server is unwrapping it
-import bodyParser from 'body-parser';
-import fs from 'fs';
+import bodyParser from "body-parser";
+import fs from "fs";
+import path from "path";

-const filePath = 'todolist.txt';
+const filePath: string = "todolist.txt";

 //initializing the express web server, everything in express, we want to put in app
-const app = express();
-const port = process.env.PORT || 3000;
+const app: Application = express();
+const port: Number = parseInt(process.env.PORT as string) || 3000;

 // Middleware
 //unwrap the words
@ -31,45 +32,93 @@ app.use(bodyParser.json());
 //to make icon files, because icon files are always downloaded
 app.use(express.static(`${__dirname}/../public`));

-app.get(`/`, (req, res) => {
-    res.sendFile(`${__dirname}/index.html`);
+app.get(`/`, (_req: Request, res: Response): void => {
+	res.sendFile(path.join(__dirname, "../public/html/index.html"));
 });

-app.post('/form-action', (req, res) => {
-    const todo = req.body.todo;
-    console.log(todo);
+app.post("/form-action", (req: Request, res: Response): void => {
+	const todo = req.body.todo;

-    // use fs to add the item to the file
-
-    fs.appendFile(filePath, todo + '\n', (err) => {
-        if (err) {
-            console.log(err)
-            res.send("Hey there is an error.")
-        } else {
-            res.redirect("/");
-        }
-    });
+	// use fs to add the item to the file

+	fs.appendFile(filePath, "\n" + todo, (err) => {
+		if (err) {
+			console.log(err);
+			res.send("Hey there is an error.");
+		} else {
+			res.redirect("/");
+		}
+	});
 });

-app.get('/get-todos', (req: Request, res: Response): void => {
-    //Using the fs module to read the file
-    fs.readFile(filePath, 'utf-8', (err:NodeJS.ErrnoException | null, data: string) => {
-        if (err) {
-            console.log(err)
-            res.send("An error occured.")
-        } else {
-            //Return the file contents as a response of each list item data.split
-            //Send the response back to the client as a json object res.json
-            res.json(data.split('\n'))
-        }
-    })
-})
+app.get("/get-todos", (_req: Request, res: Response): void => {
+	//Using the fs module to read the file
+	fs.readFile(
+		filePath,
+		"utf-8",
+		(err: NodeJS.ErrnoException | null, data: string) => {
+			if (err) {
+				console.log(err);
+				res.send("An error occured.");
+			} else {
+				//Return the file contents as a response of each list item data.split
+				//Send the response back to the client as a json object res.json
+				res.json(data.split("\n").filter((data) => data.trim() !== ""));
+			}
+		}
+	);
+});

+app.delete("/delete-todo", (req: Request, res: Response): void => {
+	const todoToDelete = (req.body.todo || "").trim(); // Ensure input is trimmed
+
+	if (!todoToDelete) {
+		res.status(400).json({ error: "No to-do item provided to delete" });
+		return;
+	}
+
+	// Read the file to get the current list of todos
+	fs.readFile(filePath, "utf8", (err, data) => {
+		if (err) {
+			console.error("Error reading file:", err);
+			res.status(500).json({ error: "Internal Server Error" });
+			return;
+		}
+
+		// Split the content into lines and trim whitespace from each line
+		const todos = data
+			.split("\n")
+			.map((line) => line.trim())
+			.filter((line) => line !== ""); // Remove empty lines
+
+		// Filter out the todo item to delete
+		const updatedTodos = todos.filter((todo) => todo !== todoToDelete);
+
+		if (todos.length === updatedTodos.length) {
+			res.status(404).json({ error: "Todo not found" });
+			return;
+		}
+
+		// Join the updated list back into a string
+		const updatedContent = updatedTodos.join("\n");
+
+		// Write the updated content back to the file
+		fs.writeFile(filePath, updatedContent, "utf8", (writeErr) => {
+			if (writeErr) {
+				console.error("Error writing file:", writeErr);
+				res.status(500).json({ error: "Internal Server Error" });
+				return;
+			}
+
+			console.log(`Deleted todo: ${todoToDelete}`);
+			res.status(200).json({ message: "Todo deleted successfully" });
+		});
+	});
+});

 // slash'/' is the home page, /about is the about page
 //get, post, put, delete

 app.listen(port, () => {
-    console.log(`Server is running on http://localhost:${port}`);
+	console.log(`Server is running on http://localhost:${port}`);
 });
--- a/nodeJS/Learning/05/todolist.txt
+++ b/nodeJS/Learning/05/todolist.txt
@ -1,6 +1,3 @@
-Learn coding
-Cook dinner
-Make a pretty website
-Delete list items
-Edit list items
-Move items to database!!!
+ABC
+CDE
+FADDGD
--- a/nodeJS/Learning/05/tsconfig.json
+++ b/nodeJS/Learning/05/tsconfig.json
@ -30,7 +30,9 @@
 		"moduleResolution": "node10" /* Specify how TypeScript looks up a file from a given module specifier. */,
 		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-		"rootDirs": ["./"],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+		"rootDirs": [
+			"./"
+		] /* Allow multiple folders to be treated as one when resolving modules. */,
 		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
 		// "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
 		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
@ -85,18 +87,18 @@
 		/* Type Checking */
 		"strict": true /* Enable all strict type-checking options. */,
 		"noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
-		// "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
-		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+		"strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
+		"strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */,
 		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
 		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
 		// "strictBuiltinIteratorReturn": true,              /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
-		// "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+		"noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
 		// "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
 		"alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
 		// "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+		"noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
 		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+		"noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
 		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
 		// "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
 		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
--- a/nodeJS/Learning/06/.dockerignore
+++ b/nodeJS/Learning/06/.dockerignore
@ -0,0 +1 @@
+node_modules
--- a/nodeJS/Learning/06/Dockerfile
+++ b/nodeJS/Learning/06/Dockerfile
@ -0,0 +1,23 @@
+# Use Base Image: What we are using to make Docker File, eg ubuntu container/ image, node etc
+FROM node:lts-alpine
+
+# Make Dir (make sure directory exists)
+RUN mkdir -p /usr/src/app
+
+# Set the working directory: using the correct folder
+WORKDIR /usr/src/app
+
+# Copy files into folder (no need to reinstall every single time)
+COPY package.json .
+
+# Install the dependencies
+RUN yarn install
+
+# Copy the rest of the files
+COPY . .
+
+# Expose the port
+EXPOSE 3000
+
+# Execute Command
+CMD ["yarn", "dev"]
--- a/nodeJS/Learning/06/docker-compose.yaml
+++ b/nodeJS/Learning/06/docker-compose.yaml
@ -0,0 +1,44 @@
+services:
+  web:
+    build: .
+    ports:
+      - "3000:3000"
+    # files are put in here
+    volumes:
+      - .:/usr/src/app
+      - ./node_modules:/usr/src/app/node_modules
+    command: ["yarn", "dev"]
+
+  # Database: how we want to create the database
+  db:
+    # Image of postgres in 13th version
+    image: postgres:13
+    environment: #secret
+      POSTGRES_USER: ${DB_USER}
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+      POSTGRES_DB: ${DB_NAME}
+    ports: #internally the port is 5432, but we want to use 5432 locally
+      - "5432:5432"
+    # create a file to store stuff, store inside "data" folder
+    volumes:
+      - data:/var/lib/postgresql/data
+
+  # PGAdmin: visualize postgres database
+  pgadmin:
+    image: dpage/pgadmin4
+    environment:
+      PGADMIN_DEFAULT_EMAIL: ${PGADMIN_DEFAULT_EMAIL}
+      PGADMIN_DEFAULT_PASSWORD: ${PGADMIN_DEFAULT_PASSWORD}
+    ports:
+      # our local port is 3001, but the container port is 80
+      - "3001:80"
+    # creating a folder called pgadmin to store the pgadmin files
+    volumes:
+      - pgadmin:/root/.pgadmin
+    depends_on:
+      - db
+
+# tell docker to create something called data (refer to above) and store all the postgres data in it
+volumes:
+  data:
+  pgadmin:
--- a/nodeJS/Learning/06/package.json
+++ b/nodeJS/Learning/06/package.json
@ -0,0 +1,26 @@
+{
+	"name": "06",
+	"version": "1.0.0",
+	"main": "index.js",
+	"license": "MIT",
+	"scripts": {
+		"dev": "concurrently \"nodemon --exec ts-node src/index.ts --quiet\" \"yarn sass --watch src/styles:public/css\"",
+		"build": "tsc && sass src/styles:public/css",
+		"start": "node dist/index.js"
+	},
+	"dependencies": {
+		"dotenv": "^16.4.7",
+		"ejs": "^3.1.10",
+		"express": "^4.21.2",
+		"pg": "^8.13.1"
+	},
+	"devDependencies": {
+		"@types/express": "^5.0.0",
+		"@types/pg": "^8.11.10",
+		"concurrently": "^9.1.1",
+		"nodemon": "^3.1.9",
+		"sass": "^1.83.0",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.7.2"
+	}
+}
--- a/nodeJS/Learning/06/pnpm-lock.yaml
+++ b/nodeJS/Learning/06/pnpm-lock.yaml
--- a/nodeJS/Learning/06/public/css/pages/index.css
+++ b/nodeJS/Learning/06/public/css/pages/index.css
@ -0,0 +1,220 @@
+/* Style each tag in an html */
+/* describe to chatgpt what you want, good at css, or css reference */
+/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
+@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+}
+
+html,
+body {
+	height: 100%;
+}
+
+body {
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+	isolation: isolate;
+}
+
+body {
+	background-color: rgb(238, 213, 232);
+	color: rgb(92, 89, 92);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+	font-family: "EB Garamond", serif;
+}
+
+p {
+	font-family: "Cutive Mono", monospace;
+}
+
+.title-text {
+	font-size: 30px;
+	margin-bottom: 0px;
+}
+
+img {
+	width: 10%;
+	height: auto;
+	margin-top: 5px;
+}
+
+.form-submit {
+	background-color: rgb(255, 124, 192);
+}
+.form-submit:hover {
+	background: rgb(252, 27, 121);
+	cursor: pointer;
+}
+
+form input,
+form textarea {
+	font-family: "Cutive Mono", monospace;
+}
+
+.todo-input {
+	text-align: left;
+	margin-top: 30px;
+}
+
+label,
+input,
+button {
+	display: block;
+	width: 100%;
+	padding: 0;
+	border: none;
+	outline: none;
+	box-sizing: border-box;
+}
+label::placeholder,
+input::placeholder,
+button::placeholder {
+	color: rgb(92, 89, 92);
+}
+
+label {
+	margin-bottom: 4px;
+}
+label:nth-of-type(2) {
+	margin-top: 12px;
+}
+
+input {
+	background: rgb(255, 255, 255);
+	padding: 10px;
+	padding-left: 20px;
+	height: 50px;
+	font-size: 14px;
+	border-radius: 50px;
+	box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px rgb(255, 255, 255);
+}
+
+.form-submit {
+	color: rgb(255, 255, 255);
+	font-family: "Cutive Mono", monospace;
+	font-size: 16px;
+	margin: 20px auto;
+	height: 40px;
+	width: 100px;
+	border-radius: 20px;
+	cursor: pointer;
+	display: block;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+	align-content: space-around;
+	align-items: center;
+	justify-content: flex-end;
+	flex-wrap: nowrap;
+}
+
+.todo-container {
+	max-width: 300px;
+	font-family: "Cutive Mono", monospace;
+	background-color: rgb(238, 213, 232);
+	border: 4px solid hsl(345, 100%, 91%);
+	border-radius: 30px;
+	box-shadow: 6px 4px 10px rgb(0, 0, 0);
+	position: relative;
+	padding: 20px;
+	background-image: url("/images/polka.jpg");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+.todo-container .inner-todo {
+	background-color: rgb(238, 213, 232);
+	padding: 20px;
+	border-radius: 20px;
+}
+.todo-container h1 {
+	font-size: 25px;
+	font-family: "EB Garamond", serif;
+	color: #545353;
+	margin-top: 10px;
+	font-weight: bold;
+}
+
+ol {
+	padding: 0;
+	margin: 0;
+}
+ol li {
+	color: #545353;
+	margin: 10px;
+	background-color: rgb(255, 255, 255);
+	padding: 20px;
+	border-radius: 20px;
+	text-align: left;
+	font-family: "Cutive Mono", monospace;
+	min-width: 200px;
+	max-width: 300px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+ol li i {
+	font-size: 20px;
+}
+ol li button {
+	background-color: rgb(255, 255, 255);
+	color: rgb(61, 61, 61);
+	cursor: pointer;
+	width: 15px;
+}
+
+.decor {
+	position: absolute;
+	top: 20px;
+	left: -50px;
+}
+.decor img {
+	width: 100px;
+}
+
+/*# sourceMappingURL=index.css.map */
--- a/nodeJS/Learning/06/public/css/pages/index.css.map
+++ b/nodeJS/Learning/06/public/css/pages/index.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/pages/index.scss","../../../src/styles/_reset.scss","../../../src/styles/_variable.scss"],"names":[],"mappings":"AAIA;AACA;AAEA;AAEQ;ACRR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;ADtCD;EACC,kBEVS;EFWT,OEVW;;;AFaZ;AAAA;AAAA;AAAA;AAAA;EAKC,aEZa;;;AFed;EACC,aEfW;;;AFkBZ;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC,kBEhCW;;AFkCX;EACC,YEpCW;EFqCX;;;AAKD;AAAA;EAEC,aEzCU;;;AF6CZ;EACC;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC,OEpEU;;;AFwEZ;EACC;;AAEA;EACC;;;AAIF;EACC,YE/EO;EFgFP;EACA;EACA;EACA;EACA;EACA,YACC;;;AAIF;EACC,OE3FO;EF4FP,aEvFW;EFwFX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA,aE5GW;EF6GX,kBErHS;EFsHT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,kBEjIQ;EFkIR;EACA;;AAGD;EACC;EACA,aEjIY;EFkIZ,OErIY;EFsIZ;EACA;;;AAIF;EACC;EACA;;AAEA;EACC,OEhJY;EFiJZ;EACA,kBEnJM;EFoJN;EACA;EACA;EACA,aElJU;EFmJV;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC,kBElKK;EFmKL;EACA;EACA;;;AAKH;EACC;EACA;EACA;;AAEA;EACC","file":"index.css"}
--- a/nodeJS/Learning/06/public/images/cryinggirl.gif
+++ b/nodeJS/Learning/06/public/images/cryinggirl.gif
--- a/nodeJS/Learning/06/public/images/favicon.ico
+++ b/nodeJS/Learning/06/public/images/favicon.ico
--- a/nodeJS/Learning/06/public/images/image.jpg
+++ b/nodeJS/Learning/06/public/images/image.jpg
--- a/nodeJS/Learning/06/public/images/polka.jpg
+++ b/nodeJS/Learning/06/public/images/polka.jpg
--- a/nodeJS/Learning/06/public/js/index.js
+++ b/nodeJS/Learning/06/public/js/index.js
@ -0,0 +1,24 @@
+// Function to delete a todo item
+function deleteTodo(todo) {
+	fetch("/todo", {
+		method: "DELETE",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({ todo }),
+	})
+		.then((response) => {
+			if (response.ok) {
+				// Remove the list item and button from the DOM
+				const listItem = [...document.querySelectorAll("li")].find((li) =>
+					li.textContent.trim().startsWith(todo)
+				);
+				if (listItem) {
+					listItem.remove();
+				}
+			} else {
+				console.error("Failed to delete the todo item.");
+			}
+		})
+		.catch((error) => console.error("Error deleting todo:", error));
+}
--- a/nodeJS/Learning/06/src/database/pg.ts
+++ b/nodeJS/Learning/06/src/database/pg.ts
@ -0,0 +1,14 @@
+import { Pool } from "pg";
+
+console.log(process.env.DB_HOST);
+
+const pg = new Pool({
+	host: process.env.DB_HOST,
+	user: process.env.DB_USER,
+	password: process.env.DB_PASSWORD,
+	database: process.env.DB_NAME,
+	port: parseInt(process.env.DB_PORT as string),
+});
+
+// export pg to outside to use
+export default pg;
--- a/nodeJS/Learning/06/src/index.ts
+++ b/nodeJS/Learning/06/src/index.ts
@ -0,0 +1,111 @@
+import dotenv from "dotenv";
+dotenv.config({ path: ".env" });
+
+import express, { Application, Request, Response } from "express";
+import pg from "./database/pg";
+import { PoolClient } from "pg";
+
+const app: Application = express();
+const port: number = parseInt(process.env.PORT as string) || 3000;
+
+//Middleware
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+//Setting up for EJS
+app.set("views", `./src/views`);
+app.set("view engine", "ejs");
+
+//Static route
+app.use(express.static(`${__dirname}/../public`));
+
+//check and send index ejs
+//Query postgres database to get all todos (async await)
+app.get("/", (_req: Request, res: Response): void => {
+	pg.query("SELECT * FROM todos", (err: Error, result: any) => {
+		if (err) {
+			console.log("Error querying todos", err);
+			res.status(500).send("Internal Server Error");
+			return;
+		}
+
+		// Extract all rows from the database
+		const todos = result.rows.map((row: { todo: string }) => row.todo);
+
+		res.render("index", {
+			todos, // Pass todos to the template
+		});
+	});
+});
+
+app.post("/form-action", (req: Request, res: Response): void => {
+	const todo: string = req.body.todo;
+
+	//query postgres to insert todo, $1 is a placeholder for the value of todo
+	pg.query("INSERT INTO todos (todo) VALUES ($1)", [todo], (err: Error) => {
+		if (err) {
+			console.log("Error inserting todo", err);
+			return;
+		}
+
+		console.log(`Inserted ${todo} successfully`);
+	});
+
+	res.redirect("/");
+});
+
+app.delete("/todo", (req: Request, res: Response): void => {
+	const { todo } = req.body;
+
+	pg.query("DELETE FROM todos WHERE todo = $1", [todo], (err: Error) => {
+		if (err) {
+			console.log("Error deleting todo", err);
+			return;
+		}
+
+		res.status(200).send({ message: "Todo deleted successfully" });
+	});
+});
+
+app.listen(port, (): void => {
+	console.log(`Server is running on port ${port}`);
+});
+
+//Connect to postgres, postgres initialization
+pg.connect(
+	(err: Error | undefined, client: PoolClient | undefined, done): void => {
+		if (err) {
+			console.log("Error connecting to pg", err);
+			return;
+		}
+		if (!client) {
+			console.log("No client found");
+			return;
+		}
+
+		// Attempt to Query (asking the database, to check it is connected), it might take us a while and we wont be able to run the rest of the program
+		// Async this
+		client.query("SELECT NOW()", async (err: Error, _result: any) => {
+			if (err) {
+				console.log("Error querying pg", err);
+				return;
+			}
+
+			//Create the table if no error (await)
+			//Query statement, instruction "CREATE TABLE IF NOT EXISTS todos", there is a whole table, https://www.w3schools.com/sql/default.asp
+			//VACHAR is a string, 255 is the max length of the string
+			await client.query(
+				`CREATE TABLE IF NOT EXISTS todos (
+				todo VARCHAR(255) NOT NULL
+			)`,
+				(err: Error) => {
+					console.log("Error creating table", err);
+					return;
+				}
+			);
+
+			console.log("Connected to postgres successfully");
+			done();
+		});
+	}
+);
--- a/nodeJS/Learning/06/src/styles/_reset.scss
+++ b/nodeJS/Learning/06/src/styles/_reset.scss
@ -0,0 +1,51 @@
+// Cancel all css original settings
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+}
+
+html,
+body {
+	height: 100%;
+}
+
+body {
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+	isolation: isolate;
+}
--- a/nodeJS/Learning/06/src/styles/_variable.scss
+++ b/nodeJS/Learning/06/src/styles/_variable.scss
@ -0,0 +1,11 @@
+// setting all variables I want to use
+
+$primary: rgb(238, 213, 232);
+$secondary: rgb(92, 89, 92);
+$black: rgb(0, 0, 0);
+$white: rgb(255, 255, 255);
+$formprimary: #545353;
+$hovercolor: rgb(252, 27, 121);
+$formcolor: rgb(255, 124, 192);
+$font-header: "EB Garamond", serif;
+$font-body: "Cutive Mono", monospace;
--- a/nodeJS/Learning/06/src/styles/components/_navbar.scss
+++ b/nodeJS/Learning/06/src/styles/components/_navbar.scss
--- a/nodeJS/Learning/06/src/styles/pages/index.scss
+++ b/nodeJS/Learning/06/src/styles/pages/index.scss
@ -0,0 +1,184 @@
+@use "../reset";
+@use "../variable";
+@use "../components/navbar";
+
+/* Style each tag in an html */
+/* describe to chatgpt what you want, good at css, or css reference */
+
+/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
+
+@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
+
+body {
+	background-color: variable.$primary;
+	color: variable.$secondary;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+	font-family: variable.$font-header;
+}
+
+p {
+	font-family: variable.$font-body;
+}
+
+.title-text {
+	font-size: 30px;
+	margin-bottom: 0px;
+}
+
+img {
+	width: 10%;
+	height: auto;
+	margin-top: 5px;
+}
+
+.form-submit {
+	background-color: variable.$formcolor;
+
+	&:hover {
+		background: variable.$hovercolor;
+		cursor: pointer;
+	}
+}
+
+form {
+	input,
+	textarea {
+		font-family: variable.$font-body;
+	}
+}
+
+.todo-input {
+	text-align: left;
+	margin-top: 30px;
+}
+
+label,
+input,
+button {
+	display: block;
+	width: 100%;
+	padding: 0;
+	border: none;
+	outline: none;
+	box-sizing: border-box;
+
+	&::placeholder {
+		color: variable.$secondary;
+	}
+}
+
+label {
+	margin-bottom: 4px;
+
+	&:nth-of-type(2) {
+		margin-top: 12px;
+	}
+}
+
+input {
+	background: variable.$white;
+	padding: 10px;
+	padding-left: 20px;
+	height: 50px;
+	font-size: 14px;
+	border-radius: 50px;
+	box-shadow:
+		inset 6px 6px 6px #cbced1,
+		inset -6px -6px 6px variable.$white;
+}
+
+.form-submit {
+	color: variable.$white;
+	font-family: variable.$font-body;
+	font-size: 16px;
+	margin: 20px auto;
+	height: 40px;
+	width: 100px;
+	border-radius: 20px;
+	cursor: pointer;
+	display: block;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+	align-content: space-around;
+	align-items: center;
+	justify-content: flex-end;
+	flex-wrap: nowrap;
+}
+
+.todo-container {
+	max-width: 300px;
+	font-family: variable.$font-body;
+	background-color: variable.$primary;
+	border: 4px solid hsl(345, 100%, 91%);
+	border-radius: 30px;
+	box-shadow: 6px 4px 10px variable.$black;
+	position: relative;
+	padding: 20px;
+	background-image: url("/images/polka.jpg");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+
+	.inner-todo {
+		background-color: variable.$primary;
+		padding: 20px;
+		border-radius: 20px;
+	}
+
+	h1 {
+		font-size: 25px;
+		font-family: variable.$font-header;
+		color: variable.$formprimary;
+		margin-top: 10px;
+		font-weight: bold;
+	}
+}
+
+ol {
+	padding: 0;
+	margin: 0;
+
+	li {
+		color: variable.$formprimary;
+		margin: 10px;
+		background-color: variable.$white;
+		padding: 20px;
+		border-radius: 20px;
+		text-align: left;
+		font-family: variable.$font-body;
+		min-width: 250px;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		i {
+			font-size: 20px;
+		}
+
+		button {
+			background-color: variable.$white;
+			color: rgb(61, 61, 61);
+			cursor: pointer;
+			width: 15px;
+		}
+	}
+}
+
+.decor {
+	position: absolute;
+	top: 50px;
+	left: -50px;
+
+	img {
+		width: 100px;
+	}
+}
--- a/nodeJS/Learning/06/src/views/index.ejs
+++ b/nodeJS/Learning/06/src/views/index.ejs
@ -0,0 +1,75 @@
+<!-- html:5 -->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Tiffy's to-do list website</title>
+
+		<meta name="description" content="Tiffy's todo list website" />
+		<meta name="keywords" content="list, todo" />
+		<meta name="author" content="Tiffany" />
+
+		<link rel="icon" href="images/favicon.ico" />
+
+		<link rel="stylesheet" href="css/pages/index.css" />
+
+		<link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+			integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
+			crossorigin="anonymous"
+			referrerpolicy="no-referrer"
+		/>
+	</head>
+
+	<body>
+		<section>
+			<div class="container">
+				<h1 class="title-text">Tiffy's to-do list website</h1>
+
+				<img src="images/image.jpg" alt="Image not found" />
+
+				<p><i>Add something cute to my to-do list!</i></p>
+				<form action="/form-action" method="post">
+					<label for="to-do"></label>
+					<input
+						name="todo"
+						type="text"
+						placeholder="Enter a to-do"
+						required
+						class="todo-input"
+					/>
+					<button type="submit" class="form-submit">Add</button>
+				</form>
+
+				<!-- List -->
+				<!-- ordered list -->
+
+				<div class="todo-container">
+					<div class="inner-todo">
+						<h1>To do list</h1>
+						<ol>
+							<!-- rendering the todos -->
+							<% todos.forEach(todo => { %>
+							<li>
+								<%= todo %> 
+								<button onclick="deleteTodo('<%= todo %>')" class="delete-button">
+								<i class="fa-solid fa-delete-left"></i>
+							</li>
+							<% }); %>
+						</ol>
+						<div class="decor">
+							<img src="images/cryinggirl.gif" />
+						</div>
+					</div>
+				</div>
+
+				<!-- unordered list -->
+				<!-- <ul></ul> -->
+			</div>
+		</section>
+	</body>
+
+	<script src="js/index.js"></script>
+</html>
--- a/nodeJS/Learning/06/tsconfig.json
+++ b/nodeJS/Learning/06/tsconfig.json
@ -0,0 +1,114 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig to read more about this file */
+
+		/* Projects */
+		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+		/* Language and Environment */
+		"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+		// "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		// "jsx": "preserve",                                /* Specify what JSX code is generated. */
+		// "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+		// "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+		// "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+		/* Modules */
+		"module": "commonjs" /* Specify what module code is generated. */,
+		// "rootDir": "./src" /* Specify the root folder within your source files. */,
+		"moduleResolution": "node10" /* Specify how TypeScript looks up a file from a given module specifier. */,
+		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+		"rootDirs": [
+			"./src",
+			"./public"
+		] /* Allow multiple folders to be treated as one when resolving modules. */,
+		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+		// "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+		// "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+		// "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+		// "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
+		// "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+		// "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+		// "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+		// "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
+		// "resolveJsonModule": true,                        /* Enable importing .json files. */
+		// "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+		// "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+		/* JavaScript Support */
+		"allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+		// "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+		/* Emit */
+		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+		// "noEmit": true,                                   /* Disable emitting files from a compilation. */
+		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+		"outDir": "./dist" /* Specify an output folder for all emitted files. */,
+		"removeComments": true /* Disable emitting comments. */,
+		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
+		// "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+		// "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+
+		/* Interop Constraints */
+		// "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+		// "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+		// "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
+		// "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+		/* Type Checking */
+		"strict": true /* Enable all strict type-checking options. */,
+		"noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+		"strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
+		"strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */,
+		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+		"strictBuiltinIteratorReturn": true /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */,
+		"noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
+		"useUnknownInCatchVariables": true /* Default catch clause variables as 'unknown' instead of 'any'. */,
+		"alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
+		"noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+		"noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+		"noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
+		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+		// "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+		"allowUnusedLabels": true /* Disable error reporting for unused labels. */,
+		"allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
+
+		/* Completeness */
+		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+		"skipLibCheck": true /* Skip type checking all .d.ts files. */
+	}
+}
--- a/nodeJS/Learning/07/.gitignore
+++ b/nodeJS/Learning/07/.gitignore
--- a/nodeJS/Learning/07/app/.dockerignore
+++ b/nodeJS/Learning/07/app/.dockerignore
@ -0,0 +1 @@
+node_modules
--- a/nodeJS/Learning/07/app/Dockerfile
+++ b/nodeJS/Learning/07/app/Dockerfile
@ -0,0 +1,23 @@
+# Use Base Image: What we are using to make Docker File, eg ubuntu container/ image, node etc
+FROM node:lts-alpine
+
+# Make Dir (make sure directory exists)
+RUN mkdir -p /usr/src/app
+
+# Set the working directory: using the correct folder
+WORKDIR /usr/src/app
+
+# Copy files into folder (no need to reinstall every single time)
+COPY package.json .
+
+# Install the dependencies
+RUN yarn install
+
+# Copy the rest of the files
+COPY . .
+
+# Expose the port
+EXPOSE 3000
+
+# Execute Command
+CMD ["yarn", "dev"]
--- a/nodeJS/Learning/07/app/package.json
+++ b/nodeJS/Learning/07/app/package.json
@ -0,0 +1,25 @@
+{
+	"name": "app",
+	"version": "1.0.0",
+	"main": "index.js",
+	"license": "MIT",
+	"scripts": {
+		"dev": "concurrently \"nodemon --exec ts-node src/index.ts --quiet\" \"yarn sass --watch src/styles:public/css\"",
+		"build": "tsc && sass src/styles:public/css",
+		"start": "node dist/index.js"
+	},
+	"devDependencies": {
+		"@types/express": "^5.0.0",
+		"concurrently": "^9.1.2",
+		"nodemon": "^3.1.9",
+		"sass": "^1.83.0",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.7.2"
+	},
+	"dependencies": {
+		"dotenv": "^16.4.7",
+		"ejs": "^3.1.10",
+		"express": "^4.21.2",
+		"marked": "^15.0.5"
+	}
+}
--- a/nodeJS/Learning/07/app/pnpm-lock.yaml
+++ b/nodeJS/Learning/07/app/pnpm-lock.yaml
--- a/nodeJS/Learning/07/app/public/css/pages/blogpage.css.map
+++ b/nodeJS/Learning/07/app/public/css/pages/blogpage.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/blogpage.scss"],"names":[],"mappings":"AAAQ;ACCR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;AC7CD;AACA;AAEA;AAEA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAIF;AAAA;EAEC;EACA;EACA;EACA;EAKA;EACA;;AAEA;AAAA;EACC;EACA;;AAEA;AAAA;EACC;EACA;EACA;EACA;EACA;AAmDA;;AAjDA;AAAA;EACC;EACA,OF1CI;EE2CJ,aFxCU;EEyCV;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA,aFlDQ,4BEkD0B;EAClC;EACA;EACA,OF3DG,SE2DoB;EACvB;EACA;EACA,kBF5DI,SE4D+B;EACnC;EACA;EACA;;AAEA;AAAA;EACC,kBFpEE,SEoEgC;EAClC,OFnEG,SEmEqB;;AAGzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBF/EE,SE+EgC;EAClC,OF9EG,SE8EqB;EACxB;EACA;;AAGD;AAAA;EACC,kBFpFG,SEoFgC;EACnC,OFvFE,SEuFqB;;AAKzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA;EACA,aFpGO;EEqGP;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC,kBFjHC;EEkHD,OFnHC;;AEqHD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFzHE;EE0HF;;AAEA;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFpIE;EEqIF,OFvIC;;AEyID;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBF5IG;EE6IH;;AAEA;AAAA;EACC;EACA;;AAML;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC,kBFrKG;EEsKH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA,OFrLE;EEsLF;EACA,aFlLS;EEmLT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA,OF7ME;EE8MF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFhNO;;AEmNR;AAAA;EACC;EACA","file":"blogpage.css"}
--- a/nodeJS/Learning/07/app/public/css/pages/index
+++ b/nodeJS/Learning/07/app/public/css/pages/index
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/index%20copy.scss"],"names":[],"mappings":"AAAQ;ACCR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;AC7CD;AACA;AAEA;AAEA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAIF;AAAA;EAEC;EACA;EACA;EACA;EAKA;EACA;;AAEA;AAAA;EACC;EACA;;AAEA;AAAA;EACC;EACA;EACA;EACA;EACA;AAmDA;;AAjDA;AAAA;EACC;EACA,OF1CI;EE2CJ,aFxCU;EEyCV;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA,aFlDQ,4BEkD0B;EAClC;EACA;EACA,OF3DG,SE2DoB;EACvB;EACA;EACA,kBF5DI,SE4D+B;EACnC;EACA;EACA;;AAEA;AAAA;EACC,kBFpEE,SEoEgC;EAClC,OFnEG,SEmEqB;;AAGzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBF/EE,SE+EgC;EAClC,OF9EG,SE8EqB;EACxB;EACA;;AAGD;AAAA;EACC,kBFpFG,SEoFgC;EACnC,OFvFE,SEuFqB;;AAKzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA;EACA,aFpGO;EEqGP;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC,kBFjHC;EEkHD,OFnHC;;AEqHD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFzHE;EE0HF;;AAEA;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFpIE;EEqIF,OFvIC;;AEyID;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBF5IG;EE6IH;;AAEA;AAAA;EACC;EACA;;AAML;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC,kBFrKG;EEsKH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA,OFrLE;EEsLF;EACA,aFlLS;EEmLT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA,OF7ME;EE8MF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFhNO;;AEmNR;AAAA;EACC;EACA","file":"index%20copy.css"}
--- a/nodeJS/Learning/07/app/public/css/pages/index.css
+++ b/nodeJS/Learning/07/app/public/css/pages/index.css
@ -0,0 +1,271 @@
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+  isolation: isolate;
+}
+
+/* Style each tag in an html */
+/* describe to chatgpt what you want, good at css, or css reference */
+/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
+@keyframes buttonEntry {
+  0% {
+    opacity: 0; /* Start invisible */
+    transform: translateY(30px); /* Start below the viewport */
+  }
+  100% {
+    opacity: 1; /* Fully visible */
+    transform: translateY(0); /* End at its normal position */
+  }
+}
+body,
+html {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background: linear-gradient(to top right, #3b3561, rgb(191.3, 187.1, 217.9));
+  height: 100vh;
+  overflow: hidden;
+}
+body .container,
+html .container {
+  display: flex;
+  height: 100vh;
+}
+body .container .div1,
+html .container .div1 {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  /* General button styling */
+}
+body .container .div1 h1,
+html .container .div1 h1 {
+  font-size: 60px;
+  color: #f7ebec;
+  font-family: "Lexend", serif;
+  font-weight: 300;
+  margin-top: 10vh;
+  padding: 0px 0px 0px 4vh;
+}
+body .container .div1 .read-more-btn,
+html .container .div1 .read-more-btn {
+  display: inline-flex; /* Flex container for text and icon */
+  align-items: center; /* Center text and icon vertically */
+  justify-content: center; /* Center content horizontally */
+  padding: 10px 20px; /* Button padding */
+  font-family: "Space Grotesk", monospace; /* Font style */
+  font-size: 16px; /* Font size */
+  font-weight: bold; /* Bold text */
+  color: #3b3561; /* Text color */
+  border: 2px solid #3b3561; /* Button border */
+  border-radius: 30px; /* Rounded edges for the button */
+  background-color: #f7ebec; /* Transparent background */
+  cursor: pointer; /* Pointer cursor on hover */
+  transition: all 0.3s ease; /* Smooth transition on hover */
+  margin-top: 2vh; /* Space between text and next element */
+}
+body .container .div1 .read-more-btn:hover,
+html .container .div1 .read-more-btn:hover {
+  background-color: #3b3561; /* Change background color on hover */
+  color: #f7ebec; /* Change text color on hover */
+}
+body .container .div1 .read-more-btn .icon,
+html .container .div1 .read-more-btn .icon {
+  display: flex; /* Flex for the icon */
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px; /* Space between text and icon */
+  width: 20px; /* Icon circle width */
+  height: 20px; /* Icon circle height */
+  background-color: #3b3561; /* Circle background color */
+  color: #f7ebec; /* Arrow color */
+  border-radius: 50%; /* Make the icon circular */
+  transition: all 0.3s ease; /* Smooth transition on hover */
+}
+body .container .div1 .read-more-btn:hover .icon,
+html .container .div1 .read-more-btn:hover .icon {
+  background-color: #f7ebec; /* Change circle background on hover */
+  color: #3b3561; /* Change arrow color on hover */
+}
+body .container .div1 .buttons,
+html .container .div1 .buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px;
+  padding-right: 85px;
+  margin-top: 2.5vh;
+  margin-bottom: 5vh;
+}
+body .container .div1 .buttons button,
+html .container .div1 .buttons button {
+  padding: 3.5px 23px;
+  font-size: 16px;
+  font-family: "Space Grotesk", monospace;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  margin: 0px 0px 0px 70px;
+}
+body .container .div1 .buttons button.psyc-button,
+html .container .div1 .buttons button.psyc-button {
+  background-color: #ddbdd5;
+  color: #3b3561;
+}
+body .container .div1 .buttons button.psyc-button:hover,
+html .container .div1 .buttons button.psyc-button:hover {
+  background-color: rgb(203.66, 155.34, 191.58);
+  transform: scale(1.05);
+}
+body .container .div1 .buttons button.imp-button,
+html .container .div1 .buttons button.imp-button {
+  background-color: #4b8f8c;
+  color: white;
+}
+body .container .div1 .buttons button.imp-button:hover,
+html .container .div1 .buttons button.imp-button:hover {
+  background-color: rgb(57.4541284404, 109.5458715596, 107.247706422);
+  transform: scale(1.05);
+}
+body .container .div1 .buttons button.spirit-button,
+html .container .div1 .buttons button.spirit-button {
+  background-color: #f7ebec;
+  color: #3b3561;
+}
+body .container .div1 .buttons button.spirit-button:hover,
+html .container .div1 .buttons button.spirit-button:hover {
+  background-color: rgb(222.24, 220.08, 235.92);
+  transform: scale(1.05);
+}
+body .container .div1 .buttons button.code-button,
+html .container .div1 .buttons button.code-button {
+  background-color: #dd614a;
+  color: white;
+}
+body .container .div1 .buttons button.code-button:hover,
+html .container .div1 .buttons button.code-button:hover {
+  background-color: rgb(205.4139534884, 64.688372093, 38.5860465116);
+  transform: scale(1.05);
+}
+body .container .div2,
+html .container .div2 {
+  width: 50%;
+  padding-left: 30px;
+  display: flex;
+  flex-wrap: wrap;
+}
+body .container .div2 a,
+html .container .div2 a {
+  text-decoration: none;
+}
+body .container .div2 .entrya,
+html .container .div2 .entrya {
+  background-color: #ddbdd5;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  border: none;
+  text-align: center;
+  cursor: pointer;
+  height: 300px;
+  width: 300px;
+  margin: 32px 0px 0px 35px;
+  transition: transform 0.3s ease;
+  animation: buttonEntry 1s ease-in-out;
+}
+body .container .div2 .entrya h2,
+html .container .div2 .entrya h2 {
+  font-size: 20px;
+  color: #3b3561;
+  margin-bottom: 10px;
+  font-family: "Lexend", serif;
+  font-weight: 500;
+  overflow: hidden; /* Hide overflowing text */
+  text-overflow: ellipsis; /* Add "..." at the end of truncated text */
+  max-width: 250px; /* Restrict container width */
+  display: -webkit-box; /* Enables multi-line truncation */
+  -webkit-line-clamp: 1; /* Limit to 2 lines */
+  -webkit-box-orient: vertical; /* Vertical text orientation */
+  white-space: normal; /* Allow wrapping within the box */
+}
+body .container .div2 .entrya img,
+html .container .div2 .entrya img {
+  height: 130px;
+  width: 200px; /* Set desired width */
+  overflow: hidden;
+  border-radius: 10px; /* Optional: Rounded corners */
+  display: block; /* Ensures it's treated as a block element */
+  margin: 0 auto; /* Centers the image horizontally */
+}
+body .container .div2 .entrya p,
+html .container .div2 .entrya p {
+  padding: 20px 10px 0 10px;
+  color: #3b3561;
+  font-size: 0.9rem;
+  overflow: hidden; /* Hide overflowing text */
+  text-overflow: ellipsis; /* Add "..." at the end of truncated text */
+  max-width: 300px; /* Restrict container width */
+  display: -webkit-box; /* Enables multi-line truncation */
+  -webkit-line-clamp: 3; /* Limit to 2 lines */
+  -webkit-box-orient: vertical; /* Vertical text orientation */
+  white-space: normal; /* Allow wrapping within the box */
+  font-family: "Space Grotesk", monospace;
+}
+body .container .div2 .entrya:hover,
+html .container .div2 .entrya:hover {
+  transform: translate(60px, 0px);
+  transform: translateY(-5px);
+}
+
+/*# sourceMappingURL=index.css.map */
--- a/nodeJS/Learning/07/app/public/css/pages/index.css.map
+++ b/nodeJS/Learning/07/app/public/css/pages/index.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/index.scss"],"names":[],"mappings":"AAAQ;ACCR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;AC7CD;AACA;AAEA;AAEA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAIF;AAAA;EAEC;EACA;EACA;EACA;EAKA;EACA;;AAEA;AAAA;EACC;EACA;;AAEA;AAAA;EACC;EACA;EACA;EACA;EACA;AAmDA;;AAjDA;AAAA;EACC;EACA,OF1CI;EE2CJ,aFxCU;EEyCV;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA,aFlDQ,4BEkD0B;EAClC;EACA;EACA,OF3DG,SE2DoB;EACvB;EACA;EACA,kBF5DI,SE4D+B;EACnC;EACA;EACA;;AAEA;AAAA;EACC,kBFpEE,SEoEgC;EAClC,OFnEG,SEmEqB;;AAGzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBF/EE,SE+EgC;EAClC,OF9EG,SE8EqB;EACxB;EACA;;AAGD;AAAA;EACC,kBFpFG,SEoFgC;EACnC,OFvFE,SEuFqB;;AAKzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA;EACA,aFpGO;EEqGP;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC,kBFjHC;EEkHD,OFnHC;;AEqHD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFzHE;EE0HF;;AAEA;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFpIE;EEqIF,OFvIC;;AEyID;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBF5IG;EE6IH;;AAEA;AAAA;EACC;EACA;;AAML;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC,kBFrKG;EEsKH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA,OFrLE;EEsLF;EACA,aFlLS;EEmLT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA,OF7ME;EE8MF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFhNO;;AEmNR;AAAA;EACC;EACA","file":"index.css"}
--- a/nodeJS/Learning/07/app/public/css/pages/post.css
+++ b/nodeJS/Learning/07/app/public/css/pages/post.css
@ -0,0 +1,79 @@
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+  isolation: isolate;
+}
+
+/* Style each tag in an html */
+/* describe to chatgpt what you want, good at css, or css reference */
+/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
+body {
+  background: linear-gradient(to top right, #3b3561, rgb(191.3, 187.1, 217.9));
+  height: 100vh;
+}
+body .content {
+  margin: 10vh;
+  padding: 5vh;
+  align-items: center;
+}
+body .content .h1 {
+  font-family: "Lexend", serif;
+}
+body .content .img {
+  height: auto;
+  width: 35vh;
+}
+body .content .post-description {
+  font-family: "Space Grotesk", monospace;
+}
+body .content .post-content {
+  font-family: "Space Grotesk", monospace;
+}
+
+/*# sourceMappingURL=post.css.map */
--- a/nodeJS/Learning/07/app/public/css/pages/post.css.map
+++ b/nodeJS/Learning/07/app/public/css/pages/post.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/post.scss"],"names":[],"mappings":"AAAQ;ACCR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;AC7CD;AACA;AAEA;AAEA;EACC;EAKA;;AAEA;EACC;EACA;EACA;;AAEA;EACC,aFhBW;;AEmBZ;EACC;EACA;;AAGD;EACC,aFxBS;;AE2BV;EACC,aF5BS","file":"post.css"}
--- a/nodeJS/Learning/07/app/public/images/favicon.ico
+++ b/nodeJS/Learning/07/app/public/images/favicon.ico
--- a/nodeJS/Learning/07/app/public/images/test.png
+++ b/nodeJS/Learning/07/app/public/images/test.png
--- a/nodeJS/Learning/07/app/public/js/index.js
+++ b/nodeJS/Learning/07/app/public/js/index.js
--- a/nodeJS/Learning/07/app/src/index.ts
+++ b/nodeJS/Learning/07/app/src/index.ts
@ -0,0 +1,58 @@
+import dotenv from "dotenv";
+dotenv.config({ path: ".env" });
+
+import express, { Application, Request, Response } from "express";
+import { marked } from "marked";
+
+const app: Application = express();
+const port: number = parseInt(process.env.PORT as string) || 3000;
+
+//Middleware
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+//Setting up for EJS
+app.set("views", `./src/views`);
+app.set("view engine", "ejs");
+
+//Get strapi data
+app.get("/", async (_req: Request, res: Response) => {
+	const postsData = await fetch(
+		"http://cms:1337/api/blog-posts?populate=cover_image",
+		{
+			method: "GET",
+			headers: {
+				Authorization: `Bearer ${process.env.STRAPI_BEARER_TOKEN}`,
+				"Content-Type": "application/json",
+			},
+		}
+	).then((res) => {
+		return res.json();
+	});
+
+	res.render("index", { posts: postsData });
+});
+
+app.get("/post/:slug", async (req: Request, res: Response) => {
+	//anything after the colon is a variable. if you go to any website that is
+	const postsData = await fetch(
+		`http://cms:1337/api/blog-posts?filters[slug]=${req.params.slug}&populate=cover_image`,
+		{
+			method: "GET",
+			headers: {
+				Authorization: `Bearer ${process.env.STRAPI_BEARER_TOKEN}`,
+			},
+		}
+	).then((response) => response.json());
+
+	const markedcontent = marked(postsData.data[0].content);
+
+	res.render("post", { post: postsData.data[0], markedcontent });
+});
+
+//Static route
+app.use(express.static(`${__dirname}/../public`));
+
+app.listen(port, (): void => {
+	console.log(`Server is running on port ${port}`);
+});
--- a/nodeJS/Learning/07/app/src/styles/_reset.scss
+++ b/nodeJS/Learning/07/app/src/styles/_reset.scss
@ -0,0 +1,51 @@
+// Cancel all css original settings
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+}
+
+html,
+body {
+	height: 100%;
+}
+
+body {
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+	isolation: isolate;
+}
--- a/nodeJS/Learning/07/app/src/styles/_variable.scss
+++ b/nodeJS/Learning/07/app/src/styles/_variable.scss
@ -0,0 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
+
+$blue: #3b3561;
+$pink: #ddbdd5;
+$white: #f7ebec;
+$green: #4b8f8c;
+$orange: #dd614a;
+$font-header: "Lexend", serif;
+$font-body: "Space Grotesk", monospace;
--- a/nodeJS/Learning/07/app/src/styles/components/_navbar.scss
+++ b/nodeJS/Learning/07/app/src/styles/components/_navbar.scss
--- a/nodeJS/Learning/07/app/src/styles/pages/index.scss
+++ b/nodeJS/Learning/07/app/src/styles/pages/index.scss
@ -0,0 +1,243 @@
+@use "../reset";
+@use "../variable";
+@use "../components/navbar";
+
+/* Style each tag in an html */
+/* describe to chatgpt what you want, good at css, or css reference */
+
+/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
+
+@keyframes buttonEntry {
+	0% {
+		opacity: 0; /* Start invisible */
+		transform: translateY(30px); /* Start below the viewport */
+	}
+	100% {
+		opacity: 1; /* Fully visible */
+		transform: translateY(0); /* End at its normal position */
+	}
+}
+
+body,
+html {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	background: linear-gradient(
+		to top right,
+		variable.$blue,
+		lighten(variable.$blue, 50%)
+	);
+	height: 100vh;
+	overflow: hidden;
+
+	.container {
+		display: flex;
+		height: 100vh;
+
+		.div1 {
+			width: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+
+			h1 {
+				font-size: 60px;
+				color: variable.$white;
+				font-family: variable.$font-header;
+				font-weight: 300;
+				margin-top: 10vh;
+				padding: 0px 0px 0px 4vh;
+			}
+
+			.read-more-btn {
+				display: inline-flex; /* Flex container for text and icon */
+				align-items: center; /* Center text and icon vertically */
+				justify-content: center; /* Center content horizontally */
+				padding: 10px 20px; /* Button padding */
+				font-family: variable.$font-body; /* Font style */
+				font-size: 16px; /* Font size */
+				font-weight: bold; /* Bold text */
+				color: variable.$blue; /* Text color */
+				border: 2px solid variable.$blue; /* Button border */
+				border-radius: 30px; /* Rounded edges for the button */
+				background-color: variable.$white; /* Transparent background */
+				cursor: pointer; /* Pointer cursor on hover */
+				transition: all 0.3s ease; /* Smooth transition on hover */
+				margin-top: 2vh; /* Space between text and next element */
+
+				&:hover {
+					background-color: variable.$blue; /* Change background color on hover */
+					color: variable.$white; /* Change text color on hover */
+				}
+
+				.icon {
+					display: flex; /* Flex for the icon */
+					align-items: center;
+					justify-content: center;
+					margin-left: 10px; /* Space between text and icon */
+					width: 20px; /* Icon circle width */
+					height: 20px; /* Icon circle height */
+					background-color: variable.$blue; /* Circle background color */
+					color: variable.$white; /* Arrow color */
+					border-radius: 50%; /* Make the icon circular */
+					transition: all 0.3s ease; /* Smooth transition on hover */
+				}
+
+				&:hover .icon {
+					background-color: variable.$white; /* Change circle background on hover */
+					color: variable.$blue; /* Change arrow color on hover */
+				}
+			}
+
+			/* General button styling */
+			.buttons {
+				display: flex;
+				flex-direction: column;
+				align-items: left;
+				justify-content: center;
+				gap: 10px;
+				padding: 20px;
+				padding-right: 85px;
+				margin-top: 2.5vh;
+				margin-bottom: 5vh;
+
+				button {
+					padding: 3.5px 23px;
+					font-size: 16px;
+					font-family: variable.$font-body;
+					border: none;
+					border-radius: 5px;
+					cursor: pointer;
+					transition: background-color 0.3s ease, transform 0.2s ease;
+					margin: 0px 0px 0px 70px;
+
+					&.psyc-button {
+						background-color: variable.$pink;
+						color: variable.$blue;
+
+						&:hover {
+							background-color: darken(variable.$pink, 10%);
+							transform: scale(1.05);
+						}
+					}
+
+					&.imp-button {
+						background-color: variable.$green;
+						color: white;
+
+						&:hover {
+							background-color: darken(variable.$green, 10%);
+							transform: scale(1.05);
+						}
+					}
+
+					&.spirit-button {
+						background-color: variable.$white;
+						color: variable.$blue;
+
+						&:hover {
+							background-color: lighten(variable.$blue, 60%);
+							transform: scale(1.05);
+						}
+					}
+
+					&.code-button {
+						background-color: variable.$orange;
+						color: white;
+
+						&:hover {
+							background-color: darken(variable.$orange, 10%);
+							transform: scale(1.05);
+						}
+					}
+				}
+			}
+		}
+		.div2 {
+			width: 50%;
+			padding-left: 30px;
+			display: flex;
+			flex-wrap: wrap;
+
+			a {
+				text-decoration: none; // Removes the underline
+			}
+
+			.entrya {
+				background-color: variable.$pink;
+				border-radius: 10px;
+				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+				padding: 20px;
+				border: none;
+				text-align: center;
+				cursor: pointer;
+				height: 300px;
+				width: 300px;
+				margin: 32px 0px 0px 35px;
+				transition: transform 0.3s ease;
+				animation: buttonEntry 1s ease-in-out;
+
+				h2 {
+					font-size: 20px;
+					color: variable.$blue;
+					margin-bottom: 10px;
+					font-family: variable.$font-header;
+					font-weight: 500;
+					overflow: hidden; /* Hide overflowing text */
+					text-overflow: ellipsis; /* Add "..." at the end of truncated text */
+					max-width: 250px; /* Restrict container width */
+					display: -webkit-box; /* Enables multi-line truncation */
+					-webkit-line-clamp: 1; /* Limit to 2 lines */
+					-webkit-box-orient: vertical; /* Vertical text orientation */
+					white-space: normal; /* Allow wrapping within the box */
+				}
+
+				img {
+					height: 130px;
+					width: 200px; /* Set desired width */
+					overflow: hidden;
+					border-radius: 10px; /* Optional: Rounded corners */
+					display: block; /* Ensures it's treated as a block element */
+					margin: 0 auto; /* Centers the image horizontally */
+				}
+
+				p {
+					padding: 20px 10px 0 10px;
+					color: variable.$blue;
+					font-size: 0.9rem;
+					overflow: hidden; /* Hide overflowing text */
+					text-overflow: ellipsis; /* Add "..." at the end of truncated text */
+					max-width: 300px; /* Restrict container width */
+					display: -webkit-box; /* Enables multi-line truncation */
+					-webkit-line-clamp: 3; /* Limit to 2 lines */
+					-webkit-box-orient: vertical; /* Vertical text orientation */
+					white-space: normal; /* Allow wrapping within the box */
+					font-family: variable.$font-body;
+				}
+
+				&:hover {
+					transform: translate(60px, 0px);
+					transform: translateY(-5px);
+				}
+			}
+		}
+	}
+}
+// .entryb {
+// 	grid-area: 1 / 3 / 2 / 4;
+// 	background-color: variable.$green;
+// 	color: black;
+// }
+
+// .entryc {
+// 	border-radius: 10px;
+// 	background-color: variable.$orange;
+// 	color: black; }
+
+// .entryd {
+// 	background-color: variable.$white;
+// 	color: black;
+// 	border-radius: 10px;
+// }
--- a/nodeJS/Learning/07/app/src/styles/pages/post.scss
+++ b/nodeJS/Learning/07/app/src/styles/pages/post.scss
@ -0,0 +1,41 @@
+@use "../reset";
+@use "../variable";
+@use "../components/navbar";
+
+/* Style each tag in an html */
+/* describe to chatgpt what you want, good at css, or css reference */
+
+/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
+
+body {
+	background: linear-gradient(
+		to top right,
+		variable.$blue,
+		lighten(variable.$blue, 50%)
+	);
+	height: 100vh;
+
+	.content {
+		margin: 10vh;
+		padding: 5vh;
+		align-items: center;
+		color: variable.$blue;
+
+		.h1 {
+			font-family: variable.$font-header;
+		}
+
+		.img {
+			height: auto;
+			width: 35vh;
+		}
+
+		.post-description {
+			font-family: variable.$font-body;
+		}
+
+		.post-content {
+			font-family: variable.$font-body;
+		}
+	}
+}
--- a/nodeJS/Learning/07/app/src/views/index.ejs
+++ b/nodeJS/Learning/07/app/src/views/index.ejs
@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>My Blog Page</title>
+
+		<link rel="icon" href="images/favicon.ico" />
+
+		<link rel="stylesheet" href="css/pages/index.css" />
+	</head>
+
+	<!-- https://cssgrid-generator.netlify.app/ -->
+	<body>
+		<div class="container">
+			<div class="div1">
+				<h1>This is my blog page.</h1>
+				<button class="read-more-btn">read more.<span class="icon">&rarr;</span></button>
+				<div class="buttons">
+					<button class="psyc-button">Psychology</button>
+					<button class="imp-button">Implementation Science</button>
+					<button class="spirit-button">Spirituality</button>
+					<button class="code-button">Coding</button>
+					</button>
+				</div>
+			</div>
+			<div class="div2">
+				<% posts.data.forEach((post) => { %>
+					<a href="/post/<%= post.slug %>">
+				<div class="entrya">
+					<h2><%= post.title %></h2>
+					<img src="http://localhost:1337<%=post.cover_image.url%>" alt="<%= post.title %>" />
+					<p><%= post.description %></p>
+				</div>
+				</a>
+				<% }); %>
+			</div>
+		</div>
+<!-- 		
+				<button class="entryb">
+					<h2></h2>
+					<img />
+					<p></p>
+				</button>
+			
+				<button class="entryc">
+					<h2></h2>
+					<img />
+					<p></p>
+				</button>
+			
+				<button class="entryd">
+					<h2></h2>
+					<img />
+					<p></p>
+				</button> -->
+
+	</body>
+</html>
--- a/nodeJS/Learning/07/app/src/views/post.ejs
+++ b/nodeJS/Learning/07/app/src/views/post.ejs
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>My Blog Post</title>
+
+		<link rel="icon" href="images/favicon.ico" />
+
+		<link rel="stylesheet" href="css/pages/post.css" />
+	</head>
+	<body>
+		<div class="content">
+			<h1><%=post.title%></h1>
+			<div class="post-description"><%=post.description%></div>
+			<img src="http://localhost:1337<%=post.cover_image.url%>" />
+			<div class="post-content"><%-markedcontent%></div>
+		</div>
+	</body>
+</html>
--- a/nodeJS/Learning/07/app/tsconfig.json
+++ b/nodeJS/Learning/07/app/tsconfig.json
@ -0,0 +1,114 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig to read more about this file */
+
+		/* Projects */
+		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+		/* Language and Environment */
+		"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+		// "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		// "jsx": "preserve",                                /* Specify what JSX code is generated. */
+		// "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+		// "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+		// "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+		/* Modules */
+		"module": "commonjs" /* Specify what module code is generated. */,
+		// "rootDir": "./src" /* Specify the root folder within your source files. */,
+		"moduleResolution": "node10" /* Specify how TypeScript looks up a file from a given module specifier. */,
+		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+		"rootDirs": [
+			"./src",
+			"./public"
+		] /* Allow multiple folders to be treated as one when resolving modules. */,
+		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+		// "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+		// "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+		// "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+		// "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
+		// "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+		// "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+		// "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+		// "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
+		// "resolveJsonModule": true,                        /* Enable importing .json files. */
+		// "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+		// "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+		/* JavaScript Support */
+		"allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+		// "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+		/* Emit */
+		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+		// "noEmit": true,                                   /* Disable emitting files from a compilation. */
+		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+		"outDir": "./dist" /* Specify an output folder for all emitted files. */,
+		"removeComments": true /* Disable emitting comments. */,
+		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
+		// "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+		// "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+
+		/* Interop Constraints */
+		// "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+		// "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+		// "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
+		// "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+		/* Type Checking */
+		"strict": true /* Enable all strict type-checking options. */,
+		"noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+		"strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
+		"strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */,
+		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+		"strictBuiltinIteratorReturn": true /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */,
+		"noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
+		"useUnknownInCatchVariables": true /* Default catch clause variables as 'unknown' instead of 'any'. */,
+		"alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
+		"noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+		"noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+		"noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
+		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+		// "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+		"allowUnusedLabels": true /* Disable error reporting for unused labels. */,
+		"allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
+
+		/* Completeness */
+		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+		"skipLibCheck": true /* Skip type checking all .d.ts files. */
+	}
+}
--- a/nodeJS/Learning/07/cms/.dockerignore
+++ b/nodeJS/Learning/07/cms/.dockerignore
@ -0,0 +1 @@
+node_modules
--- a/nodeJS/Learning/07/cms/.env.example
+++ b/nodeJS/Learning/07/cms/.env.example
@ -0,0 +1,7 @@
+HOST=0.0.0.0
+PORT=1337
+APP_KEYS="toBeModified1,toBeModified2"
+API_TOKEN_SALT=tobemodified
+ADMIN_JWT_SECRET=tobemodified
+TRANSFER_TOKEN_SALT=tobemodified
+JWT_SECRET=tobemodified
--- a/nodeJS/Learning/07/cms/Dockerfile
+++ b/nodeJS/Learning/07/cms/Dockerfile
@ -0,0 +1,38 @@
+# Use Debian-based Node image for better compatibility with native modules
+FROM node:18
+
+# Install necessary dependencies for sharp and other native modules
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    libvips-dev \
+    git \
+    python3 \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set environment variables
+ENV NODE_ENV=development
+
+# Set working directory for dependency installation
+WORKDIR /opt/app
+
+# Copy package.json and yarn.lock files to the container
+COPY package.json yarn.lock ./
+
+# Install dependencies
+RUN yarn install --frozen-lockfile
+
+# Copy the rest of the application code
+COPY . .
+
+# Change ownership to the node user
+RUN chown -R node:node /opt/app
+
+# Use non-root user
+USER node
+
+# Expose the application port
+EXPOSE 1337
+
+# Command to run the Strapi application
+CMD ["yarn", "develop"]
--- a/nodeJS/Learning/07/cms/README.md
+++ b/nodeJS/Learning/07/cms/README.md
@ -0,0 +1,61 @@
+# 🚀 Getting started with Strapi
+
+Strapi comes with a full featured [Command Line Interface](https://docs.strapi.io/dev-docs/cli) (CLI) which lets you scaffold and manage your project in seconds.
+
+### `develop`
+
+Start your Strapi application with autoReload enabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-develop)
+
+```
+npm run develop
+# or
+yarn develop
+```
+
+### `start`
+
+Start your Strapi application with autoReload disabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-start)
+
+```
+npm run start
+# or
+yarn start
+```
+
+### `build`
+
+Build your admin panel. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-build)
+
+```
+npm run build
+# or
+yarn build
+```
+
+## ⚙️ Deployment
+
+Strapi gives you many possible deployment options for your project including [Strapi Cloud](https://cloud.strapi.io). Browse the [deployment section of the documentation](https://docs.strapi.io/dev-docs/deployment) to find the best solution for your use case.
+
+```
+yarn strapi deploy
+```
+
+## 📚 Learn more
+
+- [Resource center](https://strapi.io/resource-center) - Strapi resource center.
+- [Strapi documentation](https://docs.strapi.io) - Official Strapi documentation.
+- [Strapi tutorials](https://strapi.io/tutorials) - List of tutorials made by the core team and the community.
+- [Strapi blog](https://strapi.io/blog) - Official Strapi blog containing articles made by the Strapi team and the community.
+- [Changelog](https://strapi.io/changelog) - Find out about the Strapi product updates, new features and general improvements.
+
+Feel free to check out the [Strapi GitHub repository](https://github.com/strapi/strapi). Your feedback and contributions are welcome!
+
+## ✨ Community
+
+- [Discord](https://discord.strapi.io) - Come chat with the Strapi community including the core team.
+- [Forum](https://forum.strapi.io/) - Place to discuss, ask questions and find answers, show your Strapi project and get feedback or just talk with other Community members.
+- [Awesome Strapi](https://github.com/strapi/awesome-strapi) - A curated list of awesome things related to Strapi.
+
+---
+
+<sub>🤫 Psst! [Strapi is hiring](https://strapi.io/careers).</sub>
--- a/nodeJS/Learning/07/cms/config/admin.ts
+++ b/nodeJS/Learning/07/cms/config/admin.ts
@ -0,0 +1,17 @@
+export default ({ env }) => ({
+  auth: {
+    secret: env('ADMIN_JWT_SECRET'),
+  },
+  apiToken: {
+    salt: env('API_TOKEN_SALT'),
+  },
+  transfer: {
+    token: {
+      salt: env('TRANSFER_TOKEN_SALT'),
+    },
+  },
+  flags: {
+    nps: env.bool('FLAG_NPS', true),
+    promoteEE: env.bool('FLAG_PROMOTE_EE', true),
+  },
+});
--- a/nodeJS/Learning/07/cms/config/api.ts
+++ b/nodeJS/Learning/07/cms/config/api.ts
@ -0,0 +1,7 @@
+export default {
+  rest: {
+    defaultLimit: 25,
+    maxLimit: 100,
+    withCount: true,
+  },
+};
--- a/nodeJS/Learning/07/cms/config/database.ts
+++ b/nodeJS/Learning/07/cms/config/database.ts
@ -0,0 +1,60 @@
+import path from 'path';
+
+export default ({ env }) => {
+  const client = env('DATABASE_CLIENT', 'sqlite');
+
+  const connections = {
+    mysql: {
+      connection: {
+        host: env('DATABASE_HOST', 'localhost'),
+        port: env.int('DATABASE_PORT', 3306),
+        database: env('DATABASE_NAME', 'strapi'),
+        user: env('DATABASE_USERNAME', 'strapi'),
+        password: env('DATABASE_PASSWORD', 'strapi'),
+        ssl: env.bool('DATABASE_SSL', false) && {
+          key: env('DATABASE_SSL_KEY', undefined),
+          cert: env('DATABASE_SSL_CERT', undefined),
+          ca: env('DATABASE_SSL_CA', undefined),
+          capath: env('DATABASE_SSL_CAPATH', undefined),
+          cipher: env('DATABASE_SSL_CIPHER', undefined),
+          rejectUnauthorized: env.bool('DATABASE_SSL_REJECT_UNAUTHORIZED', true),
+        },
+      },
+      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
+    },
+    postgres: {
+      connection: {
+        connectionString: env('DATABASE_URL'),
+        host: env('DATABASE_HOST', 'localhost'),
+        port: env.int('DATABASE_PORT', 5432),
+        database: env('DATABASE_NAME', 'strapi'),
+        user: env('DATABASE_USERNAME', 'strapi'),
+        password: env('DATABASE_PASSWORD', 'strapi'),
+        ssl: env.bool('DATABASE_SSL', false) && {
+          key: env('DATABASE_SSL_KEY', undefined),
+          cert: env('DATABASE_SSL_CERT', undefined),
+          ca: env('DATABASE_SSL_CA', undefined),
+          capath: env('DATABASE_SSL_CAPATH', undefined),
+          cipher: env('DATABASE_SSL_CIPHER', undefined),
+          rejectUnauthorized: env.bool('DATABASE_SSL_REJECT_UNAUTHORIZED', true),
+        },
+        schema: env('DATABASE_SCHEMA', 'public'),
+      },
+      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
+    },
+    sqlite: {
+      connection: {
+        filename: path.join(__dirname, '..', '..', env('DATABASE_FILENAME', '.tmp/data.db')),
+      },
+      useNullAsDefault: true,
+    },
+  };
+
+  return {
+    connection: {
+      client,
+      ...connections[client],
+      acquireConnectionTimeout: env.int('DATABASE_CONNECTION_TIMEOUT', 60000),
+    },
+  };
+};
--- a/nodeJS/Learning/07/cms/config/middlewares.ts
+++ b/nodeJS/Learning/07/cms/config/middlewares.ts
@ -0,0 +1,12 @@
+export default [
+  'strapi::logger',
+  'strapi::errors',
+  'strapi::security',
+  'strapi::cors',
+  'strapi::poweredBy',
+  'strapi::query',
+  'strapi::body',
+  'strapi::session',
+  'strapi::favicon',
+  'strapi::public',
+];
--- a/nodeJS/Learning/07/cms/config/plugins.ts
+++ b/nodeJS/Learning/07/cms/config/plugins.ts
@ -0,0 +1 @@
+export default () => ({});
--- a/nodeJS/Learning/07/cms/config/server.ts
+++ b/nodeJS/Learning/07/cms/config/server.ts
@ -0,0 +1,7 @@
+export default ({ env }) => ({
+  host: env('HOST', '0.0.0.0'),
+  port: env.int('PORT', 1337),
+  app: {
+    keys: env.array('APP_KEYS'),
+  },
+});
--- a/nodeJS/Learning/07/cms/database/migrations/.gitkeep
+++ b/nodeJS/Learning/07/cms/database/migrations/.gitkeep
--- a/nodeJS/Learning/07/cms/package.json
+++ b/nodeJS/Learning/07/cms/package.json
@ -0,0 +1,36 @@
+{
+  "name": "blog",
+  "version": "0.1.0",
+  "private": true,
+  "description": "A Strapi application",
+  "scripts": {
+    "build": "strapi build",
+    "deploy": "strapi deploy",
+    "develop": "strapi develop",
+    "start": "strapi start",
+    "strapi": "strapi"
+  },
+  "dependencies": {
+    "@strapi/plugin-cloud": "5.6.0",
+    "@strapi/plugin-users-permissions": "5.6.0",
+    "@strapi/strapi": "5.6.0",
+    "pg": "8.8.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  },
+  "engines": {
+    "node": ">=18.0.0 <=22.x.x",
+    "npm": ">=6.0.0"
+  },
+  "strapi": {
+    "uuid": "8b109ca4-55e3-4342-b0da-0ad7eb69ffd6"
+  }
+}
--- a/nodeJS/Learning/07/cms/public/robots.txt
+++ b/nodeJS/Learning/07/cms/public/robots.txt
@ -0,0 +1,3 @@
+# To prevent search engines from seeing the site altogether, uncomment the next two lines:
+# User-Agent: *
+# Disallow: /
--- a/nodeJS/Learning/07/cms/public/uploads/.gitkeep
+++ b/nodeJS/Learning/07/cms/public/uploads/.gitkeep
--- a/nodeJS/Learning/07/cms/public/uploads/adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/anime_style_cozy_home_interior_with_furnishings_23_2151176427_78b0b24a73.avif
+++ b/nodeJS/Learning/07/cms/public/uploads/anime_style_cozy_home_interior_with_furnishings_23_2151176427_78b0b24a73.avif
--- a/nodeJS/Learning/07/cms/public/uploads/colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/grand_suite_ac1201a25f.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/grand_suite_ac1201a25f.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/large_adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/large_adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/large_colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/large_colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/large_grand_suite_ac1201a25f.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/large_grand_suite_ac1201a25f.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/large_pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/large_pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/large_test_e3e58db550.png
+++ b/nodeJS/Learning/07/cms/public/uploads/large_test_e3e58db550.png
--- a/nodeJS/Learning/07/cms/public/uploads/large_winter_2fc84fb1c6.png
+++ b/nodeJS/Learning/07/cms/public/uploads/large_winter_2fc84fb1c6.png
--- a/nodeJS/Learning/07/cms/public/uploads/medium_adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/medium_adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/medium_colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/medium_colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/medium_grand_suite_ac1201a25f.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/medium_grand_suite_ac1201a25f.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/medium_pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/medium_pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/medium_test_e3e58db550.png
+++ b/nodeJS/Learning/07/cms/public/uploads/medium_test_e3e58db550.png
--- a/nodeJS/Learning/07/cms/public/uploads/medium_winter_2fc84fb1c6.png
+++ b/nodeJS/Learning/07/cms/public/uploads/medium_winter_2fc84fb1c6.png
--- a/nodeJS/Learning/07/cms/public/uploads/pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/small_adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/small_adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/small_colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/small_colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/small_grand_suite_ac1201a25f.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/small_grand_suite_ac1201a25f.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/small_pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/small_pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/small_test_e3e58db550.png
+++ b/nodeJS/Learning/07/cms/public/uploads/small_test_e3e58db550.png
--- a/nodeJS/Learning/07/cms/public/uploads/small_winter_2fc84fb1c6.png
+++ b/nodeJS/Learning/07/cms/public/uploads/small_winter_2fc84fb1c6.png
--- a/nodeJS/Learning/07/cms/public/uploads/test_e3e58db550.png
+++ b/nodeJS/Learning/07/cms/public/uploads/test_e3e58db550.png
--- a/nodeJS/Learning/07/cms/public/uploads/thumbnail_adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/thumbnail_adels_asumi_adels_white_haired_anime_princess_in_white_underwear_in_palace_38a5968f_1cb7_4f83_8eed_6eae2efff9a5_enhanced_884bd694f4.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/thumbnail_colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/thumbnail_colorful_eye_anime_girl_desktop_wallpaper_bd5710d3d6.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/thumbnail_grand_suite_ac1201a25f.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/thumbnail_grand_suite_ac1201a25f.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/thumbnail_pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
+++ b/nodeJS/Learning/07/cms/public/uploads/thumbnail_pokemon_snorlax_aesthetic_desktop_wallpaper_4k_2e51329abe.jpg
--- a/nodeJS/Learning/07/cms/public/uploads/thumbnail_test_e3e58db550.png
+++ b/nodeJS/Learning/07/cms/public/uploads/thumbnail_test_e3e58db550.png
--- a/nodeJS/Learning/07/cms/public/uploads/thumbnail_winter_2fc84fb1c6.png
+++ b/nodeJS/Learning/07/cms/public/uploads/thumbnail_winter_2fc84fb1c6.png
--- a/nodeJS/Learning/07/cms/public/uploads/winter_2fc84fb1c6.png
+++ b/nodeJS/Learning/07/cms/public/uploads/winter_2fc84fb1c6.png
--- a/nodeJS/Learning/07/cms/src/admin/app.example.tsx
+++ b/nodeJS/Learning/07/cms/src/admin/app.example.tsx
@ -0,0 +1,37 @@
+import type { StrapiApp } from '@strapi/strapi/admin';
+
+export default {
+  config: {
+    locales: [
+      // 'ar',
+      // 'fr',
+      // 'cs',
+      // 'de',
+      // 'dk',
+      // 'es',
+      // 'he',
+      // 'id',
+      // 'it',
+      // 'ja',
+      // 'ko',
+      // 'ms',
+      // 'nl',
+      // 'no',
+      // 'pl',
+      // 'pt-BR',
+      // 'pt',
+      // 'ru',
+      // 'sk',
+      // 'sv',
+      // 'th',
+      // 'tr',
+      // 'uk',
+      // 'vi',
+      // 'zh-Hans',
+      // 'zh',
+    ],
+  },
+  bootstrap(app: StrapiApp) {
+    console.log(app);
+  },
+};
--- a/nodeJS/Learning/07/cms/src/admin/tsconfig.json
+++ b/nodeJS/Learning/07/cms/src/admin/tsconfig.json
@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["../plugins/**/admin/src/**/*", "./"],
+  "exclude": ["node_modules/", "build/", "dist/", "**/*.test.ts"]
+}
--- a/nodeJS/Learning/07/cms/src/admin/vite.config.example.ts
+++ b/nodeJS/Learning/07/cms/src/admin/vite.config.example.ts
@ -0,0 +1,12 @@
+import { mergeConfig, type UserConfig } from 'vite';
+
+export default (config: UserConfig) => {
+  // Important: always return the modified config
+  return mergeConfig(config, {
+    resolve: {
+      alias: {
+        '@': '/src',
+      },
+    },
+  });
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
tuffahni	f05533558a	First Commit	2025-11-18 19:37:17 +00:00
tuffahni	a95a0e5ad0	lesson 9	2025-01-03 17:45:23 +00:00
tuffahni	a477fc711d	lesson 9	2025-01-02 02:23:30 +00:00
tuffahni	a5b92973b4	lesson 9	2025-01-01 04:23:18 +00:00
tuffahni	a7a1e4757c	lesson 8	2024-12-31 01:34:37 +00:00
tuffahni	ecd7b650bd	lesson 8	2024-12-31 00:12:59 +00:00
tuffahni	c6d68334be	lesson 8	2024-12-30 04:14:32 +00:00
MangoPig	23225bb54b	Crying Girl Fix	2024-12-30 00:48:24 +00:00
tuffahni	301e6de152	lesson 7	2024-12-29 12:43:58 +00:00
tuffahni	39574a6599	lesson 7	2024-12-25 03:14:41 +00:00
				`@ -0,0 +1 @@`
				{"version":3,"sourceRoot":"","sources":["../../../src/styles/pages/index.scss","../../../src/styles/_reset.scss","../../../src/styles/_variable.scss"],"names":[],"mappings":"AAIA;AACA;AAEA;AAEQ;ACRR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;ADtCD;EACC,kBEVS;EFWT,OEVW;;;AFaZ;AAAA;AAAA;AAAA;AAAA;EAKC,aEZa;;;AFed;EACC,aEfW;;;AFkBZ;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC,kBEhCW;;AFkCX;EACC,YEpCW;EFqCX;;;AAKD;AAAA;EAEC,aEzCU;;;AF6CZ;EACC;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC,OEpEU;;;AFwEZ;EACC;;AAEA;EACC;;;AAIF;EACC,YE/EO;EFgFP;EACA;EACA;EACA;EACA;EACA,YACC;;;AAIF;EACC,OE3FO;EF4FP,aEvFW;EFwFX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA,aE5GW;EF6GX,kBErHS;EFsHT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,kBEjIQ;EFkIR;EACA;;AAGD;EACC;EACA,aEjIY;EFkIZ,OErIY;EFsIZ;EACA;;;AAIF;EACC;EACA;;AAEA;EACC,OEhJY;EFiJZ;EACA,kBEnJM;EFoJN;EACA;EACA;EACA,aElJU;EFmJV;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC,kBElKK;EFmKL;EACA;EACA;;;AAKH;EACC;EACA;EACA;;AAEA;EACC","file":"index.css"}