diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,8 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "bootstrap": "^5.1.1",
+    "clipboard-copy": "^4.0.1",
+    "mongoose": "^6.0.8",
     "next": "11.1.2",
+    "randomstring": "^1.2.1",
     "react": "17.0.2",
+    "react-bootstrap": "^1.6.4",
     "react-dom": "17.0.2"
   },
   "devDependencies": {

diff --git a/pages/[slug].js b/pages/[slug].js
@@ -0,0 +1,55 @@
+import React,{useState} from 'react'
+import { Form,Button } from 'react-bootstrap'
+import {Snippet} from '../utils/models/Snippets'
+import {connect} from '../utils/db'
+import * as copy from 'clipboard-copy'
+export default function createSnippet({snippetText}){
+
+return (
+    <div className="text-center mt-4">
+        <h1>
+        Snippet
+        </h1>
+        <Button
+            onClick={()=>copy(window.location)}
+          className="mb-4 mt-2"
+          variant="outline-info"
+        >
+          Copy link to clipboard
+        </Button>
+
+        <Form>
+        <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
+     <Form.Control 
+     style={{margin:"0 auto" ,width:'400px',height:"300px" }} 
+     disabled
+     value={snippetText}
+     as="textarea" rows={3} />
+   </Form.Group>
+   </Form>
+
+
+
+
+
+
+
+    </div>
+
+
+)}
+export async function getServerSideProps(context) {
+    await connect();
+
+    const slug=context.params.slug
+    const snippetObject=await Snippet.findOne({
+        slug,
+    })
+    return {
+      props: {
+          snippetText:snippetObject.snippet,
+      }, // will be passed to the page component as props
+    }
+  }
+
+
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,7 +1,31 @@
 import '../styles/globals.css'
-
+import 'bootstrap/dist/css/bootstrap.min.css';
+import {Button,Navbar,Nav,Form,FormControl, Container, Row, Col} from 'react-bootstrap'
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <>
+  <Navbar bg="dark" variant="dark">
+  <Navbar.Brand href="/">Paste Bucket</Navbar.Brand>
+    <Nav className="mr-auto">
+    <Nav.Link href="/">Home</Nav.Link>
+      <Button
+        href="/create-snippet" 
+        variant="outline-success"
+        >
+        Create Snippet</Button>
+
+    </Nav>
+
+
+</Navbar>
+  <Container>
+    <Row>
+      <Col>    
+      <Component {...pageProps} />
+      </Col>
+    </Row>
+
+  </Container>
+  </>
 }
 
 export default MyApp
diff --git a/pages/api/hello.js b/pages/api/hello.js
diff --git a/pages/api/snippets.js b/pages/api/snippets.js
@@ -0,0 +1,25 @@
+import { connect } from "../../utils/db";
+import { Snippet } from "../../utils/models/Snippets";
+import * as randomstring from "randomstring";
+
+export default async (req, res) => {
+  await connect();
+
+  if (req.method === "POST") {
+    const slug = randomstring.generate({
+      length: 6,
+      charset: "alphabetic",
+    });
+    const snippet = await Snippet.create({
+      snippet: req.body.snippet,
+      slug,
+    });
+
+    res.statusCode = 200;
+    res.json(snippet);
+  } else {
+    throw new Error(
+      "http method not supported on this endpoint"
+    );
+  }
+};
diff --git a/pages/create-snippet.js b/pages/create-snippet.js
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { Form, Button } from "react-bootstrap";
+import { useRouter } from "next/router";
+
+export default function CreateSnippet() {
+  const router = useRouter();
+
+  const [snippet, setSnippet] = useState("");
+
+  const saveSnippet = async () => {
+    const response = await fetch("/api/snippets", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        snippet,
+      }),
+    });
+    const createdSnippet = await response.json();
+    router.push(`/${createdSnippet.slug}`);
+  };
+
+  return (
+    <div className="text-center mt-4">
+      <h1>Upload your snippet now!</h1>
+      <p>
+        Paste whatever text you want in the textarea below,
+        save it, and share the link with friends.
+      </p>
+
+      <Form>
+        <Form.Group controlId="exampleForm.ControlTextarea1">
+          <Form.Control
+            style={{
+              margin: "0 auto",
+              width: "400px",
+              height: "300px",
+            }}
+            onChange={(e) => setSnippet(e.target.value)}
+            as="textarea"
+            rows={3}
+          />
+        </Form.Group>
+
+        <Button
+          onClick={saveSnippet}
+          variant="outline-info"
+        >
+          Save your Snippet
+        </Button>
+      </Form>
+    </div>
+  );
+}
diff --git a/pages/index.js b/pages/index.js
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import Image from 'next/image'
 import styles from '../styles/Home.module.css'
-
+import {Button} from 'react-bootstrap'
 export default function Home() {
   return (
     <div className={styles.container}>
@@ -10,60 +10,16 @@ export default function Home() {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
+      <h1>Welcome to Paste Bucket</h1>
+      <p>
+        This is an application for people to upload and share snippets of text
+      </p>
+      <Button
+        href="/create-snippet" 
+        variant="outline-success"
         >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
+        Create Snippet</Button>
+
     </div>
   )
 }
diff --git a/utils/db.js b/utils/db.js
@@ -0,0 +1,19 @@
+import mongoose from "mongoose";
+
+let isConnected = false;
+// const uri = "mongodb+srv://Arif:<password>@cluster0.3tw6k.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
+const localUri="mongodb://localhost/paste-buckets"
+export const connect = async () => {
+  if (!isConnected) {
+    await mongoose.connect(
+      localUri,
+      {
+        useNewUrlParser: true,
+        useUnifiedTopology: true,
+        useFindAndModify: false,
+        useCreateIndex: true,
+      }
+    );
+    isConnected = true;
+  }
+};
diff --git a/utils/models/Snippets.js b/utils/models/Snippets.js
@@ -0,0 +1,12 @@
+import mongoose from "mongoose";
+
+const Schema = mongoose.Schema;
+
+const snippetSchema = new Schema({
+  snippet: String,
+  slug: String,
+});
+
+export const Snippet =
+  mongoose.models.Snippet ||
+  mongoose.model("Snippet", snippetSchema);