diff --git a/README.md b/README.md index 83f3a207..0eabc906 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,28 @@ -## Full stack assignment +

Leetcode

+ +
    +
  1. Problem Repository: Browse and search a wide range of coding problems categorized by topics and difficulty levels.
    2. -### Video - -Link to video - https://www.youtube.com/watch?v=569YZm0X5-0 - -### Where to start? -Look at App.jsx inside the src/ folder +
+

Technologies Used

+ +

Getting Started

+
    +
  1. Clone the repository: git clone t
    2. +
  2. Navigate to the project directory: cd leetcode-clone
    3. +
  3. Install the dependencies: npm install
    4. + +
  4. Start the development server: npm start
    5. +
  5. Access the application in your browser at http://localhost:3000.
    6. +
+

Contributing

+

Contributions are welcome! If you would like to contribute to this project, please follow these steps:

+
    +
  1. Fork the repository.
    2. +
  2. Create a new branch: git checkout -b feature/your-feature
    3. +
  3. Make your changes and commit them: git commit -m 'Add your feature'
    4. +
  4. Push to the branch: git push origin feature/your-feature
    5. +
  5. Open a pull request and describe your changes.
    6. +
diff --git a/index.html b/index.html index 79c47019..e064d9b1 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,21 @@ - - - - - Vite + React - - -
- - + + + + + + LeetCode By Sree + + + + +
+ + + + diff --git a/package-lock.json b/package-lock.json index cd606935..4a36cfa9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "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", @@ -766,6 +767,14 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==", + "engines": { + "node": ">=14" + } + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -1226,6 +1235,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "dependencies": { + "@remix-run/router": "1.6.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "dependencies": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -1853,6 +1892,11 @@ } } }, + "@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2176,6 +2220,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "requires": { + "@remix-run/router": "1.6.2" + } + }, + "react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "requires": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + } + }, "resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", diff --git a/package.json b/package.json index 154dd4dd..208323e3 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355df..00000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#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; -} diff --git a/src/App.jsx b/src/App.jsx index 7743965b..10f21a70 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,59 +1,26 @@ -/* - * 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 - - /login - Login page - /signup - Signup page - /problemset/all/ - All problems (see problems array above) - /problems/:problem_slug - A single problem page - */ +import React from 'react' +import { Route, Routes } from 'react-router-dom'; +import HomePage from './containers/HomePage'; +import Layout from './Layout/Layout'; +import Login from './containers/Auth/Login'; +import Pagenotfound from './containers/Pagenotfound'; +import Register from './containers/Auth/Register'; +import AllProblems from './containers/AllProblems'; +import Problem from './containers/Problem'; +const App = () => { return ( -
- Finish the assignment! Look at the comments in App.jsx as a starting point -
- ) + <> + + } /> + } /> + } /> + } /> + } /> + } /> + + + ) } -// A demo component -function ProblemStatement(props) { - const title = props.title; - const acceptance = props.acceptance; - const difficulty = props.difficulty; - - return - - {title} - - - {acceptance} - - - {difficulty} - - -} export default App diff --git a/src/Layout/Footer.jsx b/src/Layout/Footer.jsx new file mode 100644 index 00000000..1d50e685 --- /dev/null +++ b/src/Layout/Footer.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Footer = () => { + return ( +
+

All Right's Reserved © Sree

+

+ About | + Contact | + Privacy Policy +

