added login page

2022-02-15 20:44:21 +05:30 · 2022-02-15 20:44:21 +05:30 · d71001231b
parent b542cf1f7c 605cb9c1af
commit d71001231b
48 changed files with 8689 additions and 1812 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@ -0,0 +1,88 @@
+{
+  "projectName": "url-minify",
+  "projectOwner": "BRAVO68WEB",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 55,
+  "commit": true,
+  "commitConvention": "none",
+  "contributors": [
+    {
+      "login": "para-docx",
+      "name": "Dhruv Pruthi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/72385299?v=4",
+      "profile": "https://github.com/para-docx",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "chirag3003",
+      "name": "Chirag Bhalotia",
+      "avatar_url": "https://avatars.githubusercontent.com/u/68195580?v=4",
+      "profile": "https://github.com/chirag3003",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "dakshgupta2002",
+      "name": "Daksh Gupta",
+      "avatar_url": "https://avatars.githubusercontent.com/u/78641951?v=4",
+      "profile": "https://github.com/dakshgupta2002",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "logan4473",
+      "name": "Logan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/69055524?v=4",
+      "profile": "https://github.com/logan4473",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "DarkFalc0n",
+      "name": "Pratyay Roy",
+      "avatar_url": "https://avatars.githubusercontent.com/u/59203815?v=4",
+      "profile": "https://github.com/DarkFalc0n",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "luxunator",
+      "name": "luxunator",
+      "avatar_url": "https://avatars.githubusercontent.com/u/50147562?v=4",
+      "profile": "https://github.com/luxunator",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "aaheli8",
+      "name": "Aaheli Sadhukhan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/66815283?v=4",
+      "profile": "https://github.com/aaheli8",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "XxThunderBlastxX",
+      "name": "Koustav Mondal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/74706101?v=4",
+      "profile": "https://github.com/XxThunderBlastxX",
+      "contributions": [
+        "code"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true
+}
--- a/README.md
+++ b/README.md
@ -1,4 +1,7 @@
 <h1 align="center">Welcome to url-minify 👋</h1>
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+<img src="https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square" />
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 <p>
  <a href="LICENSE" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
@ -10,12 +13,11 @@

 <br />

-<img src="frontend/assets/logo/url-minify.jpg" />
+<img src="https://user-images.githubusercontent.com/41448663/153746139-237f8e4d-be25-4f04-91ec-2bb3ff6f0e34.png" />

 <br />

-> A URL shortener build with Nextjs, ExpressJS, MongoDB 
-
+> A URL shortener build with Nextjs, ExpressJS, MongoDB

 [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
 ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white&color=green)
@ -38,7 +40,7 @@ cd backend && npm install
 ## Usage

 ```sh
-# Running Frondend 
+# Running Frondend
 npm run start

 # Running Backend
@ -49,15 +51,52 @@ npm run start

 👤 **BRAVO68WEB**

-* Website: https://bravo68web.me
-* Twitter: [@BRAVO68WEB](https://twitter.com/BRAVO68WEB)
-* Github: [@BRAVO68WEB](https://github.com/BRAVO68WEB)
-* LinkedIn: [@BRAVO68WEB](https://linkedin.com/in/BRAVO68WEB)
+- Website: https://bravo68web.me
+- Twitter: [@BRAVO68WEB](https://twitter.com/BRAVO68WEB)
+- Github: [@BRAVO68WEB](https://github.com/BRAVO68WEB)
+- LinkedIn: [@BRAVO68WEB](https://linkedin.com/in/BRAVO68WEB)
+
+## Participations
+
+### Current
+
+- JWOC (https://jwoc.tech) <br> <img src="https://jwoc.tech/assets/img/opengraph.png" height=75px/>
+
+### Past
+
+- None

 ## 🤝 Contributing

 Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/BRAVO68WEB/url-minify/issues). You can also take a look at the [contributing guide](CONTRIBUTING.md).

+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/para-docx"><img src="https://avatars.githubusercontent.com/u/72385299?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Dhruv Pruthi</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=para-docx" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/chirag3003"><img src="https://avatars.githubusercontent.com/u/68195580?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Chirag Bhalotia</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=chirag3003" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/dakshgupta2002"><img src="https://avatars.githubusercontent.com/u/78641951?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Daksh Gupta</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=dakshgupta2002" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/logan4473"><img src="https://avatars.githubusercontent.com/u/69055524?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Logna</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=logan4473" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/DarkFalc0nx"><img src="https://avatars.githubusercontent.com/u/59203815?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Pratyay Roy</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=DarkFalc0nx" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/luxunator"><img src="https://avatars.githubusercontent.com/u/50147562?v=4?s=55" width="55px;" alt=""/><br /><sub><b>luxunator</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=luxunator" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/aaheli8"><img src="https://avatars.githubusercontent.com/u/66815283?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Aaheli Sadhukhan</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=aaheli8" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/XxThunderBlastxX"><img src="https://avatars.githubusercontent.com/u/74706101?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Koustav Mondal</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=XxThunderBlastxX" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
 ## Show your support

 Give a ⭐️ if this project helped you!
@ -66,3 +105,5 @@ Give a ⭐️ if this project helped you!

 Copyright © 2022 [BRAVO68WEB](https://github.com/BRAVO68WEB).<br />
 This project is [MIT](LICENSE) licensed.
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
--- a/backend/controllers/minify.js
+++ b/backend/controllers/minify.js
@ -1,27 +1,29 @@
-const Minfy = require("../models/minifed_urls")
+const Minfy = require('../models/minifed_urls')
 const base_url = 'https://minfy.xyz/'
+const { nanoid } = require('nanoid')

 module.exports.getAllData = async (req, res) => {
-   Minfy.find()
-   .then((data)=>{
-      res.send(data)
-  })
-  .catch((err)=>{
-      console.error(err)
-      res.sendStatus(500)
-  })
+   Minfy.find({})
+      .then((data) => {
+         res.json(data)
+      })
+      .catch((err) => {
+         console.error(err)
+         res.sendStatus(500)
+      })
 }

 module.exports.getURLData = async (req, res) => {
   try {
-      const {
-         alias
-      } = req.params
      const data = await Minfy.findOne({
-         alias: alias
+         alias: req.params.alias,
      })
-      data.minifiedUrl = base_url + data.alias
-      return res.send(data)
+      // data.minifiedUrl = base_url + data.alias
+      if (!data || data == null) {
+         return res.json({ success: false, message: 'No data found' })
+      } else {
+         res.json({ success: true, data })
+      }
   } catch (err) {
      console.error(err)
      res.sendStatus(500)
@ -29,35 +31,71 @@ module.exports.getURLData = async (req, res) => {
 }

 module.exports.findUrlById = async (req, res) => {
-   Minfy.findById(req.params.id).then((data) => {
+   Minfy.findById(req.params.id)
+      .then((data) => {
         res.send(data)
      })
      .catch((err) => {
         console.error(err)
         res.sendStatus(500)
      })
-
 }

 module.exports.addURL = async (req, res) => {
+   req.body.alias = nanoid(5)
   req.body.minifiedUrl = base_url + req.body.alias
   Minfy.create(req.body)
-   .then((data)=>{
-       res.send(data)
-   })
-   .catch((err)=>{
-       console.error(err)
-       res.sendStatus(500)
-   })
+      .then((data) => {
+         res.json(data)
+      })
+      .catch((err) => {
+         console.error(err)
+         res.sendStatus(500)
+      })
 }

 module.exports.deleteUrlData = async (req, res) => {
   Minfy.findByIdAndRemove(req.params.id)
      .then((data) => {
-         res.send("Successfully Deleted")
+         res.send('Successfully Deleted')
      })
      .catch((err) => {
         console.error(err)
         res.sendStaus(500)
      })
 }
+
+module.exports.updateUrlData = async (req, res) => {
+   //find a data object with url's id and update the alias
+   Minfy.findByIdAndUpdate(req.params.id, { alias: req.body.alias })
+      .then((data) => {
+         //send back the updated data object
+         res.send(data)
+      })
+      .catch((err) => {
+         //found error
+         console.error(err)
+         res.sendStatus(500)
+      })
+}
+
+module.exports.addURLAuthed = async (req, res) => {
+   const { alias, originalUrl } = req.body
+   var createdBy = req.user.data.email
+   // console.log(req.user);
+   const minifiedUrl = base_url + alias
+   const data = {
+      alias,
+      originalUrl,
+      minifiedUrl,
+      createdBy,
+   }
+   Minfy.create(data)
+      .then((data) => {
+         res.send(data)
+      })
+      .catch((err) => {
+         console.error(err)
+         res.sendStatus(500)
+      })
+}
--- a/backend/controllers/user.js
+++ b/backend/controllers/user.js
@ -1,53 +1,55 @@
-const jwt = require("jsonwebtoken");
-const User = require("../models/user");
+const jwt = require('jsonwebtoken')
+const User = require('../models/user')

-
-module.exports.register =  async ({ body: { email, password } }, res) => {
-    try{
-        if(!email || !password) return res.sendStatus(400)
-        let oldUser = await User.findOne({ email }).catch((err) => {
-            console.error(err);
-        });
-        if (oldUser) return res.status(400).send('Already Exists');
-        let user = new User({ email });
-        user.setPassword(password);
-        let validationError = false;
-        await user.save().catch((err) => {
-            validationError = true;
-            return res.sendStatus(400);
-        });
-        if (!validationError) return res.send(user.generateJWT());
-
-    }catch(e){
-        return res.sendStatus(500)
-    }
+module.exports.register = async ({ body: { email, password } }, res) => {
+   try {
+      if (!email || !password) return res.sendStatus(400)
+      let oldUser = await User.findOne({ email }).catch((err) => {
+         console.error(err)
+      })
+      if (oldUser) return res.status(400).send('Already Exists')
+      let user = new User({ email })
+      user.setPassword(password)
+      let validationError = false
+      await user.save().catch((err) => {
+         validationError = true
+         return res.sendStatus(400)
+      })
+      if (!validationError) return res.send(user.generateJWT())
+   } catch (e) {
+      console.log(e)
+      return res.sendStatus(500)
+   }
 }
 module.exports.login = async ({ body: { email, password } }, res) => {
-    try{
-        if (!email || !password) return res.sendStatus(400)
-        let user = await User.findOne({email}).catch((err) => console.error(err));
+   try {
+      if (!email || !password) return res.sendStatus(400)
+      let user = await User.findOne({ email }).catch((err) =>
+         console.error(err)
+      )

-        if (user && user.validatePassword(password))
-            return res.send(user.generateJWT());
-        return res.status(401).send(null);
-    }catch(err) {
-        return res.sendStatus(500)
-    }
+      if (user && user.validatePassword(password))
+         return res.json({ access_token: user.generateJWT() })
+      return res.status(401).send(null)
+   } catch (err) {
+      console.log(err)
+      return res.sendStatus(500)
+   }
 }
-module.exports.me= async (req, res) => {
-    try{
-        if (!req.user.isAuthenticated) {
-            res.sendStatus(401);
-            return;
-        }
-        let user = req.user.data;
-        res.send({
-            email: user.email,
-            name: user.name,
-            phone: user.phone,
-        });
-    }catch (e){
-        console.log(e)
-        return res.sendStatus(500)
-    }
+module.exports.me = async (req, res) => {
+   try {
+      if (!req.user.isAuthenticated) {
+         res.sendStatus(401)
+         return
+      }
+      let user = req.user.data
+      res.send({
+         email: user.email,
+         name: user.name,
+         phone: user.phone,
+      })
+   } catch (e) {
+      console.log(e)
+      return res.sendStatus(500)
+   }
 }
--- a/backend/index.js
+++ b/backend/index.js
@ -1,4 +1,5 @@
 const express = require('express')
+const cors = require('cors')
 const http = require('http')
 const { urlencoded, json } = require('body-parser')
 const session = require('express-session')
@ -9,6 +10,7 @@ require('dotenv').config()
 const app = express()

 app.use(express.json())
+app.use(cors())
 app.use(json())
 app.use(
   urlencoded({
--- a/backend/middlewares/auth.js
+++ b/backend/middlewares/auth.js
@ -1,26 +1,25 @@
-const jwt = require("jsonwebtoken");
-const User = require("../models/user")
-
+const jwt = require('jsonwebtoken')
+const User = require('../models/user')

 module.exports.auth = async (req, res, next) => {
-    let user = {isAuthenticated:false};
-    if (req.headers.authorization && req.headers.authorization !== null) {
-        try {
-            let jwtData = jwt.verify(
-                req.headers.authorization.replace("Bearer ", ""),
-                process.env.AUTH_SECRET
-            );
-            let userData = await User.findOne({
-                email: jwtData.email,
-                hash: jwtData.hash,
-            }).catch((err) => console.error(err));
-            user.isAuthenticated = userData ? true : false;
-            user.data = userData;
-        } catch (err) {
-            user.isAuthenticated = false;
-            user.data = null;
-        }
-    }
-    req.user = user;
-    next();
-}
+   let user = { isAuthenticated: false }
+   if (req.headers.authorization && req.headers.authorization !== null) {
+      try {
+         let jwtData = jwt.verify(
+            req.headers.authorization.replace('Bearer ', ''),
+            process.env.AUTH_SECRET
+         )
+         let userData = await User.findOne({
+            email: jwtData.email,
+            hash: jwtData.hash,
+         }).catch((err) => console.error(err))
+         user.isAuthenticated = userData ? true : false
+         user.data = userData
+      } catch (err) {
+         user.isAuthenticated = false
+         user.data = null
+      }
+   }
+   req.user = user
+   next()
+}
--- a/backend/models/minifed_urls.js
+++ b/backend/models/minifed_urls.js
@ -1,27 +1,31 @@
-const mongoose = require('mongoose')
-const { Schema } = mongoose
-
-//build a schema
-const minifiedUrlSchema = new Schema(
-   {
-      originalUrl: {
-         type: String,
-         required: true,
-      },
-      alias: {
-         type: String,
-         required: true,
-         unique: true,
-      },
-      minifiedUrl: {
-         type: String,
-         required: true,
-      },
-      views: {
-         type: Number,
-      },
-   },
-   { timestamp: true }
-)
-//make a model using this schema and export it
-module.exports = mongoose.model('minified_url_model', minifiedUrlSchema)
+const mongoose = require('mongoose')
+const { Schema } = mongoose
+
+//build a schema
+const minifiedUrlSchema = new Schema(
+   {
+      originalUrl: {
+         type: String,
+         required: true,
+      },
+      alias: {
+         type: String,
+         required: true,
+         unique: true,
+      },
+      minifiedUrl: {
+         type: String,
+         required: true,
+      },
+      views: {
+         type: Number,
+      },
+      createdBy: {
+         type: String,
+         default: 'Anonymous',
+      },
+   },
+   { timestamp: true }
+)
+//make a model using this schema and export it
+module.exports = mongoose.model('minified_url_model', minifiedUrlSchema)
--- a/backend/models/user.js
+++ b/backend/models/user.js
@ -1,63 +1,63 @@
-const mongoose = require("mongoose");
-const crypto = require("crypto");
-const jwt = require("jsonwebtoken");
+const mongoose = require('mongoose')
+const crypto = require('crypto')
+const jwt = require('jsonwebtoken')

-const { Schema } = mongoose;
+const { Schema } = mongoose

 const UsersSchema = new Schema(
-    {
-        email: {
-            type: String,
-            unique: true,
-        },
-        name: {
-            type: String,
-            // required: true,
-        },
-        hash: String,
-        salt: String,
-    },
-    {
-        timestamps: true,
-    }
-);
+   {
+      email: {
+         type: String,
+         unique: true,
+      },
+      name: {
+         type: String,
+         // required: true,
+      },
+      hash: String,
+      salt: String,
+   },
+   {
+      timestamps: true,
+   }
+)

 UsersSchema.methods.setPassword = function (password) {
-    this.salt = crypto.randomBytes(16).toString("hex");
-    this.hash = crypto
-        .pbkdf2Sync(password, this.salt, 10000, 512, "sha512")
-        .toString("hex");
-};
+   this.salt = crypto.randomBytes(16).toString('hex')
+   this.hash = crypto
+      .pbkdf2Sync(password, this.salt, 10000, 512, 'sha512')
+      .toString('hex')
+}

 UsersSchema.methods.validatePassword = function (password) {
-    const hash = crypto
-        .pbkdf2Sync(password, this.salt, 10000, 512, "sha512")
-        .toString("hex");
-    return this.hash === hash;
-};
+   const hash = crypto
+      .pbkdf2Sync(password, this.salt, 10000, 512, 'sha512')
+      .toString('hex')
+   return this.hash === hash
+}

 UsersSchema.methods.generateJWT = function () {
-    const today = new Date();
-    const expirationDate = new Date(today);
-    expirationDate.setDate(today.getDate() + 60);
+   const today = new Date()
+   const expirationDate = new Date(today)
+   expirationDate.setDate(today.getDate() + 60)

-    return jwt.sign(
-        {
-            email: this.email,
-            hash: this.hash,
-            id: this._id,
-            exp: parseInt(String(expirationDate.getTime() / 1000), 10),
-        },
-        process.env.AUTH_SECRET
-    );
-};
+   return jwt.sign(
+      {
+         email: this.email,
+         hash: this.hash,
+         id: this._id,
+         exp: parseInt(String(expirationDate.getTime() / 1000), 10),
+      },
+      process.env.AUTH_SECRET
+   )
+}

 UsersSchema.methods.toAuthJSON = function () {
-    return {
-        id: this._id,
-        email: this.email,
-        token: this.generateJWT(),
-    };
-};
+   return {
+      id: this._id,
+      email: this.email,
+      token: this.generateJWT(),
+   }
+}

-module.exports = mongoose.model("users", UsersSchema);
+module.exports = mongoose.model('users', UsersSchema)
--- a/backend/package.json
+++ b/backend/package.json
@ -1,6 +1,6 @@
 {
   "name": "url-minify-api",
-   "version": "1.0.0",
+   "version": "1.1.0",
   "description": "URL Minify Backend",
   "main": "index.js",
   "scripts": {
--- a/backend/pnpm-lock.yaml
+++ b/backend/pnpm-lock.yaml
--- a/backend/routers/index.js
+++ b/backend/routers/index.js
@ -4,7 +4,7 @@ const router = express.Router()
 const homeController = require('../controllers/home_controller')

 router.get('/', homeController.home)
-router.use("/minify", require("./minify"))
-router.use('/user', require("./user"))
+router.use('/minify', require('./minify'))
+router.use('/user', require('./user'))

 module.exports = router
--- a/backend/routers/minify.js
+++ b/backend/routers/minify.js
@ -1,18 +1,18 @@
-const {Router} = require("express")
-const controller = require("../controllers/minify")
+const { Router } = require('express')
+const controller = require('../controllers/minify')
+const { auth } = require('../middlewares/auth')

-const router = Router();
+const router = Router()

-router.get("/all", controller.getAllData)
+router.get('/all', controller.getAllData)
+router.get('/id/:id', controller.findUrlById)
+router.get('/alias/:alias', controller.getURLData)

-router.get("/alias/:alias", controller.getURLData)
+router.post('/add', controller.addURL)
+router.post('/add/custom', auth, controller.addURLAuthed)

-router.post("/add",controller.addURL)
+router.patch('/edit/:id', auth, controller.updateUrlData)

-router.get("/id/:id", controller.findUrlById)
+router.delete('/delete/:id', auth, controller.deleteUrlData)

-router.delete('/delete/:id',controller.deleteUrlData)
-
-router.patch('/edit/:id', controller.updateUrlData)
-
-module.exports = router;
+module.exports = router
--- a/backend/routers/user.js
+++ b/backend/routers/user.js
@ -1,11 +1,11 @@
-const {Router} = require("express")
-const controller = require("../controllers/user")
-const {auth} = require("../middlewares/auth")
+const { Router } = require('express')
+const controller = require('../controllers/user')
+const { auth } = require('../middlewares/auth')

-const router = Router();
+const router = Router()

-router.post('/login',controller.login )
+router.post('/login', controller.login)
 router.post('/register', controller.register)
-router.get('/me',auth, controller.me)
+router.get('/me', auth, controller.me)

-module.exports = router
+module.exports = router
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
--- a/frontend/.env
+++ b/frontend/.env
@ -0,0 +1,2 @@
+NODE_ENV=dev
+NEXT_PUBLIC_API_URL=http://localhost:5000
--- a/frontend/assets/bg/main-bg.png
+++ b/frontend/assets/bg/main-bg.png
--- a/frontend/assets/icons/email-line.svg
+++ b/frontend/assets/icons/email-line.svg
@ -1,45 +1 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="#000">
-<g>
-	<path d="M448,64H64C28.656,64,0,92.656,0,128v256c0,35.344,28.656,64,64,64h384c35.344,0,64-28.656,64-64V128
-		C512,92.656,483.344,64,448,64z M342.656,234.781l135.469-116.094c0.938,3,1.875,6,1.875,9.313v256
-		c0,2.219-0.844,4.188-1.281,6.281L342.656,234.781z M448,96c2.125,0,4,0.813,6,1.219L256,266.938L58,97.219
-		C60,96.813,61.875,96,64,96H448z M33.266,390.25C32.828,388.156,32,386.219,32,384V128c0-3.313,0.953-6.313,1.891-9.313
-		L169.313,234.75L33.266,390.25z M64,416c-3.234,0-6.172-0.938-9.125-1.844l138.75-158.563l51.969,44.531
-		C248.578,302.719,252.297,304,256,304s7.422-1.281,10.406-3.875l51.969-44.531l138.75,158.563C454.188,415.062,451.25,416,448,416
-		H64z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Capa_1" width="512" height="512" x="0" y="0" style="enable-background:new 0 0 512 512" fill="#000" version="1.1" viewBox="0 0 512 512" xml:space="preserve"><g><path d="M448,64H64C28.656,64,0,92.656,0,128v256c0,35.344,28.656,64,64,64h384c35.344,0,64-28.656,64-64V128 C512,92.656,483.344,64,448,64z M342.656,234.781l135.469-116.094c0.938,3,1.875,6,1.875,9.313v256 c0,2.219-0.844,4.188-1.281,6.281L342.656,234.781z M448,96c2.125,0,4,0.813,6,1.219L256,266.938L58,97.219 C60,96.813,61.875,96,64,96H448z M33.266,390.25C32.828,388.156,32,386.219,32,384V128c0-3.313,0.953-6.313,1.891-9.313 L169.313,234.75L33.266,390.25z M64,416c-3.234,0-6.172-0.938-9.125-1.844l138.75-158.563l51.969,44.531 C248.578,302.719,252.297,304,256,304s7.422-1.281,10.406-3.875l51.969-44.531l138.75,158.563C454.188,415.062,451.25,416,448,416 H64z"/></g></svg>
--- a/frontend/assets/icons/lock-line.svg
+++ b/frontend/assets/icons/lock-line.svg
@ -1,12 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
-    <title>Icons 56/lock_outline_56</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Icons-56/lock_outline_56" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="lock_outline_56">
-            <polygon points="0 0 56 0 56 56 0 56"></polygon>
-            <path d="M28,4.99999695 C33.5228475,4.99999695 38,9.47714945 38,14.9999969 L38.0017546,21.0280484 C39.4179964,21.106545 40.3764802,21.3582942 41.368488,21.8888258 C42.5431453,22.5170394 43.4829606,23.4568547 44.1111742,24.631512 C44.7715728,25.8663502 45,27.049243 45,29.1277704 L45,40.8722296 C45,42.950757 44.7715728,44.1336498 44.1111742,45.368488 C43.4829606,46.5431453 42.5431453,47.4829606 41.368488,48.1111742 C40.1336498,48.7715728 38.950757,49 36.8722296,49 L19.1277704,49 C17.049243,49 15.8663502,48.7715728 14.631512,48.1111742 C13.4568547,47.4829606 12.5170394,46.5431453 11.8888258,45.368488 C11.2284272,44.1336498 11,42.950757 11,40.8722296 L11,29.1277704 C11,27.049243 11.2284272,25.8663502 11.8888258,24.631512 C12.5170394,23.4568547 13.4568547,22.5170394 14.631512,21.8888258 C15.6237549,21.3581685 16.5824578,21.1064257 17.9992523,21.0279927 L18,14.9999969 C18,9.47714945 22.4771525,4.99999695 28,4.99999695 Z M36.8722296,24 L19.1277704,24 C17.3447329,24 16.6981604,24.1856512 16.0463086,24.5342654 C15.3944567,24.8828796 14.8828796,25.3944567 14.5342654,26.0463086 C14.1856512,26.6981604 14,27.3447329 14,29.1277704 L14,40.8722296 C14,42.6552671 14.1856512,43.3018396 14.5342654,43.9536914 C14.8828796,44.6055433 15.3944567,45.1171204 16.0463086,45.4657346 C16.6981604,45.8143488 17.3447329,46 19.1277704,46 L36.8722296,46 C38.6552671,46 39.3018396,45.8143488 39.9536914,45.4657346 C40.6055433,45.1171204 41.1171204,44.6055433 41.4657346,43.9536914 C41.8143488,43.3018396 42,42.6552671 42,40.8722296 L42,29.1277704 C42,27.3447329 41.8143488,26.6981604 41.4657346,26.0463086 C41.1171204,25.3944567 40.6055433,24.8828796 39.9536914,24.5342654 C39.3018396,24.1856512 38.6552671,24 36.8722296,24 Z M28,30 C29.6568542,30 31,31.3431458 31,33 C31,34.3058822 30.1656226,35.4168852 29.0009007,35.8289758 L29,39 C29,39.5522847 28.5522847,40 28,40 C27.4477153,40 27,39.5522847 27,39 L27.0000889,35.8293257 C25.8348501,35.4175144 25,34.3062521 25,33 C25,31.3431458 26.3431458,30 28,30 Z M28,7.99999695 C24.1340068,7.99999695 21,11.1340037 21,14.9999969 L21,20.9999969 L35,20.9999969 L35,14.9999969 C35,11.1340037 31.8659932,7.99999695 28,7.99999695 Z" id="↳-Icon-Color" fill="currentColor" fill-rule="nonzero"></path>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="56" height="56" version="1.1" viewBox="0 0 56 56"><title>Icons 56/lock_outline_56</title><desc>Created with Sketch.</desc><g id="Icons-56/lock_outline_56" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="lock_outline_56"><polygon points="0 0 56 0 56 56 0 56"/><path id="↳-Icon-Color" fill="currentColor" fill-rule="nonzero" d="M28,4.99999695 C33.5228475,4.99999695 38,9.47714945 38,14.9999969 L38.0017546,21.0280484 C39.4179964,21.106545 40.3764802,21.3582942 41.368488,21.8888258 C42.5431453,22.5170394 43.4829606,23.4568547 44.1111742,24.631512 C44.7715728,25.8663502 45,27.049243 45,29.1277704 L45,40.8722296 C45,42.950757 44.7715728,44.1336498 44.1111742,45.368488 C43.4829606,46.5431453 42.5431453,47.4829606 41.368488,48.1111742 C40.1336498,48.7715728 38.950757,49 36.8722296,49 L19.1277704,49 C17.049243,49 15.8663502,48.7715728 14.631512,48.1111742 C13.4568547,47.4829606 12.5170394,46.5431453 11.8888258,45.368488 C11.2284272,44.1336498 11,42.950757 11,40.8722296 L11,29.1277704 C11,27.049243 11.2284272,25.8663502 11.8888258,24.631512 C12.5170394,23.4568547 13.4568547,22.5170394 14.631512,21.8888258 C15.6237549,21.3581685 16.5824578,21.1064257 17.9992523,21.0279927 L18,14.9999969 C18,9.47714945 22.4771525,4.99999695 28,4.99999695 Z M36.8722296,24 L19.1277704,24 C17.3447329,24 16.6981604,24.1856512 16.0463086,24.5342654 C15.3944567,24.8828796 14.8828796,25.3944567 14.5342654,26.0463086 C14.1856512,26.6981604 14,27.3447329 14,29.1277704 L14,40.8722296 C14,42.6552671 14.1856512,43.3018396 14.5342654,43.9536914 C14.8828796,44.6055433 15.3944567,45.1171204 16.0463086,45.4657346 C16.6981604,45.8143488 17.3447329,46 19.1277704,46 L36.8722296,46 C38.6552671,46 39.3018396,45.8143488 39.9536914,45.4657346 C40.6055433,45.1171204 41.1171204,44.6055433 41.4657346,43.9536914 C41.8143488,43.3018396 42,42.6552671 42,40.8722296 L42,29.1277704 C42,27.3447329 41.8143488,26.6981604 41.4657346,26.0463086 C41.1171204,25.3944567 40.6055433,24.8828796 39.9536914,24.5342654 C39.3018396,24.1856512 38.6552671,24 36.8722296,24 Z M28,30 C29.6568542,30 31,31.3431458 31,33 C31,34.3058822 30.1656226,35.4168852 29.0009007,35.8289758 L29,39 C29,39.5522847 28.5522847,40 28,40 C27.4477153,40 27,39.5522847 27,39 L27.0000889,35.8293257 C25.8348501,35.4175144 25,34.3062521 25,33 C25,31.3431458 26.3431458,30 28,30 Z M28,7.99999695 C24.1340068,7.99999695 21,11.1340037 21,14.9999969 L21,20.9999969 L35,20.9999969 L35,14.9999969 C35,11.1340037 31.8659932,7.99999695 28,7.99999695 Z"/></g></g></svg>
--- a/frontend/assets/icons/user-line.svg
+++ b/frontend/assets/icons/user-line.svg
@ -1 +1 @@
-<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g id="about"><path d="M16,16A7,7,0,1,0,9,9,7,7,0,0,0,16,16ZM16,4a5,5,0,1,1-5,5A5,5,0,0,1,16,4Z"/><path d="M17,18H15A11,11,0,0,0,4,29a1,1,0,0,0,1,1H27a1,1,0,0,0,1-1A11,11,0,0,0,17,18ZM6.06,28A9,9,0,0,1,15,20h2a9,9,0,0,1,8.94,8Z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title/><g id="about"><path d="M16,16A7,7,0,1,0,9,9,7,7,0,0,0,16,16ZM16,4a5,5,0,1,1-5,5A5,5,0,0,1,16,4Z"/><path d="M17,18H15A11,11,0,0,0,4,29a1,1,0,0,0,1,1H27a1,1,0,0,0,1-1A11,11,0,0,0,17,18ZM6.06,28A9,9,0,0,1,15,20h2a9,9,0,0,1,8.94,8Z"/></g></svg>
--- a/frontend/components/Dashboard/Dashboard.jsx
+++ b/frontend/components/Dashboard/Dashboard.jsx
@ -0,0 +1,62 @@
+import DashboardStyle from "./Dashboard.style";
+
+function Sidebar1(){
+    return(
+        <div className="sidebar" style={{backgroundColor:"#696969"}}>
+            <ul>
+                <li className="nav-item mb-2"><h3>Brand Name</h3></li>
+                <li className="nav-item mb-2"><img src="logo.svg" style={{'borderRadius':'5px'}}></img></li>
+                <li className="nav-item mb-2">Hyat</li>
+                <li className="nav-item mb-2">Product Desiner</li>
+                <li className="nav-item mb-2"><button>Create Link</button></li>
+                <li className="nav-item mb-2">Overview</li>
+                <li className="nav-item mb-2">MyLinks</li>
+                <li className="nav-item mb-2">Extras</li>
+            </ul>
+        </div>
+    )
+}
+function Sidebar2()
+{
+    return(
+        <div  className="sidebar2">
+            <h2 className="dash">Overview</h2>
+            <div className="row">
+                <div className="column">Box1</div>
+                <div className="column">Box2</div>
+                <div className="column">Box3</div>
+            </div>
+        </div>
+    )
+}
+function Graph()
+{
+    return (
+        <div  className="sidebar2">
+            <div className="row">
+                <div className="column">Daily Insight</div>
+                <div className="column">
+                    <ul >
+                        <li className="list2">Api Version</li>
+                        <li className="list2">Frontend Version</li>
+                        <li className="list2">Links generated yet</li>
+                        <li className="list2">Total views yet</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+function App() {
+    return (
+        <DashboardStyle>
+            <Sidebar1 />
+            <Sidebar2 />
+            <Graph />
+        </DashboardStyle>
+    );
+}
+
+export default App;
--- a/frontend/components/Dashboard/Dashboard.style.js
+++ b/frontend/components/Dashboard/Dashboard.style.js
@ -0,0 +1,32 @@
+import styled from "styled-components"
+
+export default styled.div`
+  .sidebar{
+    float: left;
+    width: 20%;
+    height: 100vh;
+  }
+  .nav-item {
+    margin: 2.5rem;
+    list-style-type: none;
+  }
+  .sidebar2{
+    text-align: center;
+  }
+  .dash{
+    text-align: left;
+    margin-left:  1.5px;
+  }
+  .row {
+    display: flex;
+  }
+
+  .column {
+    flex: 30%;
+    height: 250px;
+  }
+  .list2{
+    margin-bottom: 10px;
+    list-style-type: none;
+  }
+`
--- a/frontend/components/Features/index.js
+++ b/frontend/components/Features/index.js
@ -1,42 +1,82 @@
-import * as React from 'react';
-import { Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography, alpha, AppBar } from "@mui/material";
+import * as React from "react";
+import {
+  Avatar,
+  Box,
+  Button,
+  Container,
+  IconButton,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Tooltip,
+  Typography,
+  alpha,
+  AppBar,
+} from "@mui/material";

-import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner';
-import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
-import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
+import QrCodeScannerIcon from "@mui/icons-material/QrCodeScanner";
+import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
+import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";

 export default function Index() {
  return (
-
-    <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', my: 2 }}>
+    <Box
+      sx={{
+        flexGrow: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        my: 2,
+      }}
+    >
      <Box>
        <h1> SHORTEN, SHARE AND ANALYZE</h1>
        <br />
      </Box>
-      <Box sx={{ flexGrow: 1, display: 'flex', justifyContent:'space-around', alignContent:'space-around', alignItems: 'space-around', width:'50vw'}}>
-
-        <Box style={{ display: 'flex', flexDirection: 'column', justifyContent: 'centre', alignItems: 'center', }}>
-          <RemoveRedEyeIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
+      <Box
+        sx={{
+          flexGrow: 1,
+          display: "flex",
+          justifyContent: "space-around",
+          alignContent: "space-around",
+          alignItems: "space-around",
+          width: "50vw",
+        }}
+      >
+        <Box
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "centre",
+            alignItems: "center",
+          }}
+        >
+          <RemoveRedEyeIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
          <h4>VIEW COUNTER</h4>
        </Box>
-        <Box style={{ display: 'flex', flexDirection: 'column', justifyContent: 'centre', alignItems: 'center', }}>
-          <QrCodeScannerIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
+        <Box
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "centre",
+            alignItems: "center",
+          }}
+        >
+          <QrCodeScannerIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
          <h4>QR CODE</h4>
        </Box>
-        <Box style={{ display: 'flex', flexDirection: 'column', justifyContent: 'centre', alignItems: 'center', }}>
-          <RocketLaunchIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
+        <Box
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "centre",
+            alignItems: "center",
+          }}
+        >
+          <RocketLaunchIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
          <h4>ROBUST API</h4>
        </Box>
      </Box>
-
    </Box>
-
-
-
  );
 }
-
-
-
-
-
--- a/frontend/components/HomeSection/HomeSection.style.js
+++ b/frontend/components/HomeSection/HomeSection.style.js
@ -1,13 +1,13 @@
-import styled from "styled-components"
+import styled from "styled-components";

 export default styled.section`
  display: flex;
-  justify-content:center;
-  align-items:center;
+  justify-content: center;
+  align-items: center;
  .content {
    display: flex;
-    justify-content:center;
-    align-items:center;
-    flex-direction:column;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
  }
-`
+`;
--- a/frontend/components/HomeSection/homeSection.jsx
+++ b/frontend/components/HomeSection/homeSection.jsx
@ -1,60 +1,81 @@
-import { borderRadius, padding } from '@mui/system';
-import React from 'react';
-import { render } from 'react-dom';
+import React from "react";
 import HomeSectionStyle from "./HomeSection.style";
-import Link from 'next/link';
+import Link from "next/link";
+import Axios from "helpers/Axios";

-
-const head={
-    fontSize:'5rem',
-    fontWeight:'bold',
-    marginBottom:'30px'
+const head = {
+  fontSize: "5rem",
+  fontWeight: "bold",
+  marginBottom: "30px",
 };
-const box={
-    fontSize:'1.5em',
-    borderRadius:'50px',
-    padding:'1em',
-    width: '500px',
-    height:'50px'
+const box = {
+  fontSize: "1.5em",
+  borderRadius: "50px",
+  padding: "1em",
+  width: "500px",
+  height: "50px",
 };
-const btn={
-    fontWeight:'bold',
-    position:'absolute',
-    alignItems: 'center',
-    right: '0px',
-    marginRight:'5px',
-    marginTop:'4.5px',
-    marginBottom:'3px',
-    height: '40px',
-    width:  '100px',
-    borderRadius: '50px'
-
+const btn = {
+  fontWeight: "bold",
+  position: "absolute",
+  alignItems: "center",
+  right: "0px",
+  marginRight: "5px",
+  marginTop: "4.5px",
+  marginBottom: "3px",
+  height: "40px",
+  width: "100px",
+  borderRadius: "50px",
 };
-const searchBox={
-    position: 'relative',
-   
+const searchBox = {
+  position: "relative",
 };
 function HomeSection(props) {
-    
-    
-    return (
-        <HomeSectionStyle>
-            <div className="content">
-                <h1 style={head} className="title">
-                    URL MINIFY
-                </h1>
-    
+  const setMinfy = async () => {
+    let res;
+    try {
+      res = await Axios.post(`/minify/add`, {
+        originalUrl: props.longUrl,
+      });
+    } catch (err) {
+      console.error(err);
+      return;
+    }
+
+    const data = await res.data;
+    props.setShortUrl(data.minifiedUrl);
+    navigator.clipboard.writeText(props.shortUrl);
+  };
+
+  return (
+    <HomeSectionStyle>
+      <div className="content">
+        <h1 style={head} className="title">
+          URL MINIFY
+        </h1>
+
        <div style={searchBox}>
-           <input style={box}placeholder="Enter the url to be minified......"/>
-          <button style={btn} id="minify">MINIFY</button>
+          <input
+            style={box}
+            placeholder="Enter the url to be minified......"
+            value={props.longUrl}
+            onChange={(e) => {
+              props.setLongUrl(e.target.value);
+            }}
+          />
+          <button style={btn} id="minify" onClick={setMinfy}>
+            MINIFY
+          </button>
        </div>
        <div>
-            <h3>Need more advanced features? | <Link href="/signup">Create an account</Link></h3>
+          <h3>
+            Need more advanced features? |{" "}
+            <Link href="/signup">Create an account</Link>
+          </h3>
        </div>
-        </div>
-        </HomeSectionStyle>
-    );
+      </div>
+    </HomeSectionStyle>
+  );
 }

-
 export default HomeSection;
--- a/frontend/components/NavBar/Logo.js
+++ b/frontend/components/NavBar/Logo.js
@ -1,13 +1,26 @@
-import React from 'react';
+import React from "react";

-export default function Logo(){
-
-return(
+export default function Logo() {
+  return (
    <div className="logo-wrapper">
-        <svg class="logo" data-name="Layer 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.4 53.31"><path d="M58.84,53.91a9.2,9.2,0,0,1-6.54-2.72L50.14,49a2.59,2.59,0,1,1,3.67-3.66L56,47.53a4.07,4.07,0,0,0,5.76,0L75.24,34.08a4.08,4.08,0,0,0,0-5.76L70.94,24a4.08,4.08,0,0,0-5.76,0l-6.76,6.73A2.59,2.59,0,0,1,54.76,27l6.76-6.73a9.27,9.27,0,0,1,13.09,0l4.31,4.33a9.27,9.27,0,0,1,0,13.09L65.39,51.21A9.22,9.22,0,0,1,58.84,53.91Z" transform="translate(-28.21 -17.61)" fill="#fff"/><path d="M41.77,70.93a9.28,9.28,0,0,1-6.55-2.72l-4.31-4.33a9.27,9.27,0,0,1,0-13.09L44.44,37.33a9.26,9.26,0,0,1,13.09,0l2.16,2.16A2.59,2.59,0,1,1,56,43.17L53.86,41a4.07,4.07,0,0,0-5.76,0L34.59,54.46a4.08,4.08,0,0,0,0,5.76l4.32,4.33a4.08,4.08,0,0,0,5.76,0l6.75-6.73a2.59,2.59,0,1,1,3.66,3.67l-6.75,6.73A9.26,9.26,0,0,1,41.77,70.93Z" transform="translate(-28.21 -17.61)" fill="#fff"/></svg>
-        <p className="logo-text">
-            URL MINIFY
-        </p>
-    </div>                
-)
+      <svg
+        class="logo"
+        data-name="Layer 4"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 53.4 53.31"
+      >
+        <path
+          d="M58.84,53.91a9.2,9.2,0,0,1-6.54-2.72L50.14,49a2.59,2.59,0,1,1,3.67-3.66L56,47.53a4.07,4.07,0,0,0,5.76,0L75.24,34.08a4.08,4.08,0,0,0,0-5.76L70.94,24a4.08,4.08,0,0,0-5.76,0l-6.76,6.73A2.59,2.59,0,0,1,54.76,27l6.76-6.73a9.27,9.27,0,0,1,13.09,0l4.31,4.33a9.27,9.27,0,0,1,0,13.09L65.39,51.21A9.22,9.22,0,0,1,58.84,53.91Z"
+          transform="translate(-28.21 -17.61)"
+          fill="#fff"
+        />
+        <path
+          d="M41.77,70.93a9.28,9.28,0,0,1-6.55-2.72l-4.31-4.33a9.27,9.27,0,0,1,0-13.09L44.44,37.33a9.26,9.26,0,0,1,13.09,0l2.16,2.16A2.59,2.59,0,1,1,56,43.17L53.86,41a4.07,4.07,0,0,0-5.76,0L34.59,54.46a4.08,4.08,0,0,0,0,5.76l4.32,4.33a4.08,4.08,0,0,0,5.76,0l6.75-6.73a2.59,2.59,0,1,1,3.66,3.67l-6.75,6.73A9.26,9.26,0,0,1,41.77,70.93Z"
+          transform="translate(-28.21 -17.61)"
+          fill="#fff"
+        />
+      </svg>
+      <p className="logo-text">URL MINIFY</p>
+    </div>
+  );
 }
--- a/frontend/components/NavBar/Navbar.style.js
+++ b/frontend/components/NavBar/Navbar.style.js
@ -1,4 +1,4 @@
-import styled from "styled-components"
-import {AppBar} from "@mui/material";
+import styled from "styled-components";
+import { AppBar } from "@mui/material";

-export default styled(AppBar)``
+export default styled(AppBar)``;
--- a/frontend/components/Reg/Reg.jsx
+++ b/frontend/components/Reg/Reg.jsx
@ -1,29 +1,29 @@
-import React from "react";
-import RegStyle from "./Reg.style";
-import Image from "next/image";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from 'react'
+import RegStyle from './Reg.style'
+import Image from 'next/image'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
  faUser,
  faEnvelope,
  faLock,
  faClose,
-} from "@fortawesome/free-solid-svg-icons";
-import { useState } from "react";
-import { Link } from "@mui/material";
+} from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
+import { Link } from '@mui/material'

 function Reg() {
  const [userData, setUserData] = useState({
-    username: "",
-    email: "",
-    password: "",
-    repassword: "",
-  });
+    username: '',
+    email: '',
+    password: '',
+    repassword: '',
+  })

  const handleInput = (event) => {
-    const name = event.target.name;
-    const value = event.target.value;
-    setUserData({ ...userData, [name]: value });
-  };
+    const name = event.target.name
+    const value = event.target.value
+    setUserData({ ...userData, [name]: value })
+  }

  return (
    <RegStyle>
@ -100,6 +100,6 @@ function Reg() {
        </p>
      </form>
    </RegStyle>
-  );
+  )
 }
-export default Reg;
+export default Reg
--- a/frontend/components/Reg/Reg.style.js
+++ b/frontend/components/Reg/Reg.style.js
@ -1,13 +1,13 @@
-import styled from "styled-components"
+import styled from "styled-components";

 export default styled.section`
  display: flex;
-  justify-content:center;
-  align-items:center;
+  justify-content: center;
+  align-items: center;
  .content {
    display: flex;
-    justify-content:center;
-    align-items:center;
-    flex-direction:column;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
  }
-`
+`;
--- a/frontend/components/Reg/styles.css
+++ b/frontend/components/Reg/styles.css
@ -0,0 +1,106 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap");
+
+.reg-label {
+  font-size: 24px;
+  width: 30px;
+  color: #9134bd;
+  position: relative;
+}
+.reg-title {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  font-size: 36px;
+  text-align: center;
+  margin-bottom: 40px;
+  color: #9134bd;
+}
+.reg-wide-container {
+  width: 100%;
+  text-align: right;
+  color: #9134bd;
+  font-size: 24px;
+}
+.reg-input {
+  margin-left: 10px;
+  height: 35px;
+  width: 340px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  border-radius: 20px;
+  padding: 10px;
+  border: none;
+  justify-content: flex-end;
+  color: #9134bd;
+}
+.reg-input:active,
+.reg-input:focus {
+  outline: none;
+}
+.reg-input::placeholder {
+  color: #6babc7;
+}
+.reg-field {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.form-wrapper {
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 20px 30px 40px 30px;
+  border-radius: 20px;
+  font-size: 24px;
+  text-align: center;
+  backdrop-filter: blur(6px);
+  border-style: solid;
+  border-color: #f1faff;
+  border-width: 1px 0px 0px 1px;
+  margin-top: 0;
+}
+.submit-button {
+  width: 100px;
+  height: 40px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  border-radius: 10px;
+  border: none;
+  margin-top: 20px;
+  background-image: linear-gradient(135deg, #cc5fff, #7e3ee4, #0087ca, #2db9ff);
+  background-size: 200%;
+  background-position: left;
+  color: white;
+  transition: 0.5s;
+}
+.submit-button:hover {
+  background-position: right;
+}
+.submit-button:active {
+  transform: scale(0.95);
+  transition: 0.1s;
+}
+
+.icon {
+  fill: black;
+}
+
+.foot-text {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  margin-top: 50px;
+  color: black;
+  text-decoration: none;
+}
+
+.underline {
+  text-decoration: underline;
+  color: #9134bd;
+}
+.underline:hover {
+  color: #008ed4;
+  transition: 0.5s;
+}
--- a/frontend/helpers/Axios.js
+++ b/frontend/helpers/Axios.js
@ -0,0 +1,11 @@
+import axios from "axios";
+
+var API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export default axios.create({
+  baseURL: API_URL,
+  headers: {
+    "Content-Type": "application/json",
+    "Access-Control-Allow-Origin": "*",
+  },
+});
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@ -1,3 +1,3 @@
 module.exports = {
-   reactStrictMode: true,
-}
+  reactStrictMode: true,
+};
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,49 +1,50 @@
 {
-   "name": "url-minify",
-   "private": true,
-   "scripts": {
-      "dev": "next dev",
-      "build": "next build",
-      "start": "next start",
-      "prettier": "prettier --write ."
-   },
-   "dependencies": {
-      "@emotion/react": "^11.7.1",
-      "@emotion/styled": "^11.6.0",
-      "@fortawesome/fontawesome-svg-core": "^1.3.0",
-      "@fortawesome/free-brands-svg-icons": "^6.0.0",
-      "@fortawesome/free-regular-svg-icons": "^6.0.0",
-      "@fortawesome/free-solid-svg-icons": "^6.0.0",
-      "@fortawesome/react-fontawesome": "^0.1.17",
-      "@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-router-dom": "^5.3.0",
-      "styled-components": "^5.3.3"
-   },
-   "license": "MIT",
-   "repository": {
-      "type": "git",
-      "url": "git+https://github.com/bravo68web/url-minify.git"
-   },
-   "keywords": [
-      "url-minify",
-      "short-link",
-      "generator",
-      "nextjs",
-      "frontend",
-      "api",
-      "rest"
-   ],
-   "author": "BRAVO68WEB",
-   "bugs": {
-      "url": "https://github.com/bravo68web/url-minify/issues"
-   },
-   "homepage": "https://github.com/bravo68web/url-minify#readme",
-   "devDependencies": {
-      "prettier": "2.5.1"
-   }
+  "name": "url-minify",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "prettier": "prettier --write ."
+  },
+  "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.0.0",
+    "@fortawesome/free-regular-svg-icons": "^6.0.0",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@fortawesome/react-fontawesome": "^0.1.17",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/material": "^5.4.0",
+    "@mui/styled-engine-sc": "^5.3.0",
+    "axios": "^0.26.0",
+    "nanoid": "^3.2.0",
+    "next": "12.0.9",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "styled-components": "^5.3.3"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bravo68web/url-minify.git"
+  },
+  "keywords": [
+    "url-minify",
+    "short-link",
+    "generator",
+    "nextjs",
+    "frontend",
+    "api",
+    "rest"
+  ],
+  "author": "BRAVO68WEB",
+  "bugs": {
+    "url": "https://github.com/bravo68web/url-minify/issues"
+  },
+  "homepage": "https://github.com/bravo68web/url-minify#readme",
+  "devDependencies": {
+    "prettier": "2.5.1"
+  }
 }
--- a/frontend/pages/404.js
+++ b/frontend/pages/404.js
@ -0,0 +1,5 @@
+import React from "react";
+
+export default function NotFound() {
+  return <div>NotFound</div>;
+}
--- a/frontend/pages/[id].js
+++ b/frontend/pages/[id].js
@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import Head from "next/head";
+import HomeSection from "components/HomeSection/homeSection";
+import NavBar from "components/NavBar";
+import Features from "components/Features";
+import { useRouter } from "next/router";
+var axios = require("axios");
+
+function Redirector(props) {
+  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(() => {
+    if (!props?.resData.success) {
+      // router.push('/404')
+    } else {
+      // router.replace(`${props.resData.data.originalUrl}`)
+    }
+  }, []);
+  return (
+    <div className={""}>
+      <Head>
+        <title>URL MiniFy</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={"main-bg"}>Not Found</main>
+    </div>
+  );
+}
+
+Redirector.getInitialProps = async (context) => {
+  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;
+      });
+  }
+
+  if (context?.res) {
+    const go = resData?.data?.originalUrl ? resData?.data?.originalUrl : "/404";
+    console.log(go);
+    context?.res.writeHead(302, {
+      Location: go,
+    });
+    context?.res.end();
+  }
+
+  return {};
+};
+
+// export async function getServerSideProps(context){
+//    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;
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@ -1,14 +1,14 @@
-import "../styles/globals.css";
-import "../styles/logostyles.css";
-import "../styles/styles.css";
-import { UserAuthProvider } from "./user/usercontext";
+import '../styles/globals.css'
+import '../styles/logostyles.css'
+import '../styles/styles.css'
+import { UserAuthProvider } from './user/usercontext'

 function MyApp({ Component, pageProps }) {
  return (
    <UserAuthProvider>
      <Component {...pageProps} />
    </UserAuthProvider>
-  );
+  )
 }

-export default MyApp;
+export default MyApp
--- a/frontend/pages/_document.js
+++ b/frontend/pages/_document.js
@ -1,30 +1,30 @@
-import Document from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
+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
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;

-        try {
-            ctx.renderPage = () =>
-                originalRenderPage({
-                    enhanceApp: (App) => (props) =>
-                        sheet.collectStyles(<App {...props} />),
-                })
+    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()
-        }
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
    }
-}
+  }
+}
--- a/frontend/pages/api/hello.js
+++ b/frontend/pages/api/hello.js
@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction

 export default function handler(req, res) {
-   res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
--- a/frontend/pages/dashboard/index.js
+++ b/frontend/pages/dashboard/index.js
@ -0,0 +1,22 @@
+import React from 'react';
+import Head from "next/head";
+import NavBar from "../../components/NavBar";
+import Dashboard from "components/Dashboard/Dashboard"
+
+function Index(props) {
+    return (
+        <div className={""}>
+            <Head>
+                <title>Dashboard</title>
+                <link rel="icon" href="/favicon.ico" />
+            </Head>
+
+            <main>
+                <NavBar />
+                <Dashboard/>
+            </main>
+        </div>
+    );
+}
+
+export default Index;
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import Head from "next/head";
 import HomeSection from "components/HomeSection/homeSection";
 import NavBar from "components/NavBar";
@ -21,7 +21,12 @@ export default function Home() {

      <main className={"main-bg"}>
        <NavBar />
-        <HomeSection />
+        <HomeSection
+          shortUrl={shortUrl}
+          setShortUrl={setShortUrl}
+          longUrl={longUrl}
+          setLongUrl={setLongUrl}
+        />
        <Features />
      </main>
    </>
--- a/frontend/pages/signup.js
+++ b/frontend/pages/signup.js
@ -1,15 +1,14 @@
-import { useState } from 'react'
-import Head from 'next/head'
+import { useState } from "react";
+import Head from "next/head";
 import NavBar from "components/NavBar";
-import Features from 'components/Features'
-import Reg from 'components/Reg/Reg'
+import Features from "components/Features";
+import Reg from "components/Reg/Reg";

-export default function signup(){
-    return (
-        <div className='flex-column'>
-            <NavBar/>
-            <Reg/>
-        </div>
-
-    )
-}
+export default function signup() {
+  return (
+    <div className="flex-column">
+      <NavBar />
+      <Reg />
+    </div>
+  );
+}
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/prettier.config.js
+++ b/frontend/prettier.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  arrowParens: 'always',
+  singleQuote: true,
+  tabWidth: 2,
+  semi: false,
+}
--- a/frontend/styles/Home.module.css
+++ b/frontend/styles/Home.module.css
@ -1,116 +1,116 @@
 .container {
-   padding: 0 2rem;
+  padding: 0 2rem;
 }

 .main {
-   min-height: 100vh;
-   padding: 4rem 0;
-   flex: 1;
-   display: flex;
-   flex-direction: column;
-   justify-content: center;
-   align-items: center;
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }

 .footer {
-   display: flex;
-   flex: 1;
-   padding: 2rem 0;
-   border-top: 1px solid #eaeaea;
-   justify-content: center;
-   align-items: center;
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
 }

 .footer a {
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
 }

 .title a {
-   color: #0070f3;
-   text-decoration: none;
+  color: #0070f3;
+  text-decoration: none;
 }

 .title a:hover,
 .title a:focus,
 .title a:active {
-   text-decoration: underline;
+  text-decoration: underline;
 }

 .title {
-   margin: 0;
-   line-height: 1.15;
-   font-size: 4rem;
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
 }

 .title,
 .description {
-   text-align: center;
+  text-align: center;
 }

 .description {
-   margin: 4rem 0;
-   line-height: 1.5;
-   font-size: 1.5rem;
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
 }

 .code {
-   background: #fafafa;
-   border-radius: 5px;
-   padding: 0.75rem;
-   font-size: 1.1rem;
-   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-      Bitstream Vera Sans Mono, Courier New, monospace;
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
 }

 .grid {
-   display: flex;
-   align-items: center;
-   justify-content: center;
-   flex-wrap: wrap;
-   max-width: 800px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
 }

 .card {
-   margin: 1rem;
-   padding: 1.5rem;
-   text-align: left;
-   color: inherit;
-   text-decoration: none;
-   border: 1px solid #eaeaea;
-   border-radius: 10px;
-   transition: color 0.15s ease, border-color 0.15s ease;
-   max-width: 300px;
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
 }

 .card:hover,
 .card:focus,
 .card:active {
-   color: #0070f3;
-   border-color: #0070f3;
+  color: #0070f3;
+  border-color: #0070f3;
 }

 .card h2 {
-   margin: 0 0 1rem 0;
-   font-size: 1.5rem;
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
 }

 .card p {
-   margin: 0;
-   font-size: 1.25rem;
-   line-height: 1.5;
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
 }

 .logo {
-   height: 1em;
-   margin-left: 0.5rem;
+  height: 1em;
+  margin-left: 0.5rem;
 }

@media (max-width: 600px) {
-   .grid {
-      width: 100%;
-      flex-direction: column;
-   }
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
 }
--- a/frontend/styles/globals.css
+++ b/frontend/styles/globals.css
@ -1,34 +1,33 @@
 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;
+  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;
 }

 a {
-   color: inherit;
-   text-decoration: none;
+  color: inherit;
+  text-decoration: none;
 }

 * {
-   margin: 0;
-   padding:0;
-   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }

-section{
-   width:100vw;
-   min-height:100vh;
+section {
+  width: 100vw;
+  min-height: 100vh;
 }
-.flex-column{
-   display: flex;
-   flex-direction: column;
-   background-image: url("./../assets/bg/main-bg.png");
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  background-image: url("./../assets/bg/main-bg.png");
 }
-.main-bg{
-   background-image: url("./../assets/bg/main-bg.png");
+.main-bg {
+  background-image: url("./../assets/bg/main-bg.png");
 }
-
--- a/frontend/styles/logostyles.css
+++ b/frontend/styles/logostyles.css
@ -1,21 +1,19 @@
 /* This StyleSheet was prepared for the logo in the NavBar. 
 Please put any other style definitions inside globals.css or create a new stylesheet under styles folder */

-.logo{
-   width: 3rem;
-   position: relative;
-   top: 0.2rem;
+.logo {
+  width: 3rem;
+  position: relative;
+  top: 0.2rem;
 }

-
-.logo-text{
-   font-family: sans-serif;
-   font-weight: 700;
-   font-size: 2rem;
-   margin-left: 1rem;
-   margin-right: 3.5rem;
-   display: inline-block;
-   position: relative;
-   top: -0.7rem;
+.logo-text {
+  font-family: sans-serif;
+  font-weight: 700;
+  font-size: 2rem;
+  margin-left: 1rem;
+  margin-right: 3.5rem;
+  display: inline-block;
+  position: relative;
+  top: -0.7rem;
 }
-
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -260,19 +260,40 @@

 "@fortawesome/fontawesome-common-types@^0.3.0":
  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz#949995a05c0d8801be7e0a594f775f1dbaa0d893"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz"
  integrity sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w==

+"@fortawesome/fontawesome-svg-core@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz"
+  integrity sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
+
+"@fortawesome/free-brands-svg-icons@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.0.0.tgz"
+  integrity sha512-BIhsy2YeGuk8+KQwpqmyayQDWo1lvGMHsMIE+z5ApPRgV7T+zGhmNzYVoBT4IrJMC6ep5WpGrxoHX+IvNxHnkw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
+
+"@fortawesome/free-regular-svg-icons@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.0.0.tgz"
+  integrity sha512-lYK6oyQL8HwZUAVWGqF7TGuwQBVfphNBVTdvPSD3h4gmQfGazm/xcwg3kmtcRycu3y6QspOC7hPXSoJbVqSYCw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
+
 "@fortawesome/free-solid-svg-icons@^6.0.0":
  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.0.0.tgz#bed4a501b631c6cfa35c09830f7cb63ffca1589d"
+  resolved "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.0.0.tgz"
  integrity sha512-o4FZ1XbndcgeWNb8Wh0y+Hgf73CjmyOQowUSaqQCtgIIdS+XliSBSOwCl330wER+I6CGYE96hT27bHBPmzX2Gg==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.3.0"

 "@fortawesome/react-fontawesome@^0.1.17":
  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.17.tgz#06fc06cb1a721e38e5b50b4a1cb851e9b9c77d7a"
+  resolved "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.17.tgz"
  integrity sha512-dX43Z5IvMaW7fwzU8farosYjKNGfRb2HB/DgjVBHeJZ/NSnuuaujPPx0YOdcAq+n3mqn70tyCde2HM1mqbhiuw==
  dependencies:
    prop-types "^15.8.1"
@ -480,6 +501,13 @@ ansi-styles@^3.2.1:
  dependencies:
    color-convert "^1.9.0"

+axios@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.0.tgz#9a318f1c69ec108f8cd5f3c3d390366635e13928"
+  integrity sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 babel-plugin-macros@^2.6.1:
  version "2.8.0"
  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz"
@ -619,6 +647,11 @@ find-root@^1.1.0:
  resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==

+follow-redirects@^1.14.8:
+  version "1.14.8"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
+  integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
+
 function-bind@^1.1.1:
  version "1.1.1"
  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@ -705,7 +738,7 @@ ms@2.1.2:
  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==

-nanoid@^3.1.30:
+nanoid@^3.1.30, nanoid@^3.2.0:
  version "3.2.0"
  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz"
  integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
--- a/package-lock.json
+++ b/package-lock.json
@ -1,3 +0,0 @@
-{
-  "lockfileVersion": 1
-}