From 109da0731ac09e25149f8a3d2e8bfa596b03597d Mon Sep 17 00:00:00 2001 From: hopansh Date: Sun, 11 Feb 2024 02:25:59 +0530 Subject: [PATCH 1/4] Frontend setup & UI Implementation. --- frontend/.eslintrc.cjs | 21 ++++ frontend/.gitignore | 25 +++++ frontend/README.md | 8 ++ frontend/index.html | 13 +++ frontend/package.json | 31 ++++++ frontend/public/vite.svg | 1 + frontend/src/App.jsx | 42 +++++++ frontend/src/View/Home.jsx | 20 ++++ frontend/src/View/Logs.jsx | 105 ++++++++++++++++++ frontend/src/View/Submission.jsx | 69 ++++++++++++ frontend/src/components/Button.jsx | 30 +++++ frontend/src/components/ErrorBoundary.jsx | 29 +++++ frontend/src/components/Header.jsx | 127 ++++++++++++++++++++++ frontend/src/components/Input.jsx | 27 +++++ frontend/src/components/Welcome.jsx | 44 ++++++++ frontend/src/index.css | 74 +++++++++++++ frontend/src/main.jsx | 13 +++ frontend/src/service/apiService.js | 26 +++++ frontend/vite.config.js | 12 ++ 19 files changed, 717 insertions(+) create mode 100644 frontend/.eslintrc.cjs create mode 100644 frontend/.gitignore create mode 100644 frontend/README.md create mode 100644 frontend/index.html create mode 100644 frontend/package.json create mode 100644 frontend/public/vite.svg create mode 100644 frontend/src/App.jsx create mode 100644 frontend/src/View/Home.jsx create mode 100644 frontend/src/View/Logs.jsx create mode 100644 frontend/src/View/Submission.jsx create mode 100644 frontend/src/components/Button.jsx create mode 100644 frontend/src/components/ErrorBoundary.jsx create mode 100644 frontend/src/components/Header.jsx create mode 100644 frontend/src/components/Input.jsx create mode 100644 frontend/src/components/Welcome.jsx create mode 100644 frontend/src/index.css create mode 100644 frontend/src/main.jsx create mode 100644 frontend/src/service/apiService.js create mode 100644 frontend/vite.config.js diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs new file mode 100644 index 0000000..3e212e1 --- /dev/null +++ b/frontend/.eslintrc.cjs @@ -0,0 +1,21 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, + settings: { react: { version: '18.2' } }, + plugins: ['react-refresh'], + rules: { + 'react/jsx-no-target-blank': 'off', + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..0fd6913 --- /dev/null +++ b/frontend/.gitignore @@ -0,0 +1,25 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? +package-lock.json diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..f768e33 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,8 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..2cd72bc --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,13 @@ + + + + + + + Vercel Clone + + +
+ + + diff --git a/frontend/package.json b/frontend/package.json new file mode 100644 index 0000000..3d2375d --- /dev/null +++ b/frontend/package.json @@ -0,0 +1,31 @@ +{ + "name": "vercel-clone", + "private": true, + "version": "1.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "@emotion/react": "^11.11.3", + "@emotion/styled": "^11.11.0", + "axios": "^1.6.7", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.22.0", + "socket.io-client": "^4.7.4" + }, + "devDependencies": { + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.19", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.56.0", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "vite": "^5.1.0" + } +} diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/frontend/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx new file mode 100644 index 0000000..d4f6b27 --- /dev/null +++ b/frontend/src/App.jsx @@ -0,0 +1,42 @@ +import styled from "@emotion/styled"; +import Header from "./components/Header"; +import Home from "./View/Home"; +import Logs from "./View/Logs"; +import Submission from "./View/Submission"; +import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; + +function App() { + const Styled = styled.div` + width: 100vw; + height: 100vh; + overflow: hidden; + .header { + height: 80px; + } + .body { + height: calc(100% - 80px); + display: flex; + justify-content: center; + align-items: center; + overflow-x: hidden; + overflow-y: auto; + } + `; + + return ( + + +
+
+ + } /> + } /> + } /> + +
+ + + ); +} + +export default App; diff --git a/frontend/src/View/Home.jsx b/frontend/src/View/Home.jsx new file mode 100644 index 0000000..f882dce --- /dev/null +++ b/frontend/src/View/Home.jsx @@ -0,0 +1,20 @@ +import styled from "@emotion/styled"; +import React from "react"; +import Welcome from "../components/Welcome"; + +const Home = () => { + const Styled = styled.div` + padding: 20px; + text-align: center; + @media (max-width: 768px) { + padding: 10px; + } + `; + return ( + + + + ); +}; + +export default Home; diff --git a/frontend/src/View/Logs.jsx b/frontend/src/View/Logs.jsx new file mode 100644 index 0000000..8521815 --- /dev/null +++ b/frontend/src/View/Logs.jsx @@ -0,0 +1,105 @@ +import styled from "@emotion/styled"; +import React, { useEffect, useMemo, useState } from "react"; +import socketIO from "socket.io-client"; +import Input from "../components/Input"; +import Button from "../components/Button"; + +function Logs({ defaultRepo = "" }) { + const Styled = useMemo( + () => styled.div` + padding: 20px; + text-align: center; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + @media (max-width: 768px) { + padding: 10px; + } + .log-container { + min-height: 200px; + width: fit-content; + max-height: 400px; + @media (max-width: 768px) { + max-height: 300px; + } + width: calc(100% - 40px); + background: #000; + color: #fff; + overflow-y: auto; + padding: 10px; + border-radius: 8px; + text-align: left; + font-size: 8px; + } + .error-text { + margin: 4px 2px; + color: red; + font-size: 12px; + text-align: center; + } + .title { + margin: 8px 0px; + } + `, + [] + ); + const [repoText, setRepoText] = useState(defaultRepo); + const [repo, setRepo] = useState(defaultRepo); + const [error, setError] = useState(""); + const [logs, setLogs] = useState([ + "Build Successfull..", + "Build Started...", + "Fetching Repo...", + ]); + + // const socket = socketIO.connect("http://localhost:4000"); + // useEffect(() => { + // socket.on("messageResponse", (data) => setLogs([...messages, data])); + // }, [socket]); + const handleRepoChange = (event) => { + setRepoText(event.target.value); + }; + const handleRepoSubmit = () => { + const githubRepoRegex = /^https:\/\/github\.com\/[^\/]+\/[^\/]+$/; + if (!githubRepoRegex.test(repoText)) { + setError("Invalid! GitHub repo link."); + setRepo(""); + } else { + setError(""); + setRepo(repoText); + } + }; + + return ( + +
+ + {error &&
{error}
} +
+