Completed assignment

README.md

@@ -1,8 +1 @@
-## Full stack assignment
-
-### Video
-
-Link to video - https://www.youtube.com/watch?v=569YZm0X5-0
-
-### Where to start?
-Look at App.jsx inside the src/ folder 
+Frontend for my fork of peetcode

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.jsx

@@ -1,25 +1,13 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Layout from './pages/layout/Layout.jsx';
+import Home from './pages/home/Home.jsx'; 
+import Login from './pages/login/Login.jsx'; 
+import Signup from './pages/signup/Signup.jsx'; 
+import Problemsets from './pages/problemsets/Problemsets.jsx'; 
+import Problems from './pages/problems/Problems.jsx';
 /*
  * Temporary problems array schema
  */
-const problems = [{
-    title: "201. Bitwise AND of Numbers Range",
-    difficulty: "Medium",
-    acceptance: "42%"
-},{
-    title: "201. Bitwise AND of Numbers Range",
-    difficulty: "Medium",
-    acceptance: "412%"
-},
-    {
-        title: "202. Happy Number",
-        difficulty: "Easy",
-        acceptance: "54.9%"
-    },
-    {
-        title: "203. Remove Linked List Elements",
-        difficulty: "Hard",
-        acceptance: "42%"
-    }];
 
 
 function App() {
@@ -32,28 +20,18 @@ function App() {
      */
 
     return (
-    <div>
-        Finish the assignment! Look at the comments in App.jsx as a starting point
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="login" element={<Login />} />
+          <Route path="signup" element={<Signup />} />
+          <Route path="problemsets" element={<Problemsets />} />
+          <Route path="/problems/:id" element={<Problems />}/> 
+        </Route> 
+      </Routes>
+    </BrowserRouter>
   )
 }
 
-// A demo component
-function ProblemStatement(props) {
-    const title = props.title;
-    const acceptance = props.acceptance;
-    const difficulty = props.difficulty;
-
-    return <tr>
-        <td>
-            {title}
-        </td>
-        <td>
-            {acceptance}
-        </td>
-        <td>
-            {difficulty}
-        </td>
-    </tr>
-}
 export default App

src/components/userform/UserForm.css

@@ -0,0 +1,51 @@
+button {
+  width: 10rem;
+  font-size: 1.2rem;
+}
+
+form {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justfiy-content: center;
+  width: 100%;
+}
+
+label {
+  align-items: center;
+  display: flex;
+  font-size: 1.2rem;
+}
+
+input {
+  width: 14rem;
+  font-size: 1.2rem;
+}
+
+.body {
+  height: 720px;
+  align-items: center;
+}
+
+.field {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+}
+
+.form-box {
+  align-items: center;
+  border-color: black;
+  border-radius: 2rem;
+  border-style: solid;
+  border-width: 0.4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around; 
+  width: 30rem;
+  height: 20rem;
+}
+
+.form-type {
+  text-transform: capitalize;
+}

src/components/userform/UserForm.jsx

@@ -0,0 +1,24 @@
+import "./UserForm.css";
+import { useRef } from "react";
+
+export default function UserForm( {type, onClick} ) {
+  const usernameRef = useRef();
+  const passwordRef = useRef();
+
+  return (
+    <div className="form-box">
+      <h1 className="form-type">{type}</h1>
+      <div className="field"> 
+        <label>Username</label>
+        <input ref={usernameRef} type="text" name="username" placeholder="Username" /> 
+      </div>
+      <div className="field"> 
+        <label>Password</label>
+        <input ref={passwordRef} type="text" name="password" placeholder="Password" /> 
+      </div>
+      <div className="field"> 
+        <button type="submit" onClick={() => {onClick(usernameRef.current.value, passwordRef.current.value)}}>Login</button>
+      </div>
+    </div>
+  )
+}

src/constants/constants.js

@@ -0,0 +1,3 @@
+export const backendURL = "http://localhost:3000";
+export const languages = ["c", "python", "javascript", "java"];
+

src/pages/home/BlogData.jsx

@@ -0,0 +1,74 @@
+const blogData = [
+  {
+      title : "Why use C++",
+      date : "10 July 2023",
+      content : "C++ is very fast"
+  },
+  {
+      title : "Why use C++",
+      date : "10 July 2023",
+      content : "C++ is very fast"
+  },
+  {
+      title : "Why use C++ users hate Java",
+      date : "2 July 2023",
+      content : "Java is very verbose"
+  },
+  {
+      title : "Why Java is better than C++",
+      date : "5 March 2023",
+      content : "No Pointers and cross platforms"
+  },
+  {
+      title : "Why Ai will take your job",
+      date : "1 March 2023",
+      content : "Because Ai can do alot of automation, that required humans"
+  },
+  {
+      title : "What jobs will Ai Create",
+      date : "28 Feb 2023",
+      content : "Ai and Ml engineering jobs"
+  },
+  {
+      title : "Is Python the real chad or Javascript",
+      date : "15 Feb 2023",
+      content : "Its like asking is IronMan better than Thor or Captain America"
+  },
+  {
+      title : "Why use C++",
+      date : "10 July 2023",
+      content : "C++ is very fast"
+  },
+  {
+      title : "Why use C++",
+      date : "10 July 2023",
+      content : "C++ is very fast"
+  },
+  {
+      title : "Why use C++ users hate Java",
+      date : "2 July 2023",
+      content : "Java is very verbose"
+  },
+  {
+      title : "Why Java is better than C++",
+      date : "5 March 2023",
+      content : "No Pointers and cross platforms"
+  },
+  {
+      title : "Why Ai will take your job",
+      date : "1 March 2023",
+      content : "Because Ai can do alot of automation, that required humans"
+  },
+  {
+      title : "What jobs will Ai Create",
+      date : "28 Feb 2023",
+      content : "Ai and Ml engineering jobs"
+  },
+  {
+      title : "Is Python the real chad or Javascript",
+      date : "15 Feb 2023",
+      content : "Its like asking is IronMan better than Thor or Captain America"
+  },
+]
+
+export default blogData;

src/pages/home/Home.css

@@ -0,0 +1,29 @@
+.blog {
+  background-color: var(--secondary);
+  border-style: solid solid none solid;
+  border-width: 5px;
+  display: flex;
+  height: 7rem;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 1rem;
+  box-shadow: 10px 10px 8px #888888;
+}
+.blog:first-child {
+  border-radius: 1rem 1rem 0 0;
+}
+.blog:last-child {
+  border-style: solid;
+  border-radius: 0 0 1rem 1rem;
+}
+
+.blogs {
+  margin-top: 4rem;
+  margin-bottom: 7rem;
+
+}
+
+.main {
+  width: 100%;
+}
+