bravo68web
/
url-minify
mirror of https://github.com/BRAVO68WEB/url-minify.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

integrated Increase View counts when visited (#73)

This commit is contained in:
Koustav Mondal 2022-03-01 00:12:57 +05:30 committed by GitHub
parent 602a4004f7
commit ed216981f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 1957 additions and 1578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.idea

15
backend/controllers/minify.js
View File

@ -99,3 +99,18 @@ module.exports.addURLAuthed = async (req, res) => {
res.sendStatus(500) res.sendStatus(500)
}) })
} }
module.exports.visitor = async (req, res) => {
Minfy.findOneAndUpdate(
{ alias: req.params.alias },
{ $inc: { views: 1 } },
{ new: true }
)
.then((data) => {
res.send(`views increased`)
})
.catch((err) => {
console.error(err)
res.sendStatus(500)
})
}

2
backend/routers/minify.js
View File

@ -15,4 +15,6 @@ router.patch('/edit/:id', auth, controller.updateUrlData)
router.delete('/delete/:id', auth, controller.deleteUrlData) router.delete('/delete/:id', auth, controller.deleteUrlData)
router.get('/:alias/views', controller.visitor)
module.exports = router module.exports = router

125
frontend/components/Dashboard/CreateLink.js
View File

@ -1,81 +1,66 @@
import CreateLinkStyle from "./createlink.style"; import CreateLinkStyle from './createlink.style'
function Links() {
return (
<div className="frame">
<h2>Create a link</h2>
<div className="card">
<form action="#">
<div className="hugediv">
<label for="hugeInput">Huge link</label>
<input
type="text"
id="hugeInput"
placeholder="https://www.example.com/abc/xyz"
/>
</div>
<div className="aliasdiv">
<label for="customAlias">Custom alias</label>
<input
type="text"
id="customAlias"
placeholder="shorturl.com/url"
/>
</div>
<div className="titlediv">
<label for="title">Title</label>
function Links(){ <input type="text" id="title" placeholder="Enter the Title" />
return( </div>
<div className="frame"> <div className="textdiv">
<h2> <label for="desc">Description</label>
Create a link
</h2>
<div className="card"> <textarea
name="desc"
id="desc"
cols="30"
rows="10"
placeholder="Enter the Description"
></textarea>
</div>
<form action="#"> <div className="btndiv">
<button>Cancel</button>
<div className="hugediv"> <button type="submit" className="submit">
<label for="hugeInput">Huge link</label> Submit
</button>
<input type="text" id="hugeInput" placeholder="https://www.example.com/abc/xyz" /> </div>
</form>
</div> </div>
<div className="aliasdiv"> </div>
<label for="customAlias">Custom alias</label> )
<input type="text" id="customAlias" placeholder="shorturl.com/url" />
</div>
<div className="titlediv">
<label for="title">Title</label>
<input type="text" id="title" placeholder="Enter the Title" />
</div>
<div className="textdiv">
<label for="desc">Description</label>
<textarea name="desc" id="desc" cols="30" rows="10" placeholder="Enter the Description"></textarea>
</div>
<div className="btndiv">
<button>
Cancel
</button>
<button type="submit" className="submit">
Submit
</button>
</div>
</form>
</div>
</div>
)
} }
function CreateLink(){ function CreateLink() {
return (
<CreateLinkStyle>
<Links />
</CreateLinkStyle>
)
}
return( export default CreateLink
<CreateLinkStyle>
<Links/>
</CreateLinkStyle>
)
};
export default CreateLink;

129
frontend/components/Dashboard/Dashboard.jsx
View File