+
+ ); +}; + +export default Footer; diff --git a/src/Layout/Layout.jsx b/src/Layout/Layout.jsx new file mode 100644 index 00000000..3b25ce6d --- /dev/null +++ b/src/Layout/Layout.jsx @@ -0,0 +1,18 @@ +import React from 'react' +import Footer from '../Layout/Footer' +import HomePage from '../containers/HomePage' +import Header from '../containers/Header' + +const Layout = ({ children }) => { + return ( +
+
+
{children}
+ +
+ ) +} + +export default Layout diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/constants/Questions.jsx b/src/constants/Questions.jsx new file mode 100644 index 00000000..7f563a41 --- /dev/null +++ b/src/constants/Questions.jsx @@ -0,0 +1,234 @@ +const problems1 = [ + { + id: "1", + title: "Two Sum", + Statement: "Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.\n" + + " You may assume that each input would have exactly one solution, and you may not use the same element twice.\n " + + "You can return the answer in any order.", + difficulty: "Medium", + acceptance: "42%", + staus: 20, + examples: [ + { + key: 1, + input: " nums: [2, 7, 11, 15], target: 9 ", + output: "[0, 1]", + explanation: "Because nums[0] + nums[1] == 9, we return [0, 1]." + }, + { + key: 2, + input: "nums: [3, 2, 4], target: 6", + output: "[1, 2]", + explanation: "null" + } + ] + }, { + id: "2", + title: "Maximum Subarray", + Statement: "Given an integer array nums, find the contiguous subarray (containing at least one number) which has the largest sum and return its sum.", + difficulty: "Easy", + acceptance: "50%", + staus: 30, + + examples: [ + { + key: 1, + input: "nums: [-2, 1, -3, 4, -1, 2, 1, -5, 4] ", + output: 6, + explanation: "[4,-1,2,1] has the largest sum = 6." + }, + { + key: 2, + input: "nums: [1] ", + output: "1", + explanation: "null" + } + ] + }, { + id: "3", + title: "Merge Two Sorted Lists", + Statement: "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.", + difficulty: "Easy", + acceptance: "53%", + staus: 40, + + examples: [ + { + key: 1, + input: "l1: [1, 2, 4], l2: [1, 3, 4]", + output: "[1, 1, 2, 3, 4, 4]", + explanation: "null" + }, + { + key: 2, + input: "l1: [], l2: []", + output: "[]", + explanation: "null" + } + ] + }, { + id: "4", + title: "Reverse Integer", + Statement: "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.", + difficulty: "Easy", + acceptance: "27%", + staus: 50, + + examples: [ + { + key: 1, + input: " x: 123 ", + output: "321", + explanation: "null" + }, + { + key: 2, + input: "x: -123", + output: "-321", + explanation: "null" + } + ] + } + , + { + id: "5", + title: "Binary Search", + statement: "Given an array of integers nums which is sorted in ascending order, and an integer target, write a function to search target in nums. If target exists, then return its index. Otherwise, return -1.", + difficulty: "Easy", + acceptance: "52%", + staus: 60, + + examples: [ + { + key: 1, + input: "nums = [-1,0,3,5,9,12], target = 9", + output: "4", + explanation: "9 exists in nums and its index is 4." + }, + { + key: 2, + input: "nums = [-1,0,3,5,9,12], target = 2", + output: "-1", + explanation: "2 does not exist in nums, so return -1." + } + ] + }, + { + id: "6", + title: "Valid Parentheses", + statement: "Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid. An input string is valid if:", + difficulty: "Easy", + acceptance: "43%", + staus: 20, + + examples: [ + { + key: 1, + input: "s = \"()\"", + output: "true", + explanation: "The string contains a pair of valid parentheses." + }, + { + key: 2, + input: "s = \"([)]\"", + output: "false", + explanation: "The string contains an invalid pair of parentheses, so return false." + } + ] + } +] + +const problems2 = [{ + id: "8", + title: "Longest Palindromic Substring", + statement: "Given a string s, return the longest palindromic substring in s.", + difficulty: "Medium", + acceptance: "30%", + staus: 80, + + examples: [ + { + key: 1, + input: 'babad', + output: 'bab', + note: 'aba is also a valid answer' + }, + { + key: 2, + input: 'cbbd', + output: 'bb' + } + ] +}, +{ + id: "9", + + title: "Median of Two Sorted Arrays", + Statement: "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.", + difficulty: "Hard", + acceptance: "30%", + staus: 40, + + examples: [ + { + key: 1, + input: " nums1: [1,3], nums2: [2] ", + output: "2.00000", + explanation: "merged array = [1,2,3] and median is 2." + }, + { + key: 2, + input: "nums1: [1,2], nums2: [3,4]", + output: "2.50000", + explanation: "merged array = [1,2,3,4] and median is (2 + 3) / 2 = 2.5." + } + ] +}, +{ + id: "10", + title: "Regular Expression Matching", + Statement: "Given an input string s and a pattern p, implement regular expression matching with support for '.' and '*' where:\n\n'.' Matches any single character.\n'*' Matches zero or more of the preceding element.", + difficulty: "Hard", + acceptance: "27%", + staus: 50, + + examples: [ + { + key: 1, + input: "s :aa, p: a ", + output: false, + explanation: "'a' does not match the entire string 'aa'." + }, + { + key: 2, + input: "s: mississippi, p: mis*is*p*", + output: "false", + explanation: "The pattern 'mis*is*p*.' does not match the entire string 'mississippi'." + } + ] +}, +{ + id: "11", + title: "Container With Most Water", + Statement: "Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). n vertical lines are drawn such that the two endpoints of the line i is at (i, ai) and (i, 0). Find two lines, which, together with the x-axis forms a container, such that the container contains the most water.", + difficulty: "Medium", + acceptance: "51%", + staus: 70, + + examples: [ + { + key: 1, + input: "[1,8,6,2,5,4,8,3,7]", + output: "49", + explanation: "The above vertical lines (with arrows) are drawn to scale. The two lines that form the container are between indexes 1 and 8, and contain 49 units of water." + }, + { + key: 2, + input: "[1,1]", + output: "1" + } + ] +} +] + +export { problems1, problems2 } diff --git a/src/containers/AllProblems.jsx b/src/containers/AllProblems.jsx new file mode 100644 index 00000000..03677f45 --- /dev/null +++ b/src/containers/AllProblems.jsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { useState } from "react"; +import { Link } from "react-router-dom"; +import Layout from '../Layout/Layout.jsx'; +import { problems1, problems2 } from '../constants/Questions.jsx'; + + + +const AllProblems = () => { + const [problems, setProblem] = useState(problems1); + + + return ( + +
+ + + + + + + + + + + { + problems.map(problem => { + return ( + + + + + + ) + }) + } + + +
TitleDifficultyAcceptanceStatus
+ {problem.title} + + + { + problem.difficulty + } + + { + problem.acceptance + } + + +
+ +
+ + ); +} + +export default AllProblems; diff --git a/src/containers/Auth/Login.jsx b/src/containers/Auth/Login.jsx new file mode 100644 index 00000000..850d23bf --- /dev/null +++ b/src/containers/Auth/Login.jsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react' +import Layout from '../../Layout/Layout'; +import { useNavigate } from 'react-router-dom'; + + +const Login = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + + const navigate = useNavigate(); + const submitHandle = () => { + navigate('/') + } + return ( + +
+
+

