diff --git a/design/assets/wireframe_paper.png b/design/assets/wireframe_paper.png new file mode 100644 index 0000000..e1a3f28 Binary files /dev/null and b/design/assets/wireframe_paper.png differ diff --git a/design/info.md b/design/info.md new file mode 100644 index 0000000..4ee769c --- /dev/null +++ b/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) + diff --git a/webapp/public/favicon.ico b/webapp/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/webapp/public/favicon.ico and /dev/null differ diff --git a/webapp/public/logo192.png b/webapp/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/webapp/public/logo192.png and /dev/null differ diff --git a/webapp/public/logo512.png b/webapp/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/webapp/public/logo512.png and /dev/null differ diff --git a/webapp/public/manifest.json b/webapp/public/manifest.json index 080d6c7..fa7e53e 100644 --- a/webapp/public/manifest.json +++ b/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", diff --git a/webapp/src/App.css b/webapp/src/App.css index 74b5e05..e69de29 100644 --- a/webapp/src/App.css +++ b/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); - } -} diff --git a/webapp/src/App.js b/webapp/src/App.js index 3784575..b4d37bc 100644 --- a/webapp/src/App.js +++ b/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 (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+
); } 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 ( +
+
+
+ CodeCrewLogo +
+
+
+ ) +} + +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';