@ -1,82 +1,77 @@
import DashboardStyle from "./Dashboard.style"; import DashboardStyle from './Dashboard.style'
function Sidebar1() { function Sidebar1() {
return ( return (
<div className="sidebar"> <div className="sidebar">
<ul> <ul>
<div className="nav-item mb-2 brand-name"><h1>Brand Name</h1></div> <div className="nav-item mb-2 brand-name">
<div className="profile"> <h1>Brand Name</h1>
<div className="profile-image"><img
src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg"/>
</div>
<p className="name">Hayat</p>
<p className="profession">Product Designer</p>
</div>
<div className="creatButton">
<button className={""}>Create Link</button>
</div>
<li className="nav-buttons">
<div className="nav-item">
<button>
Overview
</button>
</div>
<div className="nav-item">
<button>
My Links
</button>
</div>
<div className="nav-item">
<button>
Extras
</button>
</div>
</li>
</ul>
</div> </div>
) <div className="profile">
<div className="profile-image">
<img src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg" />
</div>
<p className="name">Hayat</p>
<p className="profession">Product Designer</p>
</div>
<div className="creatButton">
<button className={''}>Create Link</button>
</div>
<li className="nav-buttons">
<div className="nav-item">
<button>Overview</button>
</div>
<div className="nav-item">
<button>My Links</button>
</div>
<div className="nav-item">
<button>Extras</button>
</div>
</li>
</ul>
</div>
)
} }
function Sidebar2() { function Sidebar2() {
return ( return (
<div className="sidebar2"> <div className="sidebar2">
<h2 className="dash">Overview</h2> <h2 className="dash">Overview</h2>
<div className="row"> <div className="row">
<div className="column">Box1</div> <div className="column">Box1</div>
<div className="column">Box2</div> <div className="column">Box2</div>
<div className="column">Box3</div> <div className="column">Box3</div>
</div> </div>
</div> </div>
) )
} }
function Graph() { function Graph() {
return ( return (
<div className="sidebar2"> <div className="sidebar2">
<div className="row"> <div className="row">
<div className="column">Daily Insight</div> <div className="column">Daily Insight</div>
<div className="column"> <div className="column">
<ul> <ul>
<li className="list2">Api Version</li> <li className="list2">Api Version</li>
<li className="list2">Frontend Version</li> <li className="list2">Frontend Version</li>
<li className="list2">Links generated yet</li> <li className="list2">Links generated yet</li>
<li className="list2">Total views yet</li> <li className="list2">Total views yet</li>
</ul> </ul>
</div>
</div>
</div> </div>
) </div>
</div>
)
} }
function App() { function App() {
return ( return (
<DashboardStyle> <DashboardStyle>
<Sidebar1/> <Sidebar1 />
<Sidebar2/> <Sidebar2 />
<Graph/> <Graph />
</DashboardStyle> </DashboardStyle>
); )
} }
export default App; export default App

123
frontend/components/Dashboard/Dashboard.style.js
View File

