Merge pull request #1 from CodeCrew-CodeSchool/webapp

Webapp

design/info.md

@@ -0,0 +1,6 @@
+initial application is going to be a web app, placebo frontend admin panel.
+
+Gonna connect it with Leetcode Api..?
+
+[Leetcode Api](https://github.com/alfaArghya/alfa-leetcode-api)
+

webapp/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "CodeCrew",
+  "name": "CodeCrew Leetcode Site",
   "icons": [
     {
       "src": "favicon.ico",

webapp/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

webapp/src/App.js

@@ -1,23 +1,11 @@
-import logo from './logo.svg';
 import './App.css';
-
+import Header from "./components/Header/Header"
+import LeetcodeProblems from "./components/LeetcodeProblems/LeetcodeProblems"
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Header></Header>
+      <LeetcodeProblems></LeetcodeProblems>
     </div>
   );
 }

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 */
+  }

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 (
+    <div>
+        <div>
+      <header className="header-container">
+        <img src={Logo} alt="CodeCrewLogo" className="logo" />
+      </header>
+    </div>
+    </div>
+  )
+}
+
+export default Header

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 */
+  }
+

webapp/src/components/LeetcodeProblems/LeetcodeProblems.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import '../LeetcodeProblems/LeetcodeProblems.css'; 
+
+function LeetcodeProblems() {
+  return (
+    <div id="problemContainer" class="container">
+    <div id="problemName" class="title">
+      <h1>Palindrome Number</h1>
+    </div>
+    <div class="box-container">
+      <div id="problemDescription" class="content">
+      Given an integer x, return true if x is a
+palindrome
+, and false otherwise.
+      </div>
+      <div id="problemExample" class="content">
+      Example 1:
+
+Input: x = 121
+Output: true
+Explanation: 121 reads as 121 from left to right and from right to left.
+<br></br>
+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.
+<br></br>
+Example 3:
+
+Input: x = 10
+Output: false
+Explanation: Reads 01 from right to left. Therefore it is not a palindrome.
+
+
+      </div>
+    </div>
+  </div>
+
+
+  )
+}
+
+export default LeetcodeProblems

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(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>
 );
 
-// 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();