Merge branch 'main' into sidebar-fixed

2022-03-10 21:28:19 +05:30 · 2022-03-10 21:28:19 +05:30 · c9b5e0f18f
parent 47e2ebeb22 5657bf0641
commit c9b5e0f18f
30 changed files with 2141 additions and 5558 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@ -90,6 +90,33 @@
      "contributions": [
        "code"
      ]
+    },
+    {
+      "login": "Tejas-117",
+      "name": "Tejas",
+      "avatar_url": "https://avatars.githubusercontent.com/u/75026048?v=4",
+      "profile": "https://github.com/Tejas-117",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "omar-sherif9992",
+      "name": "Omar Sherif Ali",
+      "avatar_url": "https://avatars.githubusercontent.com/u/69806823?v=4",
+      "profile": "http://www.linkedin.com/in/omar-sherif-2152021a3",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "aadityasinha-dotcom",
+      "name": "Aaditya Sinha",
+      "avatar_url": "https://avatars.githubusercontent.com/u/75474786?v=4",
+      "profile": "https://github.com/aadityasinha-dotcom",
+      "contributions": [
+        "code"
+      ]
    }
  ],
  "contributorsPerLine": 7,
--- a/HOW_TO_CONTRIBUTE.md
+++ b/HOW_TO_CONTRIBUTE.md
@ -4,11 +4,11 @@ Hello 👋. We are glad to have you here.

 ## GIT AND GITHUB
 ***
-Before continuing we want to clarify the difference between Git and Github. Git is a version control system(VCS) which is a tool to manage the history of our Source Code. GitHub is a hosting service for Git projects.
+Before continuing we want to clarify the difference between Git and GitHub. Git is a version control system(VCS) which is a tool to manage the history of our Source Code. GitHub is a hosting service for Git projects.

-We assume you have created an account on Github and installed Git on your System.
+We assume you have created an account on GitHub and installed Git on your System.

-Now tell Git your name and E-mail (used on Github) address.
+Now tell Git your name and E-mail (used on GitHub) address.

 ``` $ git config --global user.name "YOUR NAME" ```
 ```$ git config --global user.email "YOUR EMAIL ADDRESS"```
@ -16,7 +16,7 @@ This is an important step to mark your commits to your name and email.

 ### FORK A PROJECT -
 ***
-You can use github explore - https://github.com/explore to find a project that interests you and match your skills. Once you find your cool project to workon, you can make a copy of project to your account. This process is called forking a project to your Github account. On Upper right side of project page on Github, you can see -
+You can use GitHub explore - https://github.com/explore to find a project that interests you and match your skills. Once you find your cool project to workon, you can make a copy of project to your account. This process is called forking a project to your GitHub account. On Upper right side of project page on GitHub, you can see -

 <p align="center">  <img  src="https://i.imgur.com/P0n6f97.png">  </p>
 Click on fork to create a copy of project to your account. This creates a separate copy for you to workon.
@ -29,14 +29,14 @@ Open Source projects always have something to workon and improves with each new

 ### CLONE THE FORKED PROJECT -
 ***
-You have forked the project you want to contribute to your github account. To get this project on your development machine we use clone command of git.
+You have forked the project you want to contribute to your GitHub account. To get this project on your development machine we use clone command of git.

 ```$ git clone https://github.com/<your-account-username>/<your-forked-project>.git```
 Now you have the project on your local machine.

 ### ADD A REMOTE (UPSTREAM) TO ORIGINAL PROJECT REPOSITORY 
 ***
-Remote means the remote location of project on Github. By cloning, we have a remote called origin which points to your forked repository. Now we will add a remote to the original repository from where we had forked.
+Remote means the remote location of project on GitHub. By cloning, we have a remote called origin which points to your forked repository. Now we will add a remote to the original repository from where we had forked.

 ```$ cd <your-forked-project-folder>```
 ```$ git remote add upstream https://github.com/<author-account-username>/<project>.git```
@ -49,7 +49,7 @@ Open Source projects have a number of contributors who can push code anytime. So
 ```$ git fetch upstream```
 ```$ git merge upstream/main```
 ```$ git push origin main```
-The last command pushes the latest code to your forked repository on Github. The origin is the remote pointing to your forked repository on github.
+The last command pushes the latest code to your forked repository on GitHub. The origin is the remote pointing to your forked repository on GitHub.

 ### CREATE A NEW BRANCH FOR A FEATURE OR BUGFIX -
 ***
@ -77,7 +77,7 @@ This will open an editor which will allow you to squash the commits.

 ### PUSH CODE AND CREATE A PULL REQUEST -
 ***
-Till this point you have a new branch with the feature or bugfix you want in the project you had forked. Now push your new branch to your remote fork on github.
+Till this point you have a new branch with the feature or bugfix you want in the project you had forked. Now push your new branch to your remote fork on GitHub.

 ```$ git push origin <feature-branch>```
 Now you are ready to help the project by opening a pull request means you now tell the project managers to add the feature or bugfix to original repository. You can open a pull request by clicking on green icon -
--- a/README.md
+++ b/README.md
@ -1,79 +1,135 @@
 <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-9-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" />
-  </a>
-  <a href="https://twitter.com/BRAVO68WEB" target="_blank">
-    <img alt="Twitter: BRAVO68WEB" src="https://img.shields.io/twitter/follow/BRAVO68WEB.svg?style=social" />
-  </a>
-</p>