@ -1,88 +1,87 @@
import styled from "styled-components" import styled from 'styled-components'
export default styled.div` export default styled.div`
.sidebar{ .sidebar {
background-color:#00253A; background-color: #00253a;
float: left; float: left;
width: 20%; width: 20%;
height: 100vh; height: 100vh;
color:white !important; color: white !important;
.brand-name{ .brand-name {
margin-top:40px; margin-top: 40px;
padding-left:20px; padding-left: 20px;
} }
.profile{ .profile {
margin:25px 0; margin: 25px 0;
display:flex; display: flex;
flex-direction:column; flex-direction: column;
justify-content: center; justify-content: center;
align-items:center; align-items: center;
.profile-image{ .profile-image {
max-width:35%; max-width: 35%;
margin:auto; margin: auto;
border-radius:100%; border-radius: 100%;
img{ img {
max-width:100%; max-width: 100%;
border-radius:100%; border-radius: 100%;
} }
} }
.name{ .name {
font-size:1.2rem; font-size: 1.2rem;
font-weight:bold; font-weight: bold;
margin: 3px 0; margin: 3px 0;
} }
.profession{ .profession {
color:gray; color: gray;
font-size:0.8rem; font-size: 0.8rem;
font-weight:bold; font-weight: bold;
margin: 0; margin: 0;
} }
} }
.creatButton{ .creatButton {
margin: 40px auto 80px;
margin:40px auto 80px; width: 70%;
width:70%; button {
button{ width: 100%;
width:100%; color: white;
color:white; font-weight: bold;
font-weight:bold; font-size: 1rem;
font-size:1rem; padding: 10px;
padding:10px; background-color: blueviolet;
background-color:blueviolet; outline: none;
outline:none; border: none;
border:none; border-radius: 5px;
border-radius:5px;
} }
} }
} }
.nav-buttons{ .nav-buttons {
.nav-item { .nav-item {
margin:0; margin: 0;
button{ button {
width:100%; width: 100%;
background-color:transparent; background-color: transparent;
border:none; border: none;
outline:none; outline: none;
padding:10px; padding: 10px;
color:white; color: white;
font-size:1.1rem; font-size: 1.1rem;
margin:0; margin: 0;
padding-left:20px; padding-left: 20px;
text-align: left; text-align: left;
:hover{ :hover {
background-color:#07344A; background-color: #07344a;
color:#43BFD6; color: #43bfd6;
border-left:5px solid #43BFD6; border-left: 5px solid #43bfd6;
} }
} }
} }
} }
.sidebar2{ .sidebar2 {
text-align: center; text-align: center;
} }
.dash{ .dash {
text-align: left; text-align: left;
margin-left: 1.5px; margin-left: 1.5px;
} }
.row { .row {
display: flex; display: flex;
@ -92,8 +91,8 @@ export default styled.div`
flex: 30%; flex: 30%;
height: 250px; height: 250px;
} }
.list2{ .list2 {
margin-bottom: 10px; margin-bottom: 10px;
list-style-type: none; list-style-type: none;
} }
` `

153
frontend/components/Dashboard/createlink.style.js
View File

@ -1,119 +1,86 @@
import styled from "styled-components"; import styled from 'styled-components'
export default styled.div`
h2 {
export default styled.div` color: #00253a;
h2{ font-size: 33px;
color:#00253A;
font-size:33px;
} }
input{ input {
width:550px; width: 550px;
padding:16px; padding: 16px;
border-radius: 5px; border-radius: 5px;
background-color:#F2F2F2; background-color: #f2f2f2;
border:none; border: none;
} }
.frame{ .frame {
width:79%; width: 79%;
margin-left:26%; margin-left: 26%;
padding-top:60px; padding-top: 60px;
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
} }
.card{ .card {
display:flex; display: flex;
flex-direction:column; flex-direction: column;
justify-content:space-between; justify-content: space-between;
align-items:center; align-items: center;
} }
form{ form {
display:flex; display: flex;
flex-direction:column; flex-direction: column;
justify-content:space-between; justify-content: space-between;
align-items:start; align-items: start;
gap:20px; gap: 20px;
} }
button{ button {
width: 49%;
width:49%; height: 45px;
height:45px; border-radius: 5px;
border-radius: 5px; background-color: #f2f2f2;
background-color:#F2F2F2; border: none;
border:none; font-size: 16px;
font-size:16px; cursor: pointer;
cursor:pointer;
} }
.btndiv{ .btndiv {
display:flex; display: flex;
flex-direction:row; flex-direction: row;
justify-content:space-between; justify-content: space-between;
align-items:center; align-items: center;
width:100%; width: 100%;
} }
.submit{ .submit {
background-color:#43BFD6; background-color: #43bfd6;
color:white; color: white;
} }
textarea { textarea {
width: 100%; width: 100%;
height: 150px; height: 150px;
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
border:none; border: none;
border-radius: 4px; border-radius: 4px;
background-color:#F2F2F2; background-color: #f2f2f2;
font-size: 16px; font-size: 16px;
resize: none; resize: none;
} }
.textdiv{ .textdiv {
width:100%; width: 100%;
} }
.textdiv, .aliasdiv , .titlediv , .hugediv{ .textdiv,
display:flex; .aliasdiv,
flex-direction:column; .titlediv,
justify-content:space-between; .hugediv {
align-items:start; display: flex;
gap:7px; flex-direction: column;
justify-content: space-between;
} align-items: start;
gap: 7px;
}
`
`

72
frontend/components/Features/index.js
View File

@ -1,4 +1,4 @@
import * as React from "react"; import * as React from 'react'
import { import {
Avatar, Avatar,
Box, Box,
@ -12,21 +12,21 @@ import {
Typography, Typography,
alpha, alpha,
AppBar, AppBar,
} from "@mui/material"; } from '@mui/material'
import QrCodeScannerIcon from "@mui/icons-material/QrCodeScanner"; import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner'
import RocketLaunchIcon from "@mui/icons-material/RocketLaunch"; import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye"; import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye'
import NotFound from "@pages/404"; import NotFound from '@pages/404'
export default function Index() { export default function Index() {
return ( return (
<Box <Box
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
my: 2, my: 2,
}} }}
> >
@ -37,53 +37,53 @@ export default function Index() {
<Box <Box
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
display: "flex", display: 'flex',
justifyContent: "space-around", justifyContent: 'space-around',
alignContent: "space-around", alignContent: 'space-around',
alignItems: "space-around", alignItems: 'space-around',
width: "50vw", width: '50vw',
}} }}
> >
<Box <Box
style={{ style={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
justifyContent: "centre", justifyContent: 'centre',
alignItems: "center", alignItems: 'center',
}} }}
> >
<a className="Link" href = "NotFound"> <a className="Link" href="NotFound">
<RemoveRedEyeIcon sx={{ width: "3.5rem", height: "3.5rem" }} /> <RemoveRedEyeIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
<h4>VIEW COUNTER</h4> <h4>VIEW COUNTER</h4>
</a> </a>
</Box> </Box>
<Box <Box
style={{ style={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
justifyContent: "centre", justifyContent: 'centre',
alignItems: "center", alignItems: 'center',
}} }}
> >
<a className="Link" href = "NotFound"> <a className="Link" href="NotFound">
<QrCodeScannerIcon sx={{ width: "3.5rem", height: "3.5rem" }} /> <QrCodeScannerIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
<h4>QR CODE</h4> <h4>QR CODE</h4>
</a> </a>
</Box> </Box>
<Box <Box
style={{ style={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
justifyContent: "centre", justifyContent: 'centre',
alignItems: "center", alignItems: 'center',
}} }}
> >
<a className="Link" href = "NotFound"> <a className="Link" href="NotFound">
<RocketLaunchIcon sx={{ width: "3.5rem", height: "3.5rem" }} /> <RocketLaunchIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
<h4>ROBUST API</h4> <h4>ROBUST API</h4>
</a> </a>
</Box> </Box>
</Box> </Box>
</Box> </Box>
); )
} }

4
frontend/components/HomeSection/HomeSection.style.js
View File

@ -1,4 +1,4 @@
import styled from "styled-components"; import styled from 'styled-components'
export default styled.section` export default styled.section`
display: flex; display: flex;
@ -11,4 +11,4 @@ export default styled.section`
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
`; `

198
frontend/components/HomeSection/homeSection.jsx
View File

@ -1,94 +1,91 @@
import React, {useState} from "react"; import React, { useState } from 'react'
import HomeSectionStyle from "./HomeSection.style"; import HomeSectionStyle from './HomeSection.style'
import Link from "next/link"; import Link from 'next/link'
import Image from 'next/image' import Image from 'next/image'
import Axios from "helpers/Axios"; import Axios from 'helpers/Axios'
import {Alert, Button, Collapse, IconButton} from "@mui/material"; import { Alert, Button, Collapse, IconButton } from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close'
import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import NotFound from "@pages/404"; import NotFound from '@pages/404'
const QR = { const QR = {
marginTop: '1.8em' marginTop: '1.8em',
} }
const head = { const head = {
fontSize: "5.5rem", fontSize: '5.5rem',
fontWeight: "bold", fontWeight: 'bold',
color:"white", color: 'white',
marginBottom: "30px", marginBottom: '30px',
}; }
const box = { const box = {
fontSize: "1.5em", fontSize: '1.5em',
borderRadius: "50px", borderRadius: '50px',
padding: "1em", padding: '1em',
width: "500px", width: '500px',
height: "50px", height: '50px',
outline:"none !important", outline: 'none !important',
border:"none !important", border: 'none !important',
marginBottom:"15px" marginBottom: '15px',
}; }
const btn = { const btn = {
fontWeight: "bold", fontWeight: 'bold',
position: "absolute", position: 'absolute',
alignItems: "center", alignItems: 'center',
right: "0px", right: '0px',
marginRight: "5px", marginRight: '5px',
marginTop: "4.5px", marginTop: '4.5px',
marginBottom: "3px", marginBottom: '3px',
height: "40px", height: '40px',
width: "100px", width: '100px',
borderRadius: "50px", borderRadius: '50px',
}; }
const searchBox = { const searchBox = {
position: "relative", position: 'relative',
}; }
function HomeSection(props) { function HomeSection(props) {
var qrCode; var qrCode
var minifiedUrl; var minifiedUrl
const [disabled,setDisabled] = useState(false) const [disabled, setDisabled] = useState(false)
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false)
const setMinfy = async () => { const setMinfy = async () => {
setOpen(false) setOpen(false)
setDisabled(true); setDisabled(true)
let res; let res
try { try {
res = await Axios.post(`/minify/add`, { res = await Axios.post(`/minify/add`, {
originalUrl: props.longUrl, originalUrl: props.longUrl,
}); })
} catch (err) { } catch (err) {
console.error(err); console.error(err)
return; return
} }
const data = await res.data; const data = await res.data
props.setShortUrl(data.minifiedUrl); props.setShortUrl(data.minifiedUrl)
minifiedUrl = data.minifiedUrl; minifiedUrl = data.minifiedUrl
navigator.clipboard.writeText(props.shortUrl); navigator.clipboard.writeText(props.shortUrl)
if(minifiedUrl){ if (minifiedUrl) {
generateQR(); generateQR()
} }
await navigator.clipboard.writeText(data.minifiedUrl); await navigator.clipboard.writeText(data.minifiedUrl)
setOpen(true) setOpen(true)
setDisabled(false) setDisabled(false)
}; }
// Generate QRCODE for the generated link // Generate QRCODE for the generated link
const generateQR = async () => { const generateQR = async () => {
try { try {
qrCode = await QRCode.toDataURL(minifiedUrl); qrCode = await QRCode.toDataURL(minifiedUrl)
props.setQrData(qrCode); props.setQrData(qrCode)
props.setShowQrCode(true); props.setShowQrCode(true)
} catch (err) { } catch (err) {
console.error(err) console.error(err)
} }
} }
return ( return (
<HomeSectionStyle> <HomeSectionStyle>
<div className="content"> <div className="content">
<h1 style={head} className="title"> <h1 style={head} className="title">
@ -101,50 +98,75 @@ function HomeSection(props) {
placeholder="Enter the url to be minified......" placeholder="Enter the url to be minified......"
value={props.longUrl} value={props.longUrl}
onChange={(e) => { onChange={(e) => {
props.setLongUrl(e.target.value); props.setLongUrl(e.target.value)
}} }}
/> />
<a href = "NotFound"> <a href="NotFound">
<Button variant={"contained"} disabled={disabled} style={btn} id="minify" onClick={setMinfy}> <Button
MINIFY variant={'contained'}
</Button> disabled={disabled}
style={btn}
id="minify"
onClick={setMinfy}
>
MINIFY
</Button>
</a> </a>
</div> </div>
<div style={{marginBottom:"40px",color:"#fff"}}> <div style={{ marginBottom: '40px', color: '#fff' }}>
<h3> <h3>
Need more advanced features? |{" "} Need more advanced features? |{' '}
<Link href="/signup"><span style={{textDecoration:"underline"}}>Create an account</span></Link> <Link href="/signup">
<span style={{ textDecoration: 'underline' }}>
Create an account
</span>
</Link>
</h3> </h3>
</div> </div>
{ // show QR code if a url is generated {
props.showQrCode ? // show QR code if a url is generated
props.showQrCode ? (
<div style={QR}> <div style={QR}>
<Image src={props.qrData} placeholder="blur" blurDataURL width={150} height={150}/> <Image
</div> src={props.qrData}
: "" placeholder="blur"
blurDataURL
width={150}
height={150}
/>
</div>
) : (
''
)
} }
</div> </div>
<Collapse in={open}> <Collapse in={open}>
<Alert <Alert
action={ action={
<IconButton <IconButton
aria-label="close" aria-label="close"
color="inherit" color="inherit"
size="small" size="small"
onClick={() => { onClick={() => {
setOpen(false); setOpen(false)
}} }}
> >
<CloseIcon fontSize="inherit" /> <CloseIcon fontSize="inherit" />
</IconButton> </IconButton>
} }
sx={{ mb: 2 }} sx={{ mb: 2 }}
> >
Your Shortened URL: {props.shortUrl} <IconButton onClick={() => navigator.clipboard.writeText(props.shortUrl)} style={{marginLeft:"15px",padding:0}}><ContentCopyIcon /></IconButton> Your Shortened URL: {props.shortUrl}{' '}
<IconButton
onClick={() => navigator.clipboard.writeText(props.shortUrl)}
style={{ marginLeft: '15px', padding: 0 }}
>
<ContentCopyIcon />
</IconButton>
</Alert> </Alert>
</Collapse> </Collapse>
</HomeSectionStyle> </HomeSectionStyle>
); )
} }
export default HomeSection; export default HomeSection

14
frontend/components/Login/Login.style.js
View File

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

4
frontend/components/NavBar/Logo.js
View File

@ -1,4 +1,4 @@
import React from "react"; import React from 'react'
export default function Logo() { export default function Logo() {
return ( return (
@ -22,5 +22,5 @@ export default function Logo() {
</svg> </svg>
<p className="logo-text">URL MINIFY</p> <p className="logo-text">URL MINIFY</p>
</div> </div>
); )
} }

6
frontend/components/NavBar/Navbar.style.js
View File

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

26
frontend/components/NavBar/index.js
View File

@ -99,10 +99,10 @@ function Index(props) {
</a> </a>
</MenuItem> </MenuItem>
<MenuItem onClick={handleCloseNavMenu}> <MenuItem onClick={handleCloseNavMenu}>
<a href = "NotFound"> <a href="NotFound">
<Typography textAlign="center" sx={{ display: 'flex' }}> <Typography textAlign="center" sx={{ display: 'flex' }}>
CREDITS CREDITS
</Typography> </Typography>
</a> </a>
</MenuItem> </MenuItem>
</Menu> </Menu>
@ -138,13 +138,17 @@ function Index(props) {
GitHub GitHub
</Button> </Button>
</a> </a>
<a href = "NotFound"> <a href="NotFound">
<Button <Button
onClick={handleCloseNavMenu} onClick={handleCloseNavMenu}
sx={{ color: 'white', display: 'block', fontSize: 'h5.fontSize' }} sx={{
> color: 'white',
CREDITS display: 'block',
</Button> fontSize: 'h5.fontSize',
}}
>
CREDITS
</Button>
</a> </a>
</Box> </Box>

4
frontend/components/Reg/Reg.style.js
View File

@ -1,4 +1,4 @@
import styled from "styled-components"; import styled from 'styled-components'
export default styled.section` export default styled.section`
display: flex; display: flex;
@ -10,4 +10,4 @@ export default styled.section`
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
`; `

10
frontend/components/Reg/styles.css
View File

@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
.reg-label { .reg-label {
font-size: 24px; font-size: 24px;
@ -7,7 +7,7 @@
position: relative; position: relative;
} }
.reg-title { .reg-title {
font-family: "Montserrat", sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 700; font-weight: 700;
font-size: 36px; font-size: 36px;
text-align: center; text-align: center;
@ -24,7 +24,7 @@
margin-left: 10px; margin-left: 10px;
height: 35px; height: 35px;
width: 340px; width: 340px;
font-family: "Montserrat", sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
border-radius: 20px; border-radius: 20px;
@ -63,7 +63,7 @@
.submit-button { .submit-button {
width: 100px; width: 100px;
height: 40px; height: 40px;
font-family: "Montserrat", sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
border-radius: 10px; border-radius: 10px;
@ -88,7 +88,7 @@
} }
.foot-text { .foot-text {
font-family: "Montserrat", sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
margin-top: 50px; margin-top: 50px;

10
frontend/helpers/Axios.js
View File

@ -1,11 +1,11 @@
import axios from "axios"; import axios from 'axios'
var API_URL = process.env.NEXT_PUBLIC_API_URL; var API_URL = process.env.NEXT_PUBLIC_API_URL
export default axios.create({ export default axios.create({
baseURL: API_URL, baseURL: API_URL,
headers: { headers: {
"Content-Type": "application/json", 'Content-Type': 'application/json',
"Access-Control-Allow-Origin": "*", 'Access-Control-Allow-Origin': '*',
}, },
}); })

24
frontend/helpers/user/usercontext.js
View File

@ -1,24 +1,24 @@
import { createContext } from "react"; import { createContext } from 'react'
import { useState } from "react"; import { useState } from 'react'
const UserAuth = createContext({ const UserAuth = createContext({
user: null, user: null,
login: () => {}, login: () => {},
logout: () => {}, logout: () => {},
}); })
export const UserAuthProvider = ({ children }) => { export const UserAuthProvider = ({ children }) => {
const [user, setUser] = useState(null); const [user, setUser] = useState(null)
const login = () => { const login = () => {
setUser("default"); setUser('default')
}; }
const logout = () => { const logout = () => {
setUser(null); setUser(null)
}; }
const context = { user, login, logout }; const context = { user, login, logout }
return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>; return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>
}; }
export default UserAuth; export default UserAuth

2
frontend/next.config.js
View File

@ -1,3 +1,3 @@
module.exports = { module.exports = {
reactStrictMode: true, reactStrictMode: true,
}; }

28
frontend/pages/404.js
View File

@ -1,16 +1,20 @@
import { urlAlphabet } from 'nanoid'; import { urlAlphabet } from 'nanoid'
import React from 'react'; import React from 'react'
const NotFound = () => { const NotFound = () => {
return ( return (
<div className='Box'> <div className="Box">
<div className='Box2'> <div className="Box2">
<p className='P1'>404 Not Found</p> <p className="P1">404 Not Found</p>
<p className='P2'>The page you are looking for is not available</p> <p className="P2">The page you are looking for is not available</p>
<button className='Button'><a className='Take-me-back' href = "/">Take me back!</a></button> <button className="Button">
</div> <a className="Take-me-back" href="/">
</div> Take me back!
) </a>
</button>
</div>
</div>
)
} }
export default NotFound; export default NotFound

104
frontend/pages/[id].js
View File

@ -1,105 +1,59 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react'
import Head from "next/head"; import Head from 'next/head'
import HomeSection from "components/HomeSection/homeSection"; import HomeSection from 'components/HomeSection/homeSection'
import NavBar from "components/NavBar"; import NavBar from 'components/NavBar'
import Features from "components/Features"; import Features from 'components/Features'
import { useRouter } from "next/router"; import { useRouter } from 'next/router'
var axios = require("axios"); import axios from 'helpers/Axios'
function Redirector(props) { function Redirector(props) {
const router = useRouter(); const router = useRouter()
// const { id } = router.query;
// useEffect(() => {
// if (id) {
// var config = {
// method: 'get',
// url: `http://localhost:5000/minify/alias/${id}`
// };
// axios(config)
// .then(function (response) {
// if(!response.data.success){
// router.replace('/404')
// }
// else{
// router.replace(response.data.data.originalUrl)
// }
// })
// .catch(function (error) {
// console.log(error);
// });
// }
// },[id])
useEffect(() => { useEffect(() => {
if (!props?.resData.success) { if (!props?.resData.success) {
// router.push('/404') // router.push('/404')
} else { } else {
// router.replace(`${props.resData.data.originalUrl}`) // router.replace(`${props.resData.data.originalUrl}`)
} }
}, []); }, [])
return ( return (
<div className={""}> <div className={''}>
<Head> <Head>
<title>URL MiniFy</title> <title>URL MiniFy</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className={"main-bg"}>Not Found</main> <main className={'main-bg'}>Not Found</main>
</div> </div>
); )
} }
Redirector.getInitialProps = async (context) => { Redirector.getInitialProps = async (context) => {
const { id } = context.query; const { id } = context.query
let resData = {}; let resData = {}
if (id) { if (id) {
var config = { axios.get(`/minify/${id}/views`).catch((err) => {
method: "get", console.error(err)
url: `http://localhost:5000/minify/alias/${id}`, })
}; await axios
await axios(config) .get(`/minify/alias/${id}`)
.then(function (response) { .then(function (response) {
resData = response.data; resData = response.data
}) })
.catch(function (error) { .catch(function (error) {
resData = error; resData = error
}); })
} }
if (context?.res) { if (context?.res) {
const go = resData?.data?.originalUrl ? resData?.data?.originalUrl : "/404"; const go = resData?.data?.originalUrl ? resData?.data?.originalUrl : '/404'
console.log(go); console.log(go)
context?.res.writeHead(302, { context?.res.writeHead(302, {
Location: go, Location: go,
}); })
context?.res.end(); context?.res.end()
} }
return {}; return {}
}; }
// export async function getServerSideProps(context){ export default Redirector
// const { id } = context.query;
// let resData = {};
// if (id) {
// var config = {
// method: 'get',
// url: `http://localhost:5000/minify/alias/${id}`
// };
// await axios(config)
// .then(function (response) {
// resData = response.data;
// })
// .catch(function (error) {
// resData = error;
// });
// }
// return {
// props: {
// resData : resData
// }
// }
// }
export default Redirector;

16
frontend/pages/_document.js
View File

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

2
frontend/pages/api/hello.js
View File

@ -1,5 +1,5 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default function handler(req, res) { export default function handler(req, res) {
res.status(200).json({ name: "John Doe" }); res.status(200).json({ name: 'John Doe' })
} }

34
frontend/pages/dashboard/index.js
View File

@ -1,22 +1,22 @@
import React from 'react'; import React from 'react'
import Head from "next/head"; import Head from 'next/head'
import NavBar from "../../components/NavBar"; import NavBar from '../../components/NavBar'
import Dashboard from "components/Dashboard/Dashboard" import Dashboard from 'components/Dashboard/Dashboard'
function Index() { function Index() {
return ( return (
<div className={""}> <div className={''}>
<Head> <Head>
<title>Dashboard</title> <title>Dashboard</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main> <main>
<NavBar /> <NavBar />
<Dashboard/> <Dashboard />
</main> </main>
</div> </div>
); )
} }
export default Index; export default Index

12
frontend/pages/login.js
View File

@ -1,8 +1,8 @@
import { useState } from "react"; import { useState } from 'react'
import Head from "next/head"; import Head from 'next/head'
import NavBar from "components/NavBar"; import NavBar from 'components/NavBar'
import Features from "components/Features"; import Features from 'components/Features'
import Login from "components/Login/Login"; import Login from 'components/Login/Login'
export default function signup() { export default function signup() {
return ( return (
@ -10,5 +10,5 @@ export default function signup() {
<NavBar /> <NavBar />
<Login /> <Login />
</div> </div>
); )
} }

12
frontend/pages/signup.js
View File

@ -1,8 +1,8 @@
import { useState } from "react"; import { useState } from 'react'
import Head from "next/head"; import Head from 'next/head'
import NavBar from "components/NavBar"; import NavBar from 'components/NavBar'
import Features from "components/Features"; import Features from 'components/Features'
import Reg from "components/Reg/Reg"; import Reg from 'components/Reg/Reg'
export default function signup() { export default function signup() {
return ( return (
@ -10,5 +10,5 @@ export default function signup() {
<NavBar /> <NavBar />
<Reg /> <Reg />
</div> </div>
); )
} }

816
frontend/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

72
frontend/styles/404.css
View File

@ -1,46 +1,46 @@
.Box{ .Box {
position: absolute; position: absolute;
background: rgb(231,231,231); background: rgb(231, 231, 231);
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1.3rem; font-size: 1.3rem;
padding: 15px; padding: 15px;
} }
.Box2{ .Box2 {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.P1{ .P1 {
font-size: 55px; font-size: 55px;
color: #16a085; color: #16a085;
} }
.P2{ .P2 {
color: #16a085; color: #16a085;
} }
.Button{ .Button {
width: 55%; width: 55%;
padding: 13px; padding: 13px;
margin-top: 20px; margin-top: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: none; box-shadow: none;
border: none; border: none;
background: #16a085; background: #16a085;
font-size: 25px; font-size: 25px;
} }
.Take-me-back{ .Take-me-back {
text-decoration: none; text-decoration: none;
color: white; color: white;
font-family: monospace; font-family: monospace;
} }

4
frontend/styles/globals.css
View File

@ -26,8 +26,8 @@ section {
.flex-column { .flex-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-image: url("./../assets/bg/main-bg.png"); background-image: url('./../assets/bg/main-bg.png');
} }
.main-bg { .main-bg {
background-image: url("./../assets/bg/main-bg.png"); background-image: url('./../assets/bg/main-bg.png');
} }

8
frontend/styles/index.css
View File

@ -1,5 +1,5 @@
.Link{ .Link {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center align-items: center;
} }

10
frontend/styles/styles.css
View File

@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
.reg-label { .reg-label {
font-size: 24px; font-size: 24px;
@ -7,7 +7,7 @@
position: relative; position: relative;
} }
.reg-title { .reg-title {
font-family: "Montserrat", sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 700; font-weight: 700;
font-size: 36px; font-size: 36px;
text-align: center; text-align: center;
@ -24,7 +24,7 @@
margin-left: 10px; margin-left: 10px;
height: 35px; height: 35px;
width: 340px; width: 340px;
font-family: "Montserrat", sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
border-radius: 20px; border-radius: 20px;
@ -63,7 +63,7 @@
.submit-button { .submit-button {
width: 100px; width: 100px;
height: 40px; height: 40px;
font-family: "Montserrat", sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
border-radius: 10px; border-radius: 10px;
@ -88,7 +88,7 @@
} }
.foot-text { .foot-text {
font-family: "Montserrat", sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
margin-top: 50px; margin-top: 50px;

1495
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff