The Block Editor Revolution: From Productivity Tools to Simple Website Publishing

December Crunch Plan: Refined and Optimized for 4 Weeks

Building DryCoal: A Block-Based Web Publishing Platform

Explore

Tech Stack

Frontend

Overview

The frontend for the MVP is crafted with Next.js as the core framework, integrating a carefully selected set of modern tools to ensure the application is sleek, interactive, and user-friendly. It prioritizes accessibility, performance, and ease of use without including any tracking mechanisms at launch, aligning with your focus on GDPR compliance and user trust.

⁠

Core Framework

Next.js forms the foundation of the frontend, enabling server-side rendering (SSR) and static site generation (SSG) for optimal performance and dynamic user experiences.

Key Features:

Server-Side Rendering (SSR): Handles personalized user pages and subdomain routing.

Static Site Generation (SSG): Delivers lightning-fast published pages.

Built-in API Routes: Facilitates backend interaction (e.g., publishing, domain validation).

Routing Architecture:

Public Routes: Marketing pages hosted on useblokky.com.

Authenticated Routes: Dashboard and editor available at app.useblokky.com.

Dynamic Routes: User sites served under *.blokky.site.

⁠

Styling and Design

Tailwind CSS:

Utility-first CSS framework for rapid, consistent, and responsive design.

Enables dynamic theming (e.g., dark mode) and custom styling with minimal effort.

ShadCN (Radix UI):

A collection of prebuilt, accessible components styled with Tailwind CSS.

Common components include modals, dropdowns, sliders, and tooltips.

Tippy.js:

Lightweight, highly customizable tooltips for interactive elements.

Examples: Tooltips for buttons, icons, and input fields.

⁠

Forms and Validation

Forms are central to user interactions, such as login, signup, and domain management.

React Hook Form:

Efficient and lightweight library for managing simple forms with a focus on performance.

Formik (Optional):

A fallback option for handling more complex forms requiring advanced state management.

Zod Validation:

Schema-based validation ensures type safety and prevents errors during form submissions.

⁠

Rich Content Creation

Users can create and manage content using Editor.js, a block-based editor designed for simplicity and flexibility.

Key Features:

Supports headings, lists, tables, and GDPR-compliant media embeds.

Outputs JSON format for seamless storage and rendering.

Integration: Works smoothly with Supabase for saving and retrieving content.

⁠

Interactivity and UX Enhancements

To create a polished and modern user experience, several tools are integrated:

Framer Motion:

Adds smooth animations for transitions and interactions.

Examples:

Page transitions.

Modal open/close animations.

Hover effects on buttons.

⌘K Command Menu (KBar):

A global command palette for quick navigation and actions.

Example uses:

Searching documents.

Opening settings.

Triggering publishing workflows.

React Sidebar:

Provides sleek, customizable side navigation menus for a modern app layout.

Keyboard Shortcuts (React Hotkeys):

Enables power users to interact with the app efficiently.

Examples:

Ctrl+S to save documents.

Cmd+K to open the command menu.

⁠

File and Image Handling

Users often upload images and files for their websites. Here’s how the frontend handles this:

React Cropper:

A user-friendly tool for cropping and resizing images before upload.

Responsive Images:

Multiple resolutions are generated (e.g., thumbnails, medium, full-size).

Ensures images are served at the optimal size using <picture> and srcset.

⁠

Accessibility and Theming

Accessibility and theming are integral to ensuring an inclusive and customizable experience.

Accessibility Standards:

react-sr-only: Hides elements visually while keeping them accessible for screen readers.

react-skip-nav: Adds skip-to-content links, enhancing navigation for keyboard users.

Full keyboard navigation support with Radix UI components.

ARIA roles for screen readers.

Compliance with WCAG standards.

Dark Mode and Theming:

Tailwind CSS and Radix Colors enable dynamic theming.

Users can toggle between light and dark modes for personalization.

⁠

Onboarding and Notifications

React Joyride:

A guided tour tool for onboarding new users.

Walks users through features like creating documents, managing domains, and publishing.

React Toastify:

Provides clean, dismissible notifications for key events.

Examples:

Success: "Document Published Successfully."

Error: "Failed to Upload Image."

⁠

Pages and Features

Landing Page (useblokky.com):

Describes platform features and allows beta signup requests.

Dashboard (app.useblokky.com):

Displays user documents, their statuses (e.g., draft or published), and quick links to settings or editing.

Editor Page:

Full-screen editing interface built with Editor.js.

Real-time save and publish actions supported.

Settings Page:

Allows management of accounts, domains, and subscription preferences.

Public Pages (*.blokky.site):

Published documents rendered as static HTML for fast delivery and SEO.

⁠

What’s Not Included

No Tracking:

No analytics or tracking libraries are included to align with GDPR compliance and user trust.

Minimal Dependencies:

Libraries are carefully chosen to balance functionality and maintainability.

⁠

Summary

This frontend leverages modern tools like Next.js, Tailwind CSS, Framer Motion, and ShadCN to create a polished, responsive, and accessible user experience. Additions like Tippy.js for tooltips, React Sidebar for navigation, and enhanced accessibility with react-sr-only and react-skip-nav ensure the app feels modern and professional. These tools provide a scalable and efficient foundation for future growth while maintaining an exceptional user experience.

Let me know if any other adjustments are needed!

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.