DownNote

A modern markdown editor that features real-time preview, dark mode, cloud sync, and guest mode for instant writing.

02

Tech Stack

  • Next.js
  • React
  • TypeScript
  • Prisma ORM
  • PostgreSQL
  • NextAuth.js
  • Tailwind CSS
  • CodeMirror
  • OAuth
  • localStorage API
  • Framer Motion

Introduction

This project demonstrates modern full-stack development with React Server Components, authentication, and database management.

Purpose & Goal

I built DownNote to create a better writing experience than traditional markdown editors like StackEdit. The goal was to modernize the interface while adding essential features like guest mode, OAuth authentication, and cloud sync. This project also served as practice for building production-ready full-stack applications with the latest Next.js App Router.

Spotlight

The standout feature is the transition between guest and authenticated modes. Users can start writing immediately without an account, then sign in with GitHub, Google, or email to automatically sync their work to the cloud. The split-pane editor with real-time markdown preview, custom typography, and glass-morphism dark mode create a premium writing experience.

Lessons Learned

I learned to implement multi-provider authentication with NextAuth.js, manage database schemas with Prisma, and handle localStorage for offline-first functionality. Key challenges included building auto-save with debouncing, managing theme persistence, and creating a responsive split-pane editor. I also gained experience with TypeScript generics, proper error handling, and deploying full-stack apps with database migrations.

View Live Site View Source Code