Writing my own Dev.to CMS with Next.js + Preact + TypeScript + Tailwind UI - Part 4 [Livestream]
Today we polish the UX! also: creating a useNotification hook with Preact and Tailwind UI, Markdown preview with iframe srcDoc, Programmatic Redirects, Using Web Components with Next.js
Next.js + Preact + TypeScript + Tailwind UI: https://github.com/sw-yx/dev-to-cms
Source: https://github.com/sw-yx/dev-to-cms
Demo: https://dev-to-cms.now.sh
Things covered
[x] Redirect to edit after posting
[x] Markdown preview with toggles
[x] Async status - nicer UX when clicking submit
[x] Disable submit button
[x] show spinner while inflight - web component!! https://github.com/craigjennings11/wc...
[x] Show error! - using notifications as a hook!
[Day 1 - Setup Next.js and Tailwind UI, list posts through API routes](https://dev.to/swyx/make-your-own-dev...) - 90 mins
[Day 2 - setting up a Markdown Editor with Next.js, Tailwind UI, Highlight.js, React Hook Form, and React Query](https://dev.to/swyx/make-your-own-dev...) - 3 hours
Quick Fix - [How To Add Monaco Editor to a Next.js app](https://dev.to/swyx/how-to-add-monaco...) - 18 mins
[Day 3 - Refactoring to Edit Existing Posts](https://dev.to/swyx/make-your-own-dev...) - 3 hours
[Day 4 - Polish Day! Implementing Notifications, Markdown preview, and programmatic Redirects, and Using Web Components in Next.js](https://dev.to/swyx/make-your-own-dev...) - 3 hours