created the front-end and added the routes

.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}

package.json

@@ -1,21 +1,31 @@
 {
-  "name": "leet-code-frontend",
+  "name": "test1",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.1"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^3.1.0",
-    "vite": "^4.2.0"
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2",
+    "vite": "^4.3.9"
   }
 }

postcss.config.js

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

src/App.css

@@ -1,4 +1,4 @@
-#root {
+/* #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
@@ -39,4 +39,4 @@
 
 .read-the-docs {
   color: #888;
-}
+} */

src/App.jsx

@@ -1,59 +1,156 @@
-/*
- * 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%"
-    }];
 
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import HomePage from './components/HomePage';
+import Navbar from './components/Navbar'
+import Problems from './components/Problems';
+import ProblemDetails from './components/ProblemDetails';
+import Login from './components/Login';
+import Signup from './components/Signup';
+import Testing from './components/Testing';
 
-function App() {
 
-    /* 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
-     */
+const App = () => {
 
-    return (
-    <div>
-        Finish the assignment! Look at the comments in App.jsx as a starting point
-    </div>
-  )
-}
+  const problemlist = [
+    {
+      id: "1",
+      title: 'Two Sum',
+      description: 'Given an array of integers, return indices of the two numbers such that they add up to a specific target.',
+      acceptanceRate: '70%',
+      difficulty: 'Easy',
+      input: [2, 7, 11, 15],
+      output: 9,
+    },
+    {
+      id: "2",
+      title: 'Reverse String',
+      description: 'Write a function that reverses a string. The input string is given as an array of characters.',
+      acceptanceRate: '85%',
+      difficulty: 'Easy',
+      input: ['h', 'e', 'l', 'l', 'o'],
+      output: 'olleh',
+    },
+    {
+      id: "3",
+      title: 'Palindrome Number',
+      description: 'Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same backward as forward.',
+      acceptanceRate: '60%',
+      difficulty: 'Medium',
+      input: 121,
+      output: 'true',
+    },
+    {
+      id: "4",
+      title: 'FizzBuzz',
+      description: 'Write a program that outputs the string representation of numbers from 1 to n. But for multiples of three, it should output "Fizz" instead of the number and for the multiples of five output "Buzz". For numbers which are multiples of both three and five, output "FizzBuzz".',
+      acceptanceRate: '25%',
+      difficulty: 'Hard',
+      input: 15,
+      output: [
+        '1',
+        '2',
+        'Fizz',
+        '4',
+        'Buzz',
+        'Fizz',
+        '7',
+        '8',
+        'Fizz',
+        'Buzz',
+        '11',
+        'Fizz',
+        '13',
+        '14',
+        'FizzBuzz',
+      ],
+    },
+    {
+      id: "5",
+      title: 'Valid Parentheses',
+      description: 'Given a string containing just the characters "(", ")", "{", "}", "[", and "]", determine if the input string is valid.',
+      acceptanceRate: '80%',
+      difficulty: 'Medium',
+      input: 'String s = "tailwindcss_is_so{coo)"',
+      output: 'true',
+    },
+    {
+      id: "6",
+      title: 'Longest Common Prefix',
+      description: 'Write a function to find the longest common prefix string amongst an array of strings. If there is no common prefix, return an empty string "".',
+      acceptanceRate: '70%',
+      difficulty: 'Easy',
+      input: ['flower', 'flow', 'flight'],
+      output: 'fl',
+    },
+    {
+      id: "7",
+      title: 'Merge Two Sorted Lists',
+      description: 'Merge two sorted linked lists and return it as a sorted list. The list should be made by splicing together the nodes of the first two lists.',
+      acceptanceRate: '75%',
+      difficulty: 'Easy',
+      input: [[1, 2, 4], [1, 3, 4]],
+      output: [1, 1, 2, 3, 4, 4],
+    },
+    {
+      id: "8",
+      title: 'Reverse Integer',
+      description: 'Given a signed 32-bit integer x, return x with its digits reversed. If reversing x causes the value to go outside the signed 32-bit integer range [-231, 231 - 1], then return 0.',
+      acceptanceRate: '35%',
+      difficulty: 'Hard',
+      input: 123,
+      output: 321,
+    },
+    {
+      id: "9",
+      title: 'Valid Anagram',
+      description: 'Given two strings s and t, return true if t is an anagram of s, and false otherwise.',
+      acceptanceRate: '70%',
+      difficulty: 'Medium',
+      input: ['anagram', 'nagaram'],
+      output: 'true',
+    },
+    {
+      id: "10",
+      title: 'Remove Duplicates from Sorted Array',
+      description: 'Given a sorted array nums, remove the duplicates in-place such that each element appears only once and returns the new length.',
+      acceptanceRate: '75%',
+      difficulty: 'Easy',
+      input: [0, 0, 1, 1, 1, 2, 2, 3, 3, 4],
+      output: 5,
+    },
+    {
+      id: "11",
+      title: 'Search Insert Position',
+      description: 'Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order.',
+      acceptanceRate: '65%',
+      difficulty: 'Medium',
+      input: [1, 3, 5, 6],
+      output: 5,
+    },
+    {
+      id: "12",
+      title: 'Valid Palindrome',
+      description: 'Given a string s, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.',
+      acceptanceRate: '70%',
+      difficulty: 'Easy',
+      input: 'A man, a plan, a canal: Panama',
+      output: true,
+    },
+  ];
 
-// A demo component
-function ProblemStatement(props) {
-    const title = props.title;
-    const acceptance = props.acceptance;
-    const difficulty = props.difficulty;
+  return (
+    <>
+        {/* <Testing/> */}
+        <Routes>
+          <Route path='/' element={<div><Navbar/><HomePage/></div>}/>
+          <Route path='/problems' element={<Problems problemlist={problemlist}/>} />
+          <Route path='/login' element={<Login/>} />
+          <Route path='/signup' element={<Signup/>} />
+          <Route path='/problem/:pid/' element={<ProblemDetails problemlist={problemlist}/>} />
+        </Routes>
+    </>
+  );
+};
 
-    return <tr>
-        <td>
-            {title}
-        </td>
-        <td>
-            {acceptance}
-        </td>
-        <td>
-            {difficulty}
-        </td>
-    </tr>
-}
-export default App
+export default App;

src/components/Auth.jsx

@@ -0,0 +1,77 @@
+
+import React, { useState } from 'react';
+
+const Auth = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [registeredUsers, setRegisteredUsers] = useState([]);
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+    // Perform login logic here
+    const user = registeredUsers.find((user) => user.email === email && user.password === password);
+    if (user) {
+      setLoggedIn(true);
+      setEmail('');
+      setPassword('');
+    } else {
+      alert('Invalid email or password');
+    }
+  };
+
+  const handleSignup = (e) => {
+    e.preventDefault();
+    // Perform signup logic here
+    const user = registeredUsers.find((user) => user.email === email);
+    if (user) {
+      alert('Email already registered');
+    } else {
+      const newUser = {
+        email,
+        password,
+      };
+      setRegisteredUsers([...registeredUsers, newUser]);
+      setLoggedIn(true);
+      setEmail('');
+      setPassword('');
+    }
+  };
+
+  const handleLogout = () => {
+    setLoggedIn(false);
+  };
+
+  if (loggedIn) {
+    return (
+      <div>
+        <h2>Welcome, User!</h2>
+        <button onClick={handleLogout}>Logout</button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h2>Login or Signup</h2>
+      <form>
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button onClick={handleLogin}>Login</button>
+        <button onClick={handleSignup}>Signup</button>
+      </form>
+    </div>
+  );
+};
+
+export default Auth;

src/components/Code.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Code = () => {
+  return (
+    <div>Code</div>
+  )
+}
+
+export default Code