Login Form

+
+ setEmail(e.target.value)} + placeholder='Enter your Email' + type='email' + className='form-control border border-0 rounded-0' + id='exampleInputEmail1' + required + aria-describedby='emailHelp' + autoFocus + /> +
+
+ setPassword(e.target.value)} + placeholder='Enter your Password' + type='password' + required + className='form-control border border-0 rounded-0' + id='exampleInputPassword1' + /> +
+ + navigate('/forgot-password')} + > + Forgot Password? + + +
+
+ + ) +} + +export default Login diff --git a/src/containers/Auth/Register.jsx b/src/containers/Auth/Register.jsx new file mode 100644 index 00000000..9c2f5155 --- /dev/null +++ b/src/containers/Auth/Register.jsx @@ -0,0 +1,91 @@ +import React, { useState } from 'react' +import Layout from '../../Layout/Layout'; +import { useNavigate } from 'react-router-dom'; + + +const Register = () => { + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + + const navigate = useNavigate(); + const submitHandle = () => { + navigate('/') + } + return ( + +
+
+

Register Form

+
+ setName(e.target.value)} + placeholder='Enter your Name' + type='text' + className='form-control border border-0 rounded-0' + id='exampleInputName' + required + autoFocus + /> +
+
+ setEmail(e.target.value)} + placeholder='Enter your Email' + type='email' + className='form-control border border-0 rounded-0' + id='exampleInputEmail1' + required + aria-describedby='emailHelp' + autoFocus + /> +
+ +
+ setPassword(e.target.value)} + placeholder='Enter your Password' + type='password' + required + className='form-control border border-0 rounded-0' + id='exampleInputPassword1' + /> +
+ + + + + Already have an account? + navigate('/login')} + > + Sign In + + +
+
+ + ) +} + +export default Register diff --git a/src/containers/Header.jsx b/src/containers/Header.jsx new file mode 100644 index 00000000..01239f9e --- /dev/null +++ b/src/containers/Header.jsx @@ -0,0 +1,78 @@ +import React from 'react' +import { NavLink, Link } from 'react-router-dom'; + +const Header = ({ headerVisible }) => { + return ( +
+ + + + +
+ ) +} + +export default Header diff --git a/src/containers/HomePage.jsx b/src/containers/HomePage.jsx new file mode 100644 index 00000000..5ca6e59b --- /dev/null +++ b/src/containers/HomePage.jsx @@ -0,0 +1,22 @@ +import React from 'react' +import Layout from '../Layout/Layout'; +import { Link } from "react-router-dom"; + + +const HomePage = () => { + return ( +
+ +

Welcome to LeetCode Home page

+

To view Problems click on below button

+ + +
+ ) +} + +export default HomePage diff --git a/src/containers/Pagenotfound.jsx b/src/containers/Pagenotfound.jsx new file mode 100644 index 00000000..d5259df2 --- /dev/null +++ b/src/containers/Pagenotfound.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import Layout from '../Layout/Layout' + + +const Pagenotfound = () => { + return ( + +
+

404

+

Oops ! Page not found..

+ + Go Back + +
+ + ); +}; + +export default Pagenotfound; diff --git a/src/containers/Problem.jsx b/src/containers/Problem.jsx new file mode 100644 index 00000000..614633d0 --- /dev/null +++ b/src/containers/Problem.jsx @@ -0,0 +1,158 @@ +import { Link, useLocation } from "react-router-dom"; +import { useState } from "react"; + +const launguages = [ + { + key: 0, + language: "JavaScript", + "code": "// start code\n\nfunction twoSum() {\n \ console.log('Hello, world!')\;\n }" + }, + { + key: 1, + language: "C++", + "code": "// start code\n#include \nusing namespace std;\n\nint main() {\n cout << \"Hello, world!\";\n return 0;\n}" + }, + { + key: 2, + language: "Python", + "code": "# start code\nprint(\"Hello, world!\")" + }, + { + key: 3, + language: "Java", + "code": "// start code\npublic class HelloWorld {\n public static void main(String[] args) {\n System.out.println(\"Hello, world!\");\n }\n}" + }, + { + key: 4, + language: "C", + "code": "// start code\n#include \n\nint main() {\n printf(\"Hello, world!\\n\");\n return 0;\n}" + } +] + +const Problem = () => { + const [rows, setRows] = useState(15); + const [columns, setColumns] = useState(85); + const location = useLocation(); + const propsData = location.state; + const [selectedOption, setSelectedOption] = useState('JavaScript'); + const [samplecode, setSampleCode] = useState(launguages[0].code) + + const handleOptionChange = (event) => { + setSelectedOption(event.target.value); + launguages.map(lang => { + + if (lang.language === event.target.value) { + return setSampleCode(lang.code); + } + + }); + } + + + const handletextchange = () => setSampleCode(event.target.value); + + + return ( + <> + +
+
+ +
+
+

{propsData.id}. {propsData.title}

+
+
+ +
+
+ {propsData.Statement} +
+

+
+ { + propsData.examples.map(exam => { + return (
+
+ Example {exam.key} +
+
+

Input: {exam.input}

+

Output: {exam.output}

+

Explanation: {exam.explanation}

+
+
) + }) + } + +
+
+
+ Constraints +
+
    +
  • 2<=nums.length<=04
    • +
  • Output: [0,1]
    • +
  • Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].
    • +
+
+ +
+
+
+ +
+
+ + + +
+ + + + +
+ +
+
+ + ); +} + +export default Problem diff --git a/src/index.css b/src/index.css index e69de29b..6309dd4f 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,25 @@ +.footer { + color: white; + padding: 10px; + background: #000; + background: -webkit-linear-gradient(to right, #4343, #000); + background: linear-gradient(to right, #434343, #000); +} + +.cursor-pointer { + cursor: pointer; +} + +.text-small { + font-size: smaller; +} + +.center { + margin: 10vw; + margin-top: 1vw; +} + +a { + text-decoration: none; + color: black; +} diff --git a/src/main.jsx b/src/main.jsx index 5cc59919..7ce3c4dd 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -2,9 +2,10 @@ 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( - + - , + , )