Markednotes


This web app allows users to create study notes using markdown


https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/5_25_21%2Fmarkednotes%2Fedit.png?alt=media&token=3ed68d3b-e3c5-41e3-a0f7-42c0e5ff1c2ehttps://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/5_25_21%2Fmarkednotes%2Fmain.png?alt=media&token=930f2e07-0010-4f3b-a9b4-fc8c06e60e12https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/5_25_21%2Fmarkednotes%2Fnote.png?alt=media&token=0632e344-39ec-4ec3-9aec-e4b620480260

This web app is really a port from studythat express version. I wanted to see if there really is a need for a MERN Stack considering that NextJS allows users to use serverside-rendering with their own API methods, so I created a new version. Like the Express version, I was able to use MongoDB as my database of choice. In this new version, I added authentication using auth0, improved markdown parsing using markdown-it and highlight.js, and a newer UI.

Authentication

At first, I tried to use NextAuth; however, I kept on getting an error message indicating that a database is required. I tried to find a solution; however, I could not. After some time, I decided to try a different authentication method. That's when I discovered Auth0. While Auth0's easy-to-use application menu and starter kit made it easy to set up authentication, it was their documentation and login customization that won me over.

MongoDB

Like the original version, I used mongoose to connect to a collection that I set up for this new version. At first, I ran to an error message claiming that I was trying to overwrite a collection. I eventually patched the problem by writing the following within the try statement:


mongoose.set('useFindAndModify', false)
        const connection = await mongoose.createConnection(process.env.MONGODB_CONNECTION, {
            useNewUrlParser: true,
            useUnifiedTopology: true
        }).catch(function(err){
            console.log("error:", err)
        })

        const Schema = mongoose.Schema
        const cardSchema = Schema({
            title: String,
            note: String,
            user: String
        })
        const Card = connection.model('Notes', cardSchema)

Although this is not perfect (considering that MongoDB sends me alerts saying that I have created more than 80 connections every now and then), it will suffice until I find a better solution.