After implementing authentication to my webapp, I decided to reuse the styles I used from the Express version and a navbar I used from Kodebroilers-one of my projects.
Because I wanted everything to look the same as the Express Version, I decided to save time by copying and pasting the styles from the css file from the Express Version to the globals.css file in the NextJS version. This allows me to reuse the styles without having to create new .module.css files for every page or component and frees me from having to import them and writing className={styles./*enterclassName*/} for each element.
Reusing the Navbar was easy considering that Kodebroilers was a web app that allows users to copy and paste components or lines of code that they would reuse constantly. Because I want all of my projects to share a similar style, I made sure that after I deployed Kodebroilers, I copied and pasted the navbar I used in Kodebroilers into Kodebroilers. This allowed me to easily reuse it in the NextJS version. I had to make some adjustments such as making sure that the Link element is now imported from Next/link rather than from react-router-dom and made sure that I replaced to with href when using the Link element. I also changed the color scheme to match the style of the webapp. It now looks like this (the svg icon colors looks different because I edited them in the globals.css file to make sure that all svg icons have the same color throughout the web app)
import React from 'react'
import Link from 'next/link'
import { useUser } from '@auth0/nextjs-auth0'
export default function Nav(){
const {user} = useUser()
const navStyle = {
backgroundColor: '#F5F5F5',
padding: '30px',
border: 'none',
borderRadius: '12px',
position: 'fixed',
top: '35%',
/* top: !currentUser ? '35%' : '20%', */
right: '5px',
boxShadow: '4px 4px 4px rgba(0, 0, 0, 0.25)',
zIndex: '3',
display: 'flex',
flexDirection: 'column'
}
const navButtonStyle = {
margin: "auto",
marginTop: "15px",
marginBottom: "15px",
width: '32px',
height: '32px',
color: 'white'
}
return(
<nav style={navStyle}>
<Link href="/">
<svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-house-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
</Link>
<Link href="/create">
<svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
</svg>
</Link>
{/* <Link href="/account">
<svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
</Link> */}
{user && <a href="/api/auth/logout">
<svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-door-closed-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v13H1.5a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2a1 1 0 0 0-1-1H4zm2 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
</a>}
{!user && <a href="/api/auth/login">
<svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-door-closed-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v13H1.5a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2a1 1 0 0 0-1-1H4zm2 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
</a>}
</nav>
)
}
I first started by creating a folder in the api folder called create. Within that folder, I created an index.js folder. At first, the file looked something like this:
import mongoose from 'mongoose'
mongoose.set('useFindAndModify', false)
mongoose.connect(process.env.MONGODB_CONNECTION, {
useNewUrlParser: true,
useUnifiedTopology: true
}).catch(function(err){
console.log("error:", err)
})
const Schema = mongoose.Schema
const cardSchema = new Schema({
title: String,
note: String,
user: String
})
const Card = mongoose.model('Notes', cardSchema)
export default async function(req, res){
try {
const card = new Card({
title: req.body.title,
note: req.body.note,
user: req.body.user
})
card.save()
res.status(200).json({status: "everything's good"})
} catch(error){
res.status(500).json({Error: error.message})
}
}
I ended the day by testing the api by creating a create.js page that allowed me to create a card. It was a simple form that resembled the style of a form in Kodenshare-another one of my projects. Although I was able to Post the data to MongoDB, I ran into a problem. As soon as I opened MongoDB in my browser, my webapp would not allow me to Post any more data. The console then returned an error indicating that I was trying to overwrite the Notes collection when I was not intending that to happen. It wouldn't be until the following day that I would patch the problem.