-<br />
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/All_Contributors-12-orange.svg)](#-our-contributors)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+<a href="LICENSE" target="_blank">
+  <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
+</a>
+
+<a href="https://twitter.com/BRAVO68WEB" target="_blank">
+  <img alt="Twitter: BRAVO68WEB" src="https://img.shields.io/twitter/follow/BRAVO68WEB.svg?style=social" />
+</a>
+
+<br><br>

 <img src="https://user-images.githubusercontent.com/41448663/153746139-237f8e4d-be25-4f04-91ec-2bb3ff6f0e34.png" />

-<br />
+<br>

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

-[![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)
-![NextJS](https://img.shields.io/badge/nextjs-1.svg?style=for-the-badge&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiBBsIJyeUHDDBAAACFUlEQVRIx52VzWtTURDFf7kvKrW1qI2BxC5EEKRWqEg+RFykQvBvkEJFFBEU6t7iQkQS3JZmI0J3giLuRJTYLlwK0i5Sgg1BMaRFupBYNLXHRVrt+06cWd15nPNm7p05E8FtUU5wkRynSbAf+EGDRcq8pcomIWaRoUSNNnJ4mxolMlhB8CRFVl3Q3b5KkaQfPMUCW4FwIbZYIOUFz7EcCt7xZXJOeJpK13AhKqTttc/3BBdi/t9dGAo9w4UoYDoEWZr/RdAkCwaLSeK764lwiKEd8m0bZIK8I0acSSwYoWZnjuuVPuiCLZbSd73XAWcONUYM4wzbiQc4xRnuEbM1qEWUiPPthhk35Ih6t8UNN8A9NTnDqDse4Rcb3OZ8GAGMGhJeBA1KDDHN4TCChKHfKy6e8JI818MI+o13PMI696kzxbkQBkPLOwPDRwrEmOZgEL5laPh/neM5l7gGfGPN+00ahiWvAoSAFg9Y4Q5pqszQ9iJYMpSDdG6RhxzhLoM85rVbzTYpe7TycX3Vio5un/o0p9+aEoppr0crg8WsPXxMX1RV4u/5pCr6rLNe8zjbScoxzn26ognb3y6rpRfuUWqS3XnKEEHZo0f6qVu+gtKFpMX1RnWN+UgadCGqKdX1TAM+ogpdyPpVreumr6xD6GLZpxl90pjvYuncReBqS+rd2tMiyaD1GLJc8xlFNxxt77ae1vsfiXkPp1Pd4OwAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDQtMjdUMDg6Mzk6MzkrMDI6MDCNfQiCAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTA0LTI3VDA4OjM5OjM5KzAyOjAw/CCwPgAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==&color=grey)
+#### ➡️ Link: https://minfy.xyz

-## Getting Started
+#### What is URL MiniFy?
+A URL shortener build with Nextjs, ExpressJS, MongoDB

-Read here :- [How to Contribute](HOW_TO_CONTRIBUTE.md)
+#### Technologies Used:
+<img src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white&color=green"> <img src="https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white&color=grey"> <img src="https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white"> <img src="https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white">

-## Install
+<br>

-```sh
-# Installing Frontend
-cd frontend && npm install
+## 🎯 Getting Started

-# Installing Backend
-cd backend && npm install
-```
+#### How to Contribute?

-## Usage
+Contributions, issues and feature requests are welcome! Feel free to check the [issues page](https://github.com/BRAVO68WEB/url-minify/issues).

-```sh
-# Running Frondend
-npm run start
+- Read the full guide here: [Contributing Guide](CONTRIBUTING.md)
+- Detailed document on how to contribute: [How to Contribute](HOW_TO_CONTRIBUTE.md)

-# Running Backend
-npm run start
-```
+### ✒️ Summary

-## Author
+1. Fork this repository on GitHub.

-👤 **BRAVO68WEB**
+2. Clone the forked repository in your computer.
+
+    `$ git clone https://github.com/<your-username>/url-minify.git`
+    
+    `$ cd url-minify`
+
+3. Add a remote (upstream) to the original project repository
+
+    `$ git remote add upstream https://github.com/BRAVO68WEB/url-minify.git`
+    
+    `$ git fetch upstream`
+    
+    `$ git checkout main`
+    
+    `$ git merge upstream/main`
+
+    This makes your fork up to date with the original project repo.
+
+#### Installation and Usage 
+
+4. Go the folder where you want to contribute:
+
+    `$ cd frontend` OR `cd backend`
+
+5. Install the dependencies and run the development server using:
+
+    `$ npm install`
+    
+    `$ npm run start`
+
+#### We can start making changes now! 🥳
+
+6. Make your changes. Then, stage and commit them using:
+
+    `$ git add .`
+    
+    `$ git commit -m "This is a commit message"`
+    
+7. Push your changes to your forked repository.
+
+    `$ git push -u origin main`
+
+8. Go to your forked repository on GitHub. Create a pull request from the `🔃Contribute` button provided there.
+    
+    <img height="200px" src="https://user-images.githubusercontent.com/59930625/157313470-71a2e194-17e5-4cd4-9949-ecfedc200c15.png">
+    
+    Contribute -> Open pull request -> Create pull request. (Make sure you write a detailed description of the changes you have made.)
+
+#### And you're done! 🤩🤩
+
+<br>
+
+## 😊 Author
+
+**BRAVO68WEB**

 - Website: https://bravo68web.me
 - Twitter: [@BRAVO68WEB](https://twitter.com/BRAVO68WEB)
- Github: [@BRAVO68WEB](https://github.com/BRAVO68WEB)
+- GitHub: [@BRAVO68WEB](https://github.com/BRAVO68WEB)
 - LinkedIn: [@BRAVO68WEB](https://linkedin.com/in/BRAVO68WEB)

-## Participations
+<br>

-### Current
+## 🎡 Participations

- JWOC (https://jwoc.tech) <br> <img src="https://jwoc.tech/assets/img/opengraph.png" height=75px/>
- GSSoC (https://gssoc.girlscript.tech/) <br> <img src="https://raw.githubusercontent.com/GSSoC-Web/gssoc-assets/main/Logos/GS_logo_White.png" height=75px/>
+#### Current:

-### Past
+<table>
+  <tr>
+    <td align="center" width="50%">
+      <img height="72px" src="https://user-images.githubusercontent.com/59930625/157309089-bb24d8d3-cf2a-4ac3-aae2-6774051056b9.png">
+      <br>
+      <sub><b>GSSoC (https://gssoc.girlscript.tech/)</b></sub>
+    </td>
+    <td align="center" width="50%">
+      <img height="72px" src="https://jwoc.tech/assets/img/opengraph.png">
+      <br>
+      <sub><b>JWOC (https://jwoc.tech/)</b></sub>
+    </td>
+  </tr>
+</table>

- None
+<br>

-## 🤝 Contributing
+## ✨ Our Contributors

-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)):
+Thanks goes to these wonderful people:

 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
@ -91,6 +147,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <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>
    <td align="center"><a href="https://github.com/himanshusanecha"><img src="https://avatars.githubusercontent.com/u/52252631?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Himanshu Sanecha</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=himanshusanecha" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Tejas-117"><img src="https://avatars.githubusercontent.com/u/75026048?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Tejas</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=Tejas-117" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.linkedin.com/in/omar-sherif-2152021a3"><img src="https://avatars.githubusercontent.com/u/69806823?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Omar Sherif Ali</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=omar-sherif9992" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/aadityasinha-dotcom"><img src="https://avatars.githubusercontent.com/u/75474786?v=4?s=55" width="55px;" alt=""/><br /><sub><b>Aaditya Sinha</b></sub></a><br /><a href="https://github.com/BRAVO68WEB/url-minify/commits?author=aadityasinha-dotcom" title="Code">💻</a></td>
  </tr>
 </table>

@ -99,13 +158,24 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d

 <!-- ALL-CONTRIBUTORS-LIST:END -->

-## Show your support
+<br>

-Give a ⭐️ if this project helped you!
+### 😽 Show your support

-## 📝 License
+Star the repository if this project helped you! ⭐️
+
+### 🤝 Contributing
+
+Contributions, issues and feature requests are welcome! 
+
+- Feel free to check the [issues page](https://github.com/BRAVO68WEB/url-minify/issues).
+- Read the full guide here: [Contributing Guide](CONTRIBUTING.md)
+- Detailed document on how to contribute: [How to Contribute](HOW_TO_CONTRIBUTE.md)
+
+### 📝 License
+
+Copyright © 2022 [BRAVO68WEB](https://github.com/BRAVO68WEB).

-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/.gitignore
+++ b/backend/.gitignore
@ -1,3 +1,5 @@
 node_modules/
-package-lock.json
 .env
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
--- a/backend/index.js
+++ b/backend/index.js
@ -10,7 +10,10 @@ require('dotenv').config()
 const app = express()

 app.use(express.json())
-app.use(cors())
+app.use(cors({
+   origin: 'http://localhost:3000'
+}));
+
 app.use(json())
 app.use(
   urlencoded({
--- a/backend/pnpm-lock.yaml
+++ b/backend/pnpm-lock.yaml
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -32,3 +32,6 @@ yarn-error.log*

 # vercel
 .vercel
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
--- a/frontend/components/Dashboard/Dashboard.jsx
+++ b/frontend/components/Dashboard/Dashboard.jsx
@ -1,7 +1,9 @@
-import { useState } from 'react'
-import DashboardStyle from './Dashboard.style'
-import Card from './Card'
-import dynamic from 'next/dynamic'
+import {useState} from "react";
+import DashboardStyle from "./Dashboard.style";
+import Card from "./Card";
+import dynamic from 'next/dynamic';
+import * as ReactBootStrap from "react-bootstrap";
+import Link from 'next/link'
 import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 import CloseIcon from '@mui/icons-material/Close'
 import { Close } from '@mui/icons-material'
@ -172,6 +174,7 @@ function Graph() {
          </div>
          <div className="title">Total Views</div>
        </div>
+
      </div>
    </div>
  )
--- a/frontend/components/Dashboard/Dashboard.style.js
+++ b/frontend/components/Dashboard/Dashboard.style.js
@ -22,48 +22,43 @@ export default styled.div`
    height: 100%;
    color: white !important;
    transition: all 0.25s;
-
+    
    @media (max-width: 1100px) {
      left: -300px;
      position: absolute;
      z-index: 100;
    }
-
+    
    /* for small screens */
    @media (max-width: 300px) {
      width: 100vw;
    }
-
+    
    .brand-name {
      margin-top: 40px;
      padding-left: 20px;
      text-align: center;
    }
-
    .profile {
      margin: 25px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
-
      .profile-image {
        max-width: 35%;
        margin: auto;
        border-radius: 100%;
-
        img {
          max-width: 100%;
          border-radius: 100%;
        }
      }
-
      .name {
        font-size: 1.2rem;
        font-weight: bold;
        margin: 3px 0;
      }
-
      .profession {
        color: gray;
        font-size: 0.8rem;
@ -71,11 +66,9 @@ export default styled.div`
        margin: 0;
      }
    }
-
    .creatButton {
      margin: 40px auto 80px;
      width: 70%;
-
      button {
        width: 100%;
        color: white;
@ -102,11 +95,9 @@ export default styled.div`
      }
    }
  }
-
  .nav-buttons {
    .nav-item {
      margin: 0;
-
      button {
        width: 100%;
        background-color: transparent;
@ -117,7 +108,6 @@ export default styled.div`
        margin: 0;
        padding: 10px 10px 10px 20px;
        text-align: left;
-
        :hover {
          background-color: #07344a;
          color: #43bfd6;
@ -210,7 +200,7 @@ export default styled.div`
    text-align: center;
    margin-top: 10px;
    position: relative;
-
+    
    .hamburger_icon {
      position: absolute;
      top: 0;
@ -232,18 +222,17 @@ export default styled.div`
      align-items: center;
      justify-content: space-evenly;
      overflow-x: auto;
-
+      
      @media (max-width: 800px) {
        flex-direction: column;
      }
    }
  }
-
+  
  .column {
    flex: 30%;
    height: 250px;
  }
-
  .list2 {
    margin-bottom: 10px;
    list-style-type: none;
--- a/frontend/components/Dashboard/myLink.jsx
+++ b/frontend/components/Dashboard/myLink.jsx
@ -0,0 +1,118 @@
+import {useState} from "react";
+import DashboardStyle from "./myLink.style";
+import Card from "./Card";
+import dynamic from 'next/dynamic';
+import * as ReactBootStrap from "react-bootstrap";
+import Link from 'next/link'
+
+const Chart = dynamic(() => import('react-apexcharts'), {ssr: false});
+
+function Sidebar1() {
+    return (<div className="sidebar">
+        <ul>
+            <div className="nav-item mb-2 brand-name"><h1>Brand Name</h1></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>
+                        <Link href="./dashboard">Overview</Link>
+                    </button>
+                </div>
+                <div className="nav-item">
+                    <button>
+                        <Link href="./myLinks">My Links</Link>
+                    </button>
+                </div>
+                <div className="nav-item">
+                    <button>
+                        Extras
+                    </button>
+                </div>
+            </li>
+        </ul>
+    </div>)
+}
+
+function Sidebar3() {
+    return (
+        <div className="sidebar3">
+            <div className="container">
+                <h1 className="dash">My Links</h1>
+                <div className="bar">
+                    <div className="row1">
+                            <div className="srNo">
+                                Sr No.    
+                            </div>
+                            <div className="URL">
+                                URL   
+                            </div>
+                            <div className="Alias">
+                                Alias    
+                            </div>
+                            <div className="Status">
+                                Status   
+                            </div>
+                            <div className="Views">
+                                Views   
+                            </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function Table() {
+    const data = [
+        {url:"https://www.facebook.com", alias:"silver", status:"yes", views: "2M"},
+        {url:"https://www.google.com", alias:"silver", status:"yes", views: "2M"},
+        {url:"https://www.amazon.com", alias:"silver", status:"yes", views: "2M"},
+        {url: "https://www.netflix.com", alias:"silver", status:"yes", views: "2M"}
+    ]
+
+    const renderData = (data, index) => {
+        return (
+            <tr key={index}>
+                <div className="trow">
+                    <div className="row2">
+                        <td className="tname">{index+1}</td>
+                        <td className="tage">{data.url}</td>
+                        <td className="talias">{data.alias}</td>
+                        <td className="tstatus">{data.status}</td>
+                        <td className="tviews">{data.views}</td>
+                    </div>
+                </div>
+            </tr>
+        )
+    }
+    return (
+        <div>
+            <ReactBootStrap.Table striped bordered hover>
+                <tbody>
+                    {data.map(renderData)}
+                </tbody>
+            </ReactBootStrap.Table>
+        </div>
+    )
+}
+
+function App() {
+    return (<DashboardStyle>
+        <Sidebar1/>
+        <div className="main">
+            <Sidebar3/>
+            <Table />
+        </div>
+    </DashboardStyle>);
+}
+
+export default App;
--- a/frontend/components/Dashboard/myLink.style.js
+++ b/frontend/components/Dashboard/myLink.style.js
@ -0,0 +1,246 @@
+import styled from "styled-components"
+
+
+export default styled.div`
+  
+  display:flex;
+  height:100vh;
+  .sidebar {
+    padding-top:60px;
+    background-color: #00253A;
+    float: left;
+    width: 20%;
+    min-width:300px;
+    height: 100%;
+    color: white !important;
+    
+
+    .brand-name {
+      margin-top: 40px;
+      padding-left: 20px;
+    }
+
+    .profile {
+      margin: 25px 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .profile-image {
+        max-width: 35%;
+        margin: auto;
+        border-radius: 100%;
+
+        img {
+          max-width: 100%;
+          border-radius: 100%;
+        }
+      }
+
+      .name {
+        font-size: 1.2rem;
+        font-weight: bold;
+        margin: 3px 0;
+      }
+
+      .profession {
+        color: gray;
+        font-size: 0.8rem;
+        font-weight: bold;
+        margin: 0;
+      }
+    }
+
+    .creatButton {
+
+      margin: 40px auto 80px;
+      width: 70%;
+
+      button {
+        width: 100%;
+        color: white;
+        font-weight: bold;
+        font-size: 1rem;
+        padding: 10px;
+        background-color: blueviolet;
+        outline: none;
+        border: none;
+        border-radius: 5px;
+      }
+    }
+  }
+
+  .nav-buttons {
+    .nav-item {
+      margin: 0;
+      button {
+        width: 100%;
+        background-color: transparent;
+        border: none;
+        outline: none;
+        color: white;
+        font-size: 1.1rem;
+        margin: 0;
+        padding: 10px 10px 10px 90px;
+        text-align: left;
+        cursor: pointer;
+        display: flex;
+
+        :hover {
+          background-color: #07344A;
+          color: #43BFD6;
+          border-left: 5px solid #43BFD6;
+        }
+      }
+    }
+  }
+
+  .main{
+    padding-top:60px;
+    flex:1;
+    display:flex;
+    flex-direction:column;
+    .row2{
+      flex:1;
+      display:flex;
+      width:100%;
+      align-items:center;
+      padding:5%;
+      padding-top:10px;
+      box-sizing:border-box;
+      justify-content:space-between;
+      .graph{
+        border-radius:10px;
+        border:3px solid #E1E1E1;
+        height:100%;
+        padding:15px;
+        width:68%;
+        min-width:400px;
+      }
+      .versions{
+        border-radius:10px;
+        border:3px solid #E1E1E1;
+        height:100%;
+        padding:15px;
+        width:30%;
+        min-width:300px;
+        .version{
+          display:flex;
+          margin-bottom:10px;
+          .icon{
+            width:40%;
+            padding:5px;
+            .box{
+              height:64px;
+              width:64px;
+              border-radius:100px;
+              display:flex;
+              justify-content:center;
+              align-items:center;
+              font-size:1.2rem;
+            }
+          }
+          .title{
+            width:60%;
+            font-size:1.5rem;
+            font-weight:500;
+            display:flex;
+            align-items:center;
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar3 {
+    text-align: center;
+    margin-top:10px;
+    padding-left:5%;
+    padding-top:2%;
+    .dash {
+      text-align: left;
+      margin-bottom: 40px;
+    }
+    .bar {
+      padding-bottom: 2%;
+    }
+    .row1 {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 50px;
+      padding-right: 80px;
+      padding-left: 20px;
+      background: #c0c0c0;
+      max-width: 970px;
+    }
+    .srNo {
+      margin-right: 10px;
+    }
+    .URL {
+      padding-right: 380px;
+      margin-right: 164px;
+    }
+    .Alias {
+      margin-right: 94px;
+      margin-left: -14px;
+    }
+    .Status {
+      margin-right: -24px;
+    }
+    .Views {
+      margin-left: 34px;
+      margin-right: -54px;
+    }
+  }
+
+  .table {
+    text-align: center;
+    margin-top: -15px;
+    padding-left: 5%;
+    .row2 {
+      padding-top: 5%;
+      height: 1px;
+      border-bottom: 1px solid gray;
+      display: flex;
+      justify-content: space-between;
+      padding-left: 20px;
+      position: relative;
+      .tname {
+        padding-left: 1%;
+        width: 25px;
+      }
+      .tage {
+        padding-left: 5%;
+        text-align: left;
+        text-decoration: underline;
+        width: 665px;
+      }
+      .talias {
+        padding-left: 1%;
+        width: 158px;
+        text-align: left;
+      }
+      .tstatus {
+        padding-left: 3%;
+        width: 85px;
+        text-align: left;
+      }
+      .tviews {
+        padding-left: 1%;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .column {
+    flex: 30%;
+    height: 250px;
+  }
+
+  .list2 {
+    margin-bottom: 10px;
+    list-style-type: none;
+  }
+`
--- a/frontend/components/HomeSection/HomeSection.jsx
+++ b/frontend/components/HomeSection/HomeSection.jsx
@ -1,15 +1,52 @@
 import React, { useState } from 'react'
 import HomeSectionStyle from './HomeSection.style'
 import Link from 'next/link'
+import { motion } from 'framer-motion'
 import Image from 'next/image'
 import Axios from 'helpers/Axios'
 import { Alert, Button, Collapse, IconButton } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import QRCode from 'qrcode'
+import { signup } from '@pages/signup'
 import NotFound from '@pages/404'
 import styles from '../../styles/HomeSection.module.css'

+const spanVariants = {
+  visible: { y: 0, scaleY: 1 },
+  hover: {
+    y: [-1, -2, -2.8, 0.9, 0],
+    scaleY: [1, 1.3, 0.8, 1.2, 1],
+    color: '#4A1C40'
+  }
+}
+const list = {
+  hidden: {
+    opacity: 0,
+    transition: {
+      when: 'afterChildren'
+    }
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      when: 'beforeChildren',
+      staggerChildren: 0.3
+    }
+  }
+}
+
+const effect = {
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+    y: [-1, -1.9, -2.7, 1],
+    scaleY: [1, 1.3, 0.8, 1]
+  }
+}
+
 const QR = {
  marginTop: '1.8em',
 }
@ -22,6 +59,7 @@ function HomeSection(props) {


  const setMinfy = async () => {
+    props.setLongUrl('')
    setOpen(false)
    setDisabled(true)
    let res
@ -59,12 +97,33 @@ function HomeSection(props) {
    }
  }

+  const text1 = "Url";
+  const text2 = "MiniFy";
+
+
  return (
    <HomeSectionStyle>
      <div className="content">
-        <h1 className={styles.title}>URL MINIFY</h1>
+        <motion.span style={{ display: 'flex' }} variants={list} initial="hidden" animate="visible">
+          <div style={{ display: 'flex', marginBottom: '20px' }}>
+            {text1.split("").map((Letter, id) => (
+              <motion.div variants={effect}>
+                <span className={styles.head} key={id}>
+                  <motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
+                </span></motion.div>
+            ))}
+            &nbsp;&nbsp;&nbsp;&nbsp;
+          </div>
+          <div style={{ display: 'flex' }}>
+            {text2.split("").map((Letter, id) => (
+              <motion.div variants={effect}><span className={styles.head} key={id}>
+                <motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
+              </span></motion.div>
+            ))}
+          </div>
+        </motion.span>
+        <motion.div initial={{ x: '-100vw', opacity: 0 }} animate={{ x: 0, opacity: 1, transition: { delay: 3, type: 'spring', stiffness: 150 } }} className={styles.searchBox}>

-        <div className={styles.searchBox}>
          <input
            className={styles.search}
            placeholder="Enter the url to be minified......"
@ -77,22 +136,24 @@ function HomeSection(props) {
            variant={'contained'}
            disabled={disabled}
            className={styles.btn}
+            component={motion.div}
+            whileHover={{ scale: 1.15 }}
            id="minify"
            onClick={setMinfy}
          >
            MINIFY
          </Button>
-        </div>
+        </motion.div>

-        <div className={styles.info}>
-          <h3>
+        <div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
+          <motion.h3 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0, transition: { delay: 3.4, duration: 0.4 } }}>
            Need more advanced features? |{' '}
            <Link href="/signup">
-              <span style={{ textDecoration: 'underline' }}>
-                Create an account
+              <span style={{ textDecoration: 'underline', cursor: 'pointer' }} >
+                <a href={signup}>Create an account</a>
              </span>
            </Link>
-          </h3>
+          </motion.h3>
        </div>

        {
@ -112,10 +173,10 @@ function HomeSection(props) {
          )
        }
      </div>
-      
+
      <Collapse in={open}>
        <Alert
-        className={styles.showUrl}
+          className={styles.showUrl}
          action={
            <IconButton
              aria-label="close"
@ -139,7 +200,6 @@ function HomeSection(props) {
          </IconButton>
        </Alert>
      </Collapse>
-
    </HomeSectionStyle>
  )
 }
--- a/frontend/components/HomeSection/HomeSection.style.js
+++ b/frontend/components/HomeSection/HomeSection.style.js
@ -10,5 +10,7 @@ export default styled.section`
    justify-content: center;
    align-items: center;
    flex-direction: column;
+    .title{display: flex;
+    margin-bottom:0.5rem;}
  }
 `
--- a/frontend/components/NavBar/Logo.js
+++ b/frontend/components/NavBar/Logo.js
@ -1,26 +1,47 @@
 import React from 'react'
+import { motion } from 'framer-motion'
+
+const pathvariant = {
+  initial: { pathLength: 0, opacity: 0 },
+  animate: { pathLength: 1, opacity: 1, transition: { duration: 1.5, yoyo: Infinity, ease: 'easeInOut' } }
+}
+

 export default function Logo() {
  return (
    <div className="logo-wrapper">
-      <svg
-        className="logo"
+      <motion.svg
+        initial={{ rotate: -180 }}
+        animate={{ rotate: 0 }}
+        class="logo"
        data-name="Layer 4"
        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 53.4 53.31"
+        viewBox="0 0 65 65"
      >
-        <path
+        <motion.path
+          variants={pathvariant}
+          animate="animate"
+          initial="initial"
          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"
+          stroke="white"
+          stroke-linecap="round"
+          strokeWidth="3"
+          fill="none"
        />
-        <path
+        <motion.path
+          variants={pathvariant}
+          animate="animate"
+          initial="initial"
          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"
+          stroke="white"
+          strokeWidth="3"
+          stroke-linecap="round"
+          fill="none"
        />
-      </svg>
-      <p className="logo-text">URL MINIFY</p>
+      </motion.svg>
    </div>
  )
 }
+
--- a/frontend/components/NavBar/index.js
+++ b/frontend/components/NavBar/index.js
@ -1,4 +1,5 @@
 import React, { useContext } from 'react'
+import { motion } from 'framer-motion'
 import {
  Avatar,
  Box,
@ -49,8 +50,9 @@ function Index(props) {
    >
      <Container maxWidth="xl">
        <Toolbar disableGutters="false">
-          <Typography variant="h4" sx={{ fontWeight: 'bold' }}>
-            URL MINIFY
+          <span><Logo /></span>
+          <Typography component={motion.div} initial={{ y: -50, opacity: 0 }} animate={{ y: 0, opacity: 1, transition: { delay: 1 } }} variant="h5" sx={{ fontWeight: 'bold', fontFamily: "'Montserrat Alternates', sans-serif;" }}>
+            UrlMiniFy
          </Typography>
          <Box
            sx={{
@ -60,7 +62,7 @@ function Index(props) {
            }}
          >
            <IconButton
-              size="large"
+              size="medium"
              aria-label="account of current user"
              aria-controls="menu-appbar"
              aria-haspopup="true"
@ -92,15 +94,15 @@ function Index(props) {
                  href="https://github.com/BRAVO68WEB/url-minify"
                  target={'_blank'}
                >
-                  <Typography textAlign="center" sx={{ display: 'flex' }}>
-                    <GitHubIcon fontSize="small" />
+                  <Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
+                    <GitHubIcon fontSize="medium" />
                    GitHub
                  </Typography>
                </a>
              </MenuItem>
              <MenuItem onClick={handleCloseNavMenu}>
-                <a href="NotFound">
-                  <Typography textAlign="center" sx={{ display: 'flex' }}>
+                <a href={NotFound}>
+                  <Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
                    CREDITS
                  </Typography>
                </a>
@ -127,24 +129,33 @@ function Index(props) {
                  color: 'white',
                  display: 'flex',
                  gap: '10px',
-                  fontSize: 'h5.fontSize',
-                  fontFamily: 'sans-serif',
-                  fontStyle: 'bold',
+                  fontSize: 'h6.fontSize',
+                  fontFamily: "'Open Sans', sans-serif;",
                  textTransform: 'capitalize',
                  fontWeight: 'bold',
                }}
+                component={motion.div}
+                initial={{ y: -50, opacity: 0 }}
+                animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
+                whileHover={{ scale: 1.1, textShadow: '2px 2px black' }}
              >
-                <GitHubIcon fontSize="large" />
+                <GitHubIcon fontSize="medium" />
                GitHub
              </Button>
            </a>
-            <a href="NotFound">
+            <a href={NotFound}>
              <Button
+                component={motion.div}
+                initial={{ y: -50, opacity: 0 }}
+                animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
+                whileHover={{ scale: 1.1, textShadow: '2px 2px black' }}
                onClick={handleCloseNavMenu}
                sx={{
                  color: 'white',
                  display: 'block',
-                  fontSize: 'h5.fontSize',
+                  fontSize: 'h6.fontSize',
+                  fontFamily: "'Open Sans', sans-serif;",
+                  fontWeight: 'bold',
                }}
              >
                CREDITS
@ -187,7 +198,16 @@ function Index(props) {
              </Menu>
            </Box>
          ) : (
-            <Typography onClick={login}>
+            <Typography sx={{
+              color: 'white',
+              display: 'flex',
+              fontSize: 'h6.fontSize',
+              fontFamily: "'Open Sans', sans-serif;",
+              fontWeight: 'bold',
+            }} component={motion.div}
+              initial={{ y: -50, opacity: 0 }}
+              animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
+              whileHover={{ scale: 1.1, textShadow: '2px 2px black' }} onClick={login}>
              <Link href="./login">LOGIN</Link>
            </Typography>
          )}
--- a/frontend/components/Reg/Reg.jsx
+++ b/frontend/components/Reg/Reg.jsx
@ -2,13 +2,10 @@ import React from 'react'
 import RegStyle from './Reg.style'
 import Image from 'next/image'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faUser,
-  faEnvelope,
-  faLock,
-} from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
+import { faUser, faEnvelope, faLock } from '@fortawesome/free-solid-svg-icons'
+import { useState, useContext } from 'react'
 import { Link } from '@mui/material'
+import UserAuth from 'helpers/user/usercontext'

 function Reg() {
  const [userData, setUserData] = useState({
@ -23,10 +20,15 @@ function Reg() {
    const value = event.target.value
    setUserData({ ...userData, [name]: value })
  }
-
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    setUserData(userData)
+    context.createAcc(userData)
+  }
+  const context = useContext(UserAuth);
  return (
    <RegStyle>
-      <form className="form-wrapper">
+      <form onSubmit={handleSubmit} className="form-wrapper">
        <p className="reg-title">Sign Up</p>

        <div className="reg-field">
--- a/frontend/helpers/user/userState.js
+++ b/frontend/helpers/user/userState.js
@ -0,0 +1,30 @@
+import UserAuth from "./usercontext"
+import { useState } from 'react'
+import axios from "axios"
+
+const UserAuthProvider = ({ children }) => {
+    const [user, setUser] = useState(null)
+    const login = () => {
+        setUser('default')
+    }
+    const createAcc = (data) => {
+        axios.post('http://localhost:5000/user/register/', {
+            email: data.email,
+            password: data.password,
+          })
+          .then(function (response) {
+            console.log(response);
+          })
+          .catch(function (error) {
+            console.log(error);
+          });
+    }
+
+    const logout = () => {
+        setUser(null)
+    }
+    const context = { user, login, logout, createAcc }
+
+    return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>
+}
+export default UserAuthProvider;
--- a/frontend/helpers/user/usercontext.js
+++ b/frontend/helpers/user/usercontext.js
@ -1,24 +1,5 @@
-import { createContext } from 'react'
-import { useState } from 'react'
+import { createContext } from "react";

-const UserAuth = createContext({
-  user: null,
-  login: () => {},
-  logout: () => {},
-})
+const UserAuth = createContext();

-export const UserAuthProvider = ({ children }) => {
-  const [user, setUser] = useState(null)
-  const login = () => {
-    setUser('default')
-  }
-
-  const logout = () => {
-    setUser(null)
-  }
-  const context = { user, login, logout }
-
-  return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>
-}
-
-export default UserAuth
+export default UserAuth;
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -21,12 +21,17 @@
    "@next/env": "^12.1.0",
    "apexcharts": "^3.33.1",
    "axios": "^0.26.0",
+    "bootstrap": "^5.1.3",
+    "framer-motion": "^6.2.8",
+    "cors": "^2.8.5",
    "nanoid": "^3.2.0",
    "next": "12.0.9",
    "qrcode": "^1.5.0",
    "react": "17.0.2",
    "react-apexcharts": "^1.3.9",
+    "react-bootstrap": "^2.2.0",
    "react-dom": "17.0.2",
+    "react-page-loading": "^1.0.2",
    "styled-components": "^5.3.3",
    "styled-jsx": "^5.0.0"
  },
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@ -3,12 +3,18 @@ import '../styles/logostyles.css'
 import '../styles/formStyles.css'
 import '../styles/index.css'
 import '../styles/404.css'
-import { UserAuthProvider } from '../helpers/user/usercontext'
+import UserAuthProvider from 'helpers/user/userState'
+import Page from 'react-page-loading'
+

 function MyApp({ Component, pageProps }) {
  return (
    <UserAuthProvider>
-      <Component {...pageProps} />
+      <Page loader={"bar"} color={"#03b1fc"} size={10} >
+        <Component {...pageProps} />
+
+      </Page>
+
    </UserAuthProvider>
  )
 }
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@ -15,6 +15,9 @@ export default function Home() {
      <Head>
        <title>URL MiniFy</title>
        <link rel="icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Montserrat+Alternates:wght@500&family=Open+Sans:wght@300&display=swap" rel="stylesheet" />
      </Head>

      <main className={'main-bg'}>
--- a/frontend/pages/login.js
+++ b/frontend/pages/login.js
@ -1,5 +1,4 @@
-import { useState } from 'react'
-import Head from 'next/head'
+import React from 'react'
 import NavBar from 'components/NavBar'
 import Features from 'components/Features'
 import Login from 'components/Login/Login'
--- a/frontend/pages/myLinks/index.js
+++ b/frontend/pages/myLinks/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/myLink'
+
+function Index() {
+  return (
+    <div className={''}>
+      <Head>
+        <title>Dashboard</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main>
+        <NavBar />
+        <Dashboard />
+      </main>
+    </div>
+  )
+}
+
+export default Index
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/styles/HomeSection.module.css
+++ b/frontend/styles/HomeSection.module.css
@ -1,18 +1,22 @@
-.title {
+.head {
+  font-family: 'Montserrat Alternates', sans-serif;
+  color: #fff;
+  margin-bottom: 30px;
+  text-shadow: 3px 2px 1px black;
  line-height: 1.15;
  font-size: 5.5rem;
  font-weight: bold;
-  color: white;
  margin-bottom: 30px;
  text-align: center;
 }

-.searchBox{
+.searchBox {
  position: relative;
 }

-.search{
-  font-size: 1.5rem;
+.search {
+  font-family: 'Montserrat Alternates', sans-serif;
+  font-size: 1.3rem;
  border-radius: 50px;
  padding: 1rem;
  width: 500px;
@ -22,7 +26,7 @@
  margin-bottom: 15px;
 }

-.btn{
+.btn {
  font-weight: bold !important;
  position: absolute !important;
  align-items: center !important;
@ -31,40 +35,40 @@
  height: 40px;
  width: 100px;
  border-radius: 50px !important  ;
-} 
+}

-.info{
+.info {
  color: #fff;
  text-align: center;
 }

-.showUrl{
+.showUrl {
  margin-top: 1rem;
 }

@media (max-width: 600px) {
-  .title{
-      font-size: clamp(1rem, 15vw, 4rem);
+  .letter {
+    font-size: clamp(1rem, 15vw, 4rem);
  }

-  .search{
+  .search {
    width: 90vw;
    font-size: 1.2rem;
  }
-
-  .showUrl{
+  
+  .showUrl {
    width: 90vw;
  }
 }

@media (max-width: 400px) {
-  .btn{
+  .btn {
    top: 100%;
    width: 90vw;
    font-size: 1.5rem;
  }

-  .info{
+  .info {
    margin-top: 50px;
    width: 90vw;
    font-size: 1rem;
--- a/frontend/styles/globals.css
+++ b/frontend/styles/globals.css
@ -6,6 +6,7 @@ body {
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  overflow-y: auto;
 }

 a {
@ -37,3 +38,14 @@ section {
  background-position: center;
  background-size: cover;
 }
+body::-webkit-scrollbar {
+  width: 10px;
+  z-index: 100;
+  background-color: white;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: rgb(61, 61, 61);
+  border-width: 2px 0 2px;
+  border-radius: 10px;
+}
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -100,10 +100,11 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.16.7"

-"@babel/runtime@^7.13.10", "@babel/runtime@^7.16.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
-  "integrity" "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ=="
-  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz"
-  "version" "7.16.7"
+
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.13.16", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+  "integrity" "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw=="
+  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz"
+  "version" "7.17.2"
  dependencies:
    "regenerator-runtime" "^0.13.4"

@ -174,7 +175,9 @@
  "resolved" "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
  "version" "0.8.0"

-"@emotion/is-prop-valid@^0.8.8":
+
+"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
+
  "integrity" "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA=="
  "resolved" "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
  "version" "0.8.8"
@ -401,21 +404,51 @@
  "resolved" "https://registry.npmjs.org/@next/env/-/env-12.0.9.tgz"
  "version" "12.0.9"

-"@next/swc-linux-x64-gnu@12.0.9":
-  "integrity" "sha512-bJZ9bkMkQzsY+UyWezEZ77GWQ4TzwKeXdayX3U3+aEkL8k5C6eKBXlidWdrhu0teLmaUXIyWerWrLnJzwGXdfw=="
-  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.9.tgz"
+"@next/swc-win32-x64-msvc@12.0.9":
+  "integrity" "sha512-1c/sxp/4Qz4F6rCxiYqAnrmghCOFt5hHZ9Kd+rXFW5Mqev4C4XDOUMHdBH55HgnJZqngYhOE0r/XNkCtsIojig=="
+  "resolved" "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.9.tgz"
  "version" "12.0.9"

-"@next/swc-linux-x64-musl@12.0.9":
-  "integrity" "sha512-SR9p0R+v1T32DTXPVAXZw31pmJAkSDotC6Afy+mfC0xrEL3pp95R8sGXYAAUCEPkQp0MEeUOVy2LrToe92X7hQ=="
-  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.9.tgz"
-  "version" "12.0.9"
-
-"@popperjs/core@^2.4.4":
+"@popperjs/core@^2.10.1", "@popperjs/core@^2.10.2", "@popperjs/core@^2.4.4":
  "integrity" "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
  "resolved" "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz"
  "version" "2.11.2"

+"@react-aria/ssr@^3.0.1":
+  "integrity" "sha512-amXY11ImpokvkTMeKRHjsSsG7v1yzzs6yeqArCyBIk60J3Yhgxwx9Cah+Uu/804ATFwqzN22AXIo7SdtIaMP+g=="
+  "resolved" "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.2.tgz"
+  "version" "3.1.2"
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@restart/hooks@^0.4.0", "@restart/hooks@^0.4.5":
+  "integrity" "sha512-tLGtY0aHeIfT7aPwUkvQuhIy3+q3w4iqmUzFLPlOAf/vNUacLaBt1j/S//jv/dQhenRh8jvswyMojCwmLvJw8A=="
+  "resolved" "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.5.tgz"
+  "version" "0.4.5"
+  dependencies:
+    "dequal" "^2.0.2"
+
+"@restart/ui@^1.0.2":
+  "integrity" "sha512-vKGe0UBJLnbvNAjr8ljlDvphf2HkpjBjXsblmgKPvKdZBDn/mtAz89wmznaomIaEJ9VNoSEY0vA5T5MDi2jIcQ=="
+  "resolved" "https://registry.npmjs.org/@restart/ui/-/ui-1.0.2.tgz"
+  "version" "1.0.2"
+  dependencies:
+    "@babel/runtime" "^7.13.16"
+    "@popperjs/core" "^2.10.1"
+    "@react-aria/ssr" "^3.0.1"
+    "@restart/hooks" "^0.4.0"
+    "@types/warning" "^3.0.0"
+    "dequal" "^2.0.2"
+    "dom-helpers" "^5.2.0"
+    "prop-types" "^15.7.2"
+    "uncontrollable" "^7.2.1"
+    "warning" "^4.0.3"
+
+"@types/invariant@^2.2.35":
+  "integrity" "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
+  "resolved" "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz"
+  "version" "2.2.35"
+
 "@types/parse-json@^4.0.0":
  "integrity" "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
  "resolved" "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
@ -440,7 +473,8 @@
  dependencies:
    "@types/react" "*"

-"@types/react@*", "@types/react@^16.8.6 || ^17.0.0":
+
+"@types/react@*", "@types/react@^16.8.6 || ^17.0.0", "@types/react@>=16.14.8", "@types/react@>=16.9.11":
  "integrity" "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ=="
  "resolved" "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz"
  "version" "17.0.38"
@ -454,6 +488,12 @@
  "resolved" "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
  "version" "0.16.2"

+
+"@types/warning@^3.0.0":
+  "integrity" "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+  "resolved" "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz"
+  "version" "3.0.0"
+
 "ansi-regex@^5.0.1":
  "integrity" "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
  "resolved" "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
@ -474,9 +514,9 @@
    "color-convert" "^2.0.1"

 "apexcharts@^3.18.0", "apexcharts@^3.33.1":
-  "integrity" "sha512-5aVzrgJefd8EH4w7oRmuOhA3+cxJxQg27cYg3ANVGvPCOB4AY3mVVNtFHRFaIq7bv8ws4GRaA9MWfzoWQw3MPQ=="
-  "resolved" "https://registry.npmjs.org/apexcharts/-/apexcharts-3.33.1.tgz"
-  "version" "3.33.1"
+  "integrity" "sha512-GkHZ3o36ZT/jSBh5y1pxxRzwM3tvtladtkcUTfXwP0wYAHK8Qj0X4ZPsupP7emRIjhOVpGsCxW9xeO3F5w+AOQ=="
+  "resolved" "https://registry.npmjs.org/apexcharts/-/apexcharts-3.33.2.tgz"
+  "version" "3.33.2"
  dependencies:
    "svg.draggable.js" "^2.2.2"
    "svg.easing.js" "^2.0.0"
@ -485,6 +525,12 @@
    "svg.resize.js" "^1.4.3"
    "svg.select.js" "^3.0.1"

+
+"asap@~2.0.3":
+  "integrity" "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+  "resolved" "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz"
+  "version" "2.0.6"
+  
 "axios@^0.26.0":
  "integrity" "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og=="
  "resolved" "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz"
@ -516,6 +562,25 @@
  "resolved" "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz"
  "version" "6.18.0"

+
+"base64-js@^1.3.1":
+  "integrity" "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+  "resolved" "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
+  "version" "1.5.1"
+
+"bootstrap@^5.1.3":
+  "integrity" "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
+  "resolved" "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz"
+  "version" "5.1.3"
+
+"buffer@^5.0.3":
+  "integrity" "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ=="
+  "resolved" "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz"
+  "version" "5.7.1"
+  dependencies:
+    "base64-js" "^1.3.1"
+    "ieee754" "^1.1.13"
+
 "callsites@^3.0.0":
  "integrity" "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
  "resolved" "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
@ -545,6 +610,12 @@
    "escape-string-regexp" "^1.0.5"
    "supports-color" "^5.3.0"

+
+"classnames@^2.3.1":
+  "integrity" "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+  "resolved" "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
+  "version" "2.3.1"
+
 "cliui@^6.0.0":
  "integrity" "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ=="
  "resolved" "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz"
@ -590,6 +661,11 @@
  dependencies:
    "safe-buffer" "~5.1.1"

+"core-js@^1.0.0":
+  "integrity" "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+  "resolved" "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz"
+  "version" "1.2.7"
+
 "cosmiconfig@^6.0.0":
  "integrity" "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg=="
  "resolved" "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz"
@ -601,11 +677,30 @@
    "path-type" "^4.0.0"
    "yaml" "^1.7.2"

+
+"create-react-class@^15.6.0":
+  "integrity" "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng=="
+  "resolved" "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz"
+  "version" "15.7.0"
+  dependencies:
+    "loose-envify" "^1.3.1"
+    "object-assign" "^4.1.1"
+
 "css-color-keywords@^1.0.0":
  "integrity" "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
  "resolved" "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz"
  "version" "1.0.0"

+
+"css-to-react-native@^2.0.3":
+  "integrity" "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw=="
+  "resolved" "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz"
+  "version" "2.3.2"
+  dependencies:
+    "camelize" "^1.0.0"
+    "css-color-keywords" "^1.0.0"
+    "postcss-value-parser" "^3.3.0"
+
 "css-to-react-native@^3.0.0":
  "integrity" "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ=="
  "resolved" "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz"
@ -632,12 +727,19 @@
  "resolved" "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
  "version" "1.2.0"

+
+"dequal@^2.0.2":
+  "integrity" "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+  "resolved" "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz"
+  "version" "2.0.2"
+
 "dijkstrajs@^1.0.1":
  "integrity" "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
  "resolved" "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz"
  "version" "1.0.2"

-"dom-helpers@^5.0.1":
+
+"dom-helpers@^5.0.1", "dom-helpers@^5.2.0", "dom-helpers@^5.2.1":
  "integrity" "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="
  "resolved" "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
  "version" "5.2.1"
@ -655,6 +757,13 @@
  "resolved" "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz"
  "version" "1.0.3"

+"encoding@^0.1.11":
+  "integrity" "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A=="
+  "resolved" "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz"
+  "version" "0.1.13"
+  dependencies:
+    "iconv-lite" "^0.6.2"
+
 "error-ex@^1.3.1":
  "integrity" "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g=="
  "resolved" "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@ -672,6 +781,20 @@
  "resolved" "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
  "version" "4.0.0"

+
+"fbjs@^0.8.16", "fbjs@^0.8.9":
+  "integrity" "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA=="
+  "resolved" "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz"
+  "version" "0.8.18"
+  dependencies:
+    "core-js" "^1.0.0"
+    "isomorphic-fetch" "^2.1.1"
+    "loose-envify" "^1.0.0"
+    "object-assign" "^4.1.0"
+    "promise" "^7.1.1"
+    "setimmediate" "^1.0.5"
+    "ua-parser-js" "^0.7.30"
+
 "find-root@^1.1.0":
  "integrity" "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
  "resolved" "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
@ -690,6 +813,27 @@
  "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz"
  "version" "1.14.8"

+
+"framer-motion@^6.2.8":
+  "integrity" "sha512-4PtBWFJ6NqR350zYVt9AsFDtISTqsdqna79FvSYPfYDXuuqFmiKtZdkTnYPslnsOMedTW0pEvaQ7eqjD+sA+HA=="
+  "resolved" "https://registry.npmjs.org/framer-motion/-/framer-motion-6.2.8.tgz"
+  "version" "6.2.8"
+  dependencies:
+    "framesync" "6.0.1"
+    "hey-listen" "^1.0.8"
+    "popmotion" "11.0.3"
+    "style-value-types" "5.0.0"
+    "tslib" "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+"framesync@6.0.1":
+  "integrity" "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA=="
+  "resolved" "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz"
+  "version" "6.0.1"
+  dependencies:
+    "tslib" "^2.1.0"
+
 "function-bind@^1.1.1":
  "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
  "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@ -705,6 +849,12 @@
  "resolved" "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
  "version" "11.12.0"

+
+"has-flag@^1.0.0":
+  "integrity" "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
+  "resolved" "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz"
+  "version" "1.0.0"
+
 "has-flag@^3.0.0":
  "integrity" "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
  "resolved" "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
@ -717,6 +867,16 @@
  dependencies:
    "function-bind" "^1.1.1"

+"hey-listen@^1.0.8":
+  "integrity" "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+  "resolved" "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz"
+  "version" "1.0.8"
+
+"hoist-non-react-statics@^2.5.0":
+  "integrity" "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+  "resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz"
+  "version" "2.5.5"
+
 "hoist-non-react-statics@^3.0.0", "hoist-non-react-statics@^3.3.1", "hoist-non-react-statics@^3.3.2":
  "integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
  "resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
@ -724,6 +884,18 @@
  dependencies:
    "react-is" "^16.7.0"

+"iconv-lite@^0.6.2":
+  "integrity" "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="
+  "resolved" "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
+  "version" "0.6.3"
+  dependencies:
+    "safer-buffer" ">= 2.1.2 < 3.0.0"
+
+"ieee754@^1.1.13":
+  "integrity" "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+  "resolved" "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
+  "version" "1.2.1"
+
 "import-fresh@^3.1.0":
  "integrity" "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw=="
  "resolved" "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@ -732,6 +904,13 @@
    "parent-module" "^1.0.0"
    "resolve-from" "^4.0.0"

+"invariant@^2.2.4":
+  "integrity" "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA=="
+  "resolved" "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
+  "version" "2.2.4"
+  dependencies:
+    "loose-envify" "^1.0.0"
+
 "is-arrayish@^0.2.1":
  "integrity" "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
  "resolved" "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
@ -749,6 +928,19 @@
  "resolved" "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
  "version" "3.0.0"

+"is-stream@^1.0.1":
+  "integrity" "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+  "resolved" "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz"
+  "version" "1.1.0"
+
+"isomorphic-fetch@^2.1.1":
+  "integrity" "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk="
+  "resolved" "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz"
+  "version" "2.2.1"
+  dependencies:
+    "node-fetch" "^1.0.1"
+    "whatwg-fetch" ">=0.10.0"
+
 "js-tokens@^3.0.0 || ^4.0.0", "js-tokens@^4.0.0":
  "integrity" "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
  "resolved" "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@ -781,7 +973,8 @@
  "resolved" "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
  "version" "4.17.21"

-"loose-envify@^1.1.0", "loose-envify@^1.4.0":
+
+"loose-envify@^1.0.0", "loose-envify@^1.1.0", "loose-envify@^1.3.1", "loose-envify@^1.4.0":
  "integrity" "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="
  "resolved" "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
  "version" "1.4.0"
@ -821,7 +1014,16 @@
    "@next/swc-win32-ia32-msvc" "12.0.9"
    "@next/swc-win32-x64-msvc" "12.0.9"

-"object-assign@^4.1.1":
+
+"node-fetch@^1.0.1":
+  "integrity" "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ=="
+  "resolved" "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz"
+  "version" "1.7.3"
+  dependencies:
+    "encoding" "^0.1.11"
+    "is-stream" "^1.0.1"
+
+"object-assign@^4.1.0", "object-assign@^4.1.1":
  "integrity" "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
  "resolved" "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
  "version" "4.1.1"
@ -887,6 +1089,21 @@
  "resolved" "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz"
  "version" "5.0.0"

+"popmotion@11.0.3":
+  "integrity" "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA=="
+  "resolved" "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz"
+  "version" "11.0.3"
+  dependencies:
+    "framesync" "6.0.1"
+    "hey-listen" "^1.0.8"
+    "style-value-types" "5.0.0"
+    "tslib" "^2.1.0"
+
+"postcss-value-parser@^3.3.0":
+  "integrity" "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+  "resolved" "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz"
+  "version" "3.3.1"
+
 "postcss-value-parser@^4.0.2":
  "integrity" "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
  "resolved" "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
@ -906,7 +1123,23 @@
  "resolved" "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz"
  "version" "2.5.1"

-"prop-types@^15.5.7", "prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@^15.8.1":
+
+"promise@^7.1.1":
+  "integrity" "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg=="
+  "resolved" "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz"
+  "version" "7.3.1"
+  dependencies:
+    "asap" "~2.0.3"
+
+"prop-types-extra@^1.1.0":
+  "integrity" "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew=="
+  "resolved" "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz"
+  "version" "1.1.1"
+  dependencies:
+    "react-is" "^16.3.2"
+    "warning" "^4.0.0"
+
+"prop-types@^15.5.10", "prop-types@^15.5.4", "prop-types@^15.5.7", "prop-types@^15.5.8", "prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@^15.8.1":
  "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
  "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
  "version" "15.8.1"
@ -932,7 +1165,40 @@
  dependencies:
    "prop-types" "^15.5.7"

-"react-dom@^17.0.0", "react-dom@^17.0.2 || ^18.0.0-0", "react-dom@>= 16.8.0", "react-dom@>=16.6.0", "react-dom@17.0.2":
+
+"react-bootstrap@^2.2.0":
+  "integrity" "sha512-5d3hziBjNOAKWpss2B8C2qtSXp/Z3PiyuRdFJelvJeTsGn8vbFYOoYjmf+0Agq+jh46TG+mtBvrCoa4nBk0bkg=="
+  "resolved" "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.2.0.tgz"
+  "version" "2.2.0"
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@restart/hooks" "^0.4.5"
+    "@restart/ui" "^1.0.2"
+    "@types/invariant" "^2.2.35"
+    "@types/prop-types" "^15.7.4"
+    "@types/react" ">=16.14.8"
+    "@types/react-transition-group" "^4.4.4"
+    "@types/warning" "^3.0.0"
+    "classnames" "^2.3.1"
+    "dom-helpers" "^5.2.1"
+    "invariant" "^2.2.4"
+    "prop-types" "^15.8.1"
+    "prop-types-extra" "^1.1.0"
+    "react-transition-group" "^4.4.2"
+    "uncontrollable" "^7.2.1"
+    "warning" "^4.0.3"
+
+"react-dom@^15.5.4":
+  "integrity" "sha512-mpjXqC2t1FuYsILOLCj0kg6pbg460byZkVA/80VtDmKU/pYmoTdHOtaMcTRIDiyXLz4sIur0cQ04nOC6iGndJg=="
+  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-15.7.0.tgz"
+  "version" "15.7.0"
+  dependencies:
+    "fbjs" "^0.8.9"
+    "loose-envify" "^1.1.0"
+    "object-assign" "^4.1.0"
+    "prop-types" "^15.5.10"
+
+"react-dom@^17.0.0", "react-dom@^17.0.2 || ^18.0.0-0", "react-dom@>= 16.8.0", "react-dom@>=16.14.0", "react-dom@>=16.6.0", "react-dom@>=16.8 || ^17.0.0 || ^18.0.0", "react-dom@17.0.2":
  "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
  "version" "17.0.2"
@ -946,6 +1212,17 @@
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  "version" "16.13.1"

+
+"react-is@^16.3.1":
+  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  "version" "16.13.1"
+
+"react-is@^16.3.2":
+  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  "version" "16.13.1"
+
 "react-is@^16.7.0":
  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@ -956,6 +1233,22 @@
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
  "version" "17.0.2"

+"react-lifecycles-compat@^3.0.4":
+  "integrity" "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+  "resolved" "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
+  "version" "3.0.4"
+
+"react-page-loading@^1.0.2":
+  "integrity" "sha512-FB7oQ3K6xMaWeABd8LFXpA2AmhtuaIQMXLCcnxD0S0i0SvCT31ivzl5lwgJXdW8pSRKLmTxuHMrK+gYnanBLlA=="
+  "resolved" "https://registry.npmjs.org/react-page-loading/-/react-page-loading-1.0.2.tgz"
+  "version" "1.0.2"
+  dependencies:
+    "prop-types" "^15.5.8"
+    "react" "^15.5.4"
+    "react-dom" "^15.5.4"
+    "styled-components" "^3.2.6"
+
+
 "react-transition-group@^4.4.2":
  "integrity" "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg=="
  "resolved" "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
@ -966,7 +1259,19 @@
    "loose-envify" "^1.4.0"
    "prop-types" "^15.6.2"

-"react@^16.8.0 || ^17.0.0", "react@^17.0.0", "react@^17.0.2 || ^18.0.0-0", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || 18.x.x", "react@>=0.13", "react@>=16.6.0", "react@>=16.8.0", "react@>=16.x", "react@17.0.2":
+
+"react@^15.5.4", "react@^15.7.0", "react@>= 0.14.0 < 17.0.0-0":
+  "integrity" "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA=="
+  "resolved" "https://registry.npmjs.org/react/-/react-15.7.0.tgz"
+  "version" "15.7.0"
+  dependencies:
+    "create-react-class" "^15.6.0"
+    "fbjs" "^0.8.9"
+    "loose-envify" "^1.1.0"
+    "object-assign" "^4.1.0"
+    "prop-types" "^15.5.10"
+
+"react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0-rc.1", "react@^17.0.0", "react@^17.0.2 || ^18.0.0-0", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || 18.x.x", "react@>=0.13", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@>=16.x", "react@17.0.2":
  "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
  "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
  "version" "17.0.2"
@ -1008,6 +1313,11 @@
  "resolved" "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
  "version" "5.1.2"

+"safer-buffer@>= 2.1.2 < 3.0.0":
+  "integrity" "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+  "resolved" "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
+  "version" "2.1.2"
+
 "scheduler@^0.20.2":
  "integrity" "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ=="
  "resolved" "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz"
@ -1021,6 +1331,11 @@
  "resolved" "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
  "version" "2.0.0"

+"setimmediate@^1.0.5":
+  "integrity" "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+  "resolved" "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz"
+  "version" "1.0.5"
+
 "shallowequal@^1.1.0":
  "integrity" "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
  "resolved" "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
@ -1052,6 +1367,30 @@
  dependencies:
    "ansi-regex" "^5.0.1"

+
+"style-value-types@5.0.0":
+  "integrity" "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA=="
+  "resolved" "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz"
+  "version" "5.0.0"
+  dependencies:
+    "hey-listen" "^1.0.8"
+    "tslib" "^2.1.0"
+
+"styled-components@^3.2.6":
+  "integrity" "sha512-TA8ip8LoILgmSAFd3r326pKtXytUUGu5YWuqZcOQVwVVwB6XqUMn4MHW2IuYJ/HAD81jLrdQed8YWfLSG1LX4Q=="
+  "resolved" "https://registry.npmjs.org/styled-components/-/styled-components-3.4.10.tgz"
+  "version" "3.4.10"
+  dependencies:
+    "buffer" "^5.0.3"
+    "css-to-react-native" "^2.0.3"
+    "fbjs" "^0.8.16"
+    "hoist-non-react-statics" "^2.5.0"
+    "prop-types" "^15.5.4"
+    "react-is" "^16.3.1"
+    "stylis" "^3.5.0"
+    "stylis-rule-sheet" "^0.0.10"
+    "supports-color" "^3.2.3"
+
 "styled-components@^5.3.1", "styled-components@^5.3.3", "styled-components@>= 2":
  "integrity" "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw=="
  "resolved" "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz"
@ -1073,11 +1412,30 @@
  "resolved" "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz"
  "version" "5.0.0"

+"stylis-rule-sheet@^0.0.10":
+  "integrity" "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+  "resolved" "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz"
+  "version" "0.0.10"
+
+"stylis@^3.5.0":
+  "integrity" "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+  "resolved" "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz"
+  "version" "3.5.4"
+
+
 "stylis@4.0.13":
  "integrity" "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
  "resolved" "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz"
  "version" "4.0.13"

+
+"supports-color@^3.2.3":
+  "integrity" "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY="
+  "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz"
+  "version" "3.2.3"
+  dependencies:
+    "has-flag" "^1.0.0"
+
 "supports-color@^5.3.0", "supports-color@^5.5.0":
  "integrity" "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="
  "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@ -1150,6 +1508,26 @@
  "resolved" "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
  "version" "2.0.0"

+"tslib@^2.1.0":
+  "integrity" "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+  "resolved" "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
+  "version" "2.3.1"
+
+"ua-parser-js@^0.7.30":
+  "integrity" "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ=="
+  "resolved" "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz"
+  "version" "0.7.31"
+
+"uncontrollable@^7.2.1":
+  "integrity" "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ=="
+  "resolved" "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz"
+  "version" "7.2.1"
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    "invariant" "^2.2.4"
+    "react-lifecycles-compat" "^3.0.4"
+
 "use-subscription@1.5.1":
  "integrity" "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA=="
  "resolved" "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz"
@ -1157,6 +1535,18 @@
  dependencies:
    "object-assign" "^4.1.1"

+"warning@^4.0.0", "warning@^4.0.3":
+  "integrity" "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w=="
+  "resolved" "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
+  "version" "4.0.3"
+  dependencies:
+    "loose-envify" "^1.0.0"
+
+"whatwg-fetch@>=0.10.0":
+  "integrity" "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
+  "resolved" "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz"
+  "version" "3.6.2"
+
 "which-module@^2.0.0":
  "integrity" "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
  "resolved" "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz"
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}