Frontend created: Tables, Login, Routes

package.json

@@ -10,12 +10,16 @@
   },
   "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",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.2",
     "vite": "^4.2.0"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.css

@@ -1,42 +1 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.jsx

@@ -1,59 +1,60 @@
+import { Routes, Route, BrowserRouter } from "react-router-dom";
+import { Link } from "react-router-dom";
+import Login from "./Login";
+import ProblemsPage from "./ProblemsPage";
+import Home from "./Home";
+
 /*
  * 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() {
-
-    /* Add routing here, routes look like -
+  /* Add routing here, routes look like -
        /login - Login page
        /signup - Signup page
        /problemset/all/ - All problems (see problems array above)
        /problems/:problem_slug - A single problem page
      */
 
-    return (
-    <div>
-        Finish the assignment! Look at the comments in App.jsx as a starting point
-    </div>
-  )
+  return (
+    <>
+      <nav className="p-4 bg-gray-900 text-gray-400">
+        <ul className="flex justify-evenly items-center">
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/problemset/all">Problems</Link>
+          </li>
+          <li>
+            <Link to="/login">Login</Link>
+          </li>
+        </ul>
+      </nav>
+
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        {/* <Route path="/signup" element/> */}
+        <Route path="/problemset/all/" element={<ProblemsPage />} />
+        {/* <Routes path="/problems/:problem_slug" /> */}
+      </Routes>
+    </>
+  );
 }
 
 // A demo component
 function ProblemStatement(props) {
-    const title = props.title;
-    const acceptance = props.acceptance;
-    const difficulty = props.difficulty;
+  const title = props.title;
+  const acceptance = props.acceptance;
+  const difficulty = props.difficulty;
 
-    return <tr>
-        <td>
-            {title}
-        </td>
-        <td>
-            {acceptance}
-        </td>
-        <td>
-            {difficulty}
-        </td>
+  return (
+    <tr>
+      <td>{title}</td>
+      <td>{acceptance}</td>
+      <td>{difficulty}</td>
     </tr>
+  );
 }
-export default App
+export default App;

src/Home.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+function Home() {
+  return (
+    <div className="h-auto flex items-center justify-center">
+      <h1 className="text-gray-300 bg-gray-800 p-10 m-4 text-5xl rounded-xl">
+        Welcome to MeetCode 🀄
+      </h1>
+    </div>
+  );
+}
+
+export default Home;

src/Login.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+function Login() {
+  return (
+    <div className="text-gray-500 flex justify-center items-center">
+      <div className="bg-gray-800 h-max m-3 rounded-lg w-96 p-10 flex flex-col items-center justify-center gap-8">
+        <h1 className="text-5xl">👨‍💻 </h1>
+        <h1 className="text-xl ">
+          Login to <span className="text-indigo-200">MeetCode</span>
+        </h1>
+        <input
+          type="text"
+          placeholder="Enter Your Email"
+          className="p-2 rounded-md min-w-full"
+        />
+        <input
+          type="text"
+          placeholder="Enter Your Password"
+          className="p-2 rounded-md min-w-full"
+        />
+        <button className="bg-indigo-600 p-2 min-w-full rounded-md text-gray-100">
+          Login
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

src/ProblemsAll.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+function ProblemsAll(props) {
+  return (
+    <tr
+      className={
+        props.index % 2 === 0 ? "bg-gray-900 problem" : "bg-gray-800 problem"
+      }
+    >
+      <td className="">{props.title}</td>
+      <td
+        className={
+          props.difficulty === "Easy"
+            ? "text-green-600"
+            : props.difficulty === "Medium"
+            ? "text-yellow-600"
+            : "text-red-600"
+        }
+      >
+        {props.difficulty}
+      </td>
+      <td className="">{props.acceptance}</td>
+    </tr>
+  );
+}
+
+export default ProblemsAll;

src/ProblemsPage.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+import ProblemsAll from "./ProblemsAll";
+
+const problems = [
+  {
+    title: "Bitwise AND of Numbers Range",
+    difficulty: "Medium",
+    acceptance: "42%",
+  },
+  {
+    title: "Bitwise AND of Numbers Range",
+    difficulty: "Medium",
+    acceptance: "41%",
+  },
+  {
+    title: "Happy Number",
+    difficulty: "Easy",
+    acceptance: "54.9%",
+  },
+  {
+    title: "Remove Linked List Elements",
+    difficulty: "Hard",
+    acceptance: "42%",
+  },
+  {
+    title: "Palindrome Number",
+    difficulty: "Easy",
+    acceptance: "56%",
+  },
+  {
+    title: "Two Sum",
+    difficulty: "Easy",
+    acceptance: "75%",
+  },
+  {
+    title: "Longest Substring Without Repeating Characters",
+    difficulty: "Medium",
+    acceptance: "34%",
+  },
+  {
+    title: "Merge Two Sorted Lists",
+    difficulty: "Easy",
+    acceptance: "68%",
+  },
+  {
+    title: "Search in Rotated Sorted Array",
+    difficulty: "Hard",
+    acceptance: "33%",
+  },
+  {
+    title: "Reverse Integer",
+    difficulty: "Easy",
+    acceptance: "47%",
+  },
+];
+
+function ProblemsPage() {
+  return (
+    <div className="text-gray-300 flex-col m-4 p-4 bg-gray-900 rounded-lg">
+      <h1 className="text-3xl mb-5">🧮 All Problems</h1>
+      <h1 className="text-xl mb-5 text-gray-600">
+        Check out all these problems
+      </h1>
+      <table className="w-full">
+        <thead className="border-y border-indigo-800">
+          <tr>
+            <th>Title</th>
+            <th>Difficulty</th>
+            <th>Acceptance</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {problems.map((items, index) => {
+            return (
+              <ProblemsAll
+                index={index}
+                title={items.title}
+                difficulty={items.difficulty}
+                acceptance={items.acceptance}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default ProblemsPage;

src/index.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  body {
+    @apply h-screen bg-gray-950;
+  }
+  input {
+    @apply focus-visible:outline-indigo-500;
+  }
+  button {
+    @apply hover:bg-indigo-900;
+  }
+  th {
+    @apply text-left p-4;
+  }
+  td {
+    @apply p-3 w-full;
+  }
+  .problem {
+    @apply hover:bg-gray-700 hover:cursor-pointer;
+  }
+  tr {
+    @apply border-b border-indigo-900 w-screen;
+  }
+}

src/main.jsx

@@ -1,10 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};