completed skeleton in frontend

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/discord.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="PROJECT" />
+    <option name="description" value="" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/url-minify.iml" filepath="$PROJECT_DIR$/.idea/url-minify.iml" />
+    </modules>
+  </component>
+</project>

.idea/url-minify.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

frontend/components/HomeSection/HomeSection.style.js

@@ -0,0 +1,13 @@
+import styled from "styled-components"
+
+export default styled.section`
+  display: flex;
+  justify-content:center;
+  align-items:center;
+  .content {
+    display: flex;
+    justify-content:center;
+    align-items:center;
+    flex-direction:column;
+  }
+`

frontend/components/HomeSection/homeSection.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import HomeSectionStyle from "./HomeSection.style";
+
+function HomeSection(props) {
+    return (
+        <HomeSectionStyle>
+            <div className="content">
+                <h1 className="title">
+                    URL Minify
+                </h1>
+                <input type="text"/>
+            </div>
+        </HomeSectionStyle>
+    );
+}
+
+export default HomeSection;

frontend/components/NavBar/Navbar.style.js

@@ -0,0 +1,4 @@
+import styled from "styled-components"
+import {AppBar} from "@mui/material";
+
+export default styled(AppBar)``

frontend/components/NavBar/index.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import {Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography} from "@mui/material";
+import MenuIcon from '@mui/icons-material/Menu';
+import NavbarStyle from "./Navbar.style";
+
+const pages = ['Products', 'Pricing', 'Blog'];
+const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+
+function Index(props) {
+    const [anchorElNav, setAnchorElNav] = React.useState(null);
+    const [anchorElUser, setAnchorElUser] = React.useState(null);
+
+    const handleOpenNavMenu = (event) => {
+        setAnchorElNav(event.currentTarget);
+    };
+    const handleOpenUserMenu = (event) => {
+        setAnchorElUser(event.currentTarget);
+    };
+
+    const handleCloseNavMenu = () => {
+        setAnchorElNav(null);
+    };
+
+    const handleCloseUserMenu = () => {
+        setAnchorElUser(null);
+    };
+
+    return (
+        <NavbarStyle position="fixed">
+            <Container maxWidth="xl">
+                <Toolbar disableGutters>
+                    <Typography
+                        variant="h6"
+                        noWrap
+                        component="div"
+                        sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
+                    >
+                        LOGO
+                    </Typography>
+
+                    <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+                        <IconButton
+                            size="large"
+                            aria-label="account of current user"
+                            aria-controls="menu-appbar"
+                            aria-haspopup="true"
+                            onClick={handleOpenNavMenu}
+                            color="inherit"
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                        <Menu
+                            id="menu-appbar"
+                            anchorEl={anchorElNav}
+                            anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'left',
+                            }}
+                            keepMounted
+                            transformOrigin={{
+                                vertical: 'top',
+                                horizontal: 'left',
+                            }}
+                            open={Boolean(anchorElNav)}
+                            onClose={handleCloseNavMenu}
+                            sx={{
+                                display: { xs: 'block', md: 'none' },
+                            }}
+                        >
+                            {pages.map((page) => (
+                                <MenuItem key={page} onClick={handleCloseNavMenu}>
+                                    <Typography textAlign="center">{page}</Typography>
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    </Box>
+                    <Typography
+                        variant="h6"
+                        noWrap
+                        component="div"
+                        sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
+                    >
+                        LOGO
+                    </Typography>
+                    <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+                        {pages.map((page) => (
+                            <Button
+                                key={page}
+                                onClick={handleCloseNavMenu}
+                                sx={{ my: 2, color: 'white', display: 'block' }}
+                            >
+                                {page}
+                            </Button>
+                        ))}
+                    </Box>
+
+                    <Box sx={{ flexGrow: 0 }}>
+                        <Tooltip title="Open settings">
+                            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+                            </IconButton>
+                        </Tooltip>
+                        <Menu
+                            sx={{ mt: '45px' }}
+                            id="menu-appbar"
+                            anchorEl={anchorElUser}
+                            anchorOrigin={{
+                                vertical: 'top',
+                                horizontal: 'right',
+                            }}
+                            keepMounted
+                            transformOrigin={{
+                                vertical: 'top',
+                                horizontal: 'right',
+                            }}
+                            open={Boolean(anchorElUser)}
+                            onClose={handleCloseUserMenu}
+                        >
+                            {settings.map((setting) => (
+                                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                                    <Typography textAlign="center">{setting}</Typography>
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    </Box>
+                </Toolbar>
+            </Container>
+        </NavbarStyle>
+    );
+}
+
+export default Index;

frontend/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

frontend/package.json

@@ -8,9 +8,15 @@
       "prettier": "prettier --write ."
    },
    "dependencies": {
+      "@emotion/react": "^11.7.1",
+      "@emotion/styled": "^11.6.0",
+      "@mui/icons-material": "^5.3.1",
+      "@mui/material": "^5.4.0",
+      "@mui/styled-engine-sc": "^5.3.0",
       "next": "12.0.9",
       "react": "17.0.2",
-      "react-dom": "17.0.2"
+      "react-dom": "17.0.2",
+      "styled-components": "^5.3.3"
    },
    "license": "MIT",
    "repository": {

frontend/pages/_document.js

@@ -0,0 +1,30 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+    static async getInitialProps(ctx) {
+        const sheet = new ServerStyleSheet()
+        const originalRenderPage = ctx.renderPage
+
+        try {
+            ctx.renderPage = () =>
+                originalRenderPage({
+                    enhanceApp: (App) => (props) =>
+                        sheet.collectStyles(<App {...props} />),
+                })
+
+            const initialProps = await Document.getInitialProps(ctx)
+            return {
+                ...initialProps,
+                styles: (
+                    <>
+                        {initialProps.styles}
+                        {sheet.getStyleElement()}
+                    </>
+                ),
+            }
+        } finally {
+            sheet.seal()
+        }
+    }
+}

frontend/pages/index.js

@@ -1,32 +1,22 @@
 import { useState } from 'react'
 import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import HomeSection from "components/HomeSection/homeSection"
+import NavBar from "components/NavBar";
+
 
 export default function Home() {
    const [shortUrl, setShortUrl] = useState(null)
    const [longURL, setLongURL] = useState('')
    return (
-      <div className={styles.container}>
+      <div className={""}>
          <Head>
             <title>URL MiniFy</title>
             <link rel="icon" href="/favicon.ico" />
          </Head>
 
-         <main className={styles.main}>
-            <h1 className={styles.title}>Welcome to URL MiniFy</h1>
-
-            <div className={styles.card}>
-               <h2>Paste the URL to be Shortened</h2>
-               <form className="input">
-                  <input
-                     name="longURL"
-                     type="text"
-                     value={longURL}
-                     onChange={(evt) => setLongURL(evt.target.value)}
-                  />
-                  <button type="submit">Minify</button>
-               </form>
-            </div>
+         <main className={""}>
+             <NavBar />
+             <HomeSection />
          </main>
       </div>
    )

frontend/styles/globals.css

@@ -2,6 +2,8 @@ html,
 body {
    padding: 0;
    margin: 0;
+   width:100vw;
+   overflow-x:hidden;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
       Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
@@ -12,5 +14,12 @@ a {
 }
 
 * {
+   margin: 0;
+   padding:0;
    box-sizing: border-box;
 }
+
+section{
+   width:100vw;
+   min-height:100vh;
+}