Frontend Mentor - In-browser markdown editor solution

This is a solution to the In-browser markdown editor challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

I am continuing to work on projects to showcase on my portfolio. As usual, Front End Mentor came through with this awesome In-Browser Markdown Editor Project. This is the first project for front end mentor that I made as a full-stack app.

The challenge

Users should be able to:

• Create, Read, Update, and Delete markdown documents
• Name and save documents to be accessed as needed
• Edit the markdown of a document and see the formatted preview of the content
• View a full-page preview of the formatted content
• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Bonus: If you're building a purely front-end project, use localStorage to save the current state in the browser that persists when the browser is refreshed
• Bonus: Build this project as a full-stack application

Screenshots

Links

• Solution URL: https://www.frontendmentor.io/solutions/inbrowser-markdown-editor-Gnsq5zFSff
• Live Site URL: https://markdown.chrisnowicki.io

My process

I took a similar approach from the Pomodoro App that I recently created.

1. Create the markdown edit/preview functionality.
2. Create the remaining functionality with styling.
3. Add in authorization and connection to MongoDB.

Built with

• NEXT.js
• React Markdown
• remark-gfm
• auth0
• MongoDB
• TypeScript
• Sass
• Deployed on Vercel

What I learned

For this project I really wanted to focus on authorization using other than user name and password. I chose the auth0 library because they had a very nice SDK developed for NEXT.js and configured it to authorize using Google and GitHub.

This made implementing the authentication routes fairly simple by adding an /auth directory and then a [...auth0].js file with the following code which provides the api/auth/login, api/auth/logout, and api/auth/callback routes required by auth0:

import { handleAuth } from '@auth0/nextjs-auth0'

export default handleAuth()

Once I got the routes setup it was a bit challenging, at first, to configure auth0 with the appropriate links to operate in the development environment localhost:3000. Other than that the SDK provided everything I needed to access the logged in users information.

Continued development

I'd like to continue to play around with NEXT.js. It's a rad React Library that doesn't require you to install a separate server.

Useful resources

• Auth0 NEXT.js SDK

Author

• Website - https://www.chrisnowicki.io
• Frontend Mentor - @chris-nowicki
• Twitter - @iamwix