);
}
diff --git a/webapp/src/assets/CodeCrewLogo.png b/webapp/src/assets/CodeCrewLogo.png
new file mode 100644
index 0000000..2227eaa
Binary files /dev/null and b/webapp/src/assets/CodeCrewLogo.png differ
diff --git a/webapp/src/components/Header/Header.css b/webapp/src/components/Header/Header.css
new file mode 100644
index 0000000..6bb2817
--- /dev/null
+++ b/webapp/src/components/Header/Header.css
@@ -0,0 +1,12 @@
+.header-container {
+ display: flex;
+ justify-content: center; /* Center the content horizontally */
+ align-items: center; /* Center the content vertically */
+ height: 100px; /* Set a fixed height */
+ border-bottom: 2px solid black;
+ }
+
+ .logo {
+ width: 500px; /* Set width as desired */
+ height: auto; /* Maintain aspect ratio */
+ }
\ No newline at end of file
diff --git a/webapp/src/components/Header/Header.js b/webapp/src/components/Header/Header.js
new file mode 100644
index 0000000..a2eea35
--- /dev/null
+++ b/webapp/src/components/Header/Header.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import Logo from "../../assets/CodeCrewLogo.png"
+import './Header.css'
+
+function Header() {
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+export default Header
diff --git a/webapp/src/components/LeetcodeProblems/LeetcodeProblems.css b/webapp/src/components/LeetcodeProblems/LeetcodeProblems.css
new file mode 100644
index 0000000..5280238
--- /dev/null
+++ b/webapp/src/components/LeetcodeProblems/LeetcodeProblems.css
@@ -0,0 +1,32 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .title {
+ border: 1px solid #ccc; /* Add border to title section */
+ padding: 20px; /* Add padding for better spacing */
+ width: 80%; /* Set a width to prevent it from stretching too wide */
+ box-sizing: border-box; /* Include padding and border in the width calculation */
+ margin-bottom: 20px; /* Adjust as needed */
+ margin-top: 20px;
+ }
+
+ .box-container {
+ display: flex;
+ justify-content: space-between;
+ width: 80%; /* Set a width to prevent it from stretching too wide */
+ }
+
+ .content {
+ border: 1px solid #ccc; /* Add border to content sections */
+ padding: 20px; /* Add padding for better spacing */
+ width: calc(50% - 10px); /* Set width for content sections */
+ box-sizing: border-box; /* Include padding and border in the width calculation */
+ }
+
+ #problemName {
+ text-align: center; /* Center the text within #problemName */
+ }
+
\ No newline at end of file
diff --git a/webapp/src/components/LeetcodeProblems/LeetcodeProblems.js b/webapp/src/components/LeetcodeProblems/LeetcodeProblems.js
new file mode 100644
index 0000000..dfddfb7
--- /dev/null
+++ b/webapp/src/components/LeetcodeProblems/LeetcodeProblems.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import '../LeetcodeProblems/LeetcodeProblems.css';
+
+function LeetcodeProblems() {
+ return (
+
+
+
Palindrome Number
+
+
+
+ Given an integer x, return true if x is a
+palindrome
+, and false otherwise.
+
+
+ Example 1:
+
+Input: x = 121
+Output: true
+Explanation: 121 reads as 121 from left to right and from right to left.
+
+Example 2:
+
+Input: x = -121
+Output: false
+Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome.
+
+Example 3:
+
+Input: x = 10
+Output: false
+Explanation: Reads 01 from right to left. Therefore it is not a palindrome.
+
+
+
+
+
+
+
+ )
+}
+
+export default LeetcodeProblems
diff --git a/webapp/src/index.js b/webapp/src/index.js
index d563c0f..60ff382 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -2,16 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
-import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
-
);
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/webapp/src/logo.svg b/webapp/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/webapp/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/webapp/src/reportWebVitals.js b/webapp/src/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/webapp/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/webapp/src/setupTests.js b/webapp/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/webapp/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';