Web App

PixelPress

Full-stack editorial platform with SSR, administration, MDX, and edge computing

Bilingual editorial platform for video game content, built with Astro 7 and deployed using SSR on Cloudflare Workers.

Astro 7TypeScriptReact 19Tailwind CSS 4MDXZodCloudflare WorkersCloudflare R2GiscusWeb Crypto API

1. Summary

PixelPress is a bilingual editorial platform focused on video game content. It is built with Astro 7, TypeScript, React, Tailwind CSS 4, and MDX, and deployed using SSR on Cloudflare Workers.

The project combines content publishing, an administration panel, JWT authentication, a REST API, image storage through Cloudflare R2, Giscus comments, and advertising integration.

Editorial content uses MDX and Zod schemas to maintain validated, version-controlled content through Git.

Project Facts

~20	~15	12	16
components	routes	demo articles	production dependencies

2. Context & Objective

The technical objective was to build a specialized editorial platform combining:

SSR through edge computing.
Spanish and English content.
Browser-based administration.
Rich-text content editing.
External image storage.
Third-party comment integration.
Advertising integration.
Version-controlled editorial content.

The project is not based on validated business metrics or a documented commercial requirement. Therefore, PixelPress is presented primarily as a technical and editorial product project, rather than a validated SaaS product.

3. Solution

PixelPress combines an SSR frontend, API layer, administration panel, and external services.

SSR Frontend

Astro generates pages through SSR using Cloudflare Workers as the runtime.

Content System

Articles are stored as MDX files and organized by language. Content is validated using Zod schemas.

Administration

The administration panel provides authentication, editorial management, and a rich-text editor for generating structured content.

Currently, the editor generates MDX files that must be manually incorporated into the repository. Therefore, the panel acts as an administration and content-generation tool, rather than a fully automated CMS.

API

The application provides endpoints for:

Authentication.
Article management.
Image uploads.

Storage

Images are stored in Cloudflare R2 through Cloudflare Workers bindings.

Internationalization

Spanish and English content use separate route structures.

Publishing Flow

Administrator
      ↓
Administration Panel
      ↓
JWT Authentication
      ↓
Content Editor
      ↓
Structured MDX
      ↓
Git Repository
      ↓
Build / Deploy
      ↓
Cloudflare Workers

Reading Flow

User
 ↓
Cloudflare
 ↓
Cloudflare Workers
 ↓
Astro SSR
 ↓
MDX Content
 ↓
Generated HTML
 ↓
Browser

4. Architecture

PixelPress architecture diagram

Overall PixelPress architecture including Astro SSR, Cloudflare Workers, MDX, API routes, authentication, R2 storage, and external integrations.

Main Components

Astro SSR — Rendering and routing.
Middleware — Administrative route protection.
API Routes — Authentication, posts, and uploads.
React — Interactive components and administration editor.
MDX — Version-controlled editorial storage.
Zod — Content schema validation.
Cloudflare R2 — Image storage.
Giscus — Comments through GitHub Discussions.
Google AdSense — Advertising integration.

5. Technology Stack

Technology	Purpose
Astro 7	Main framework and SSR
Cloudflare Workers	Edge runtime
TypeScript	Static typing
React 19	Interactive components and editor
Tailwind CSS 4	Styling
MDX	Editorial content
Zod	Schema validation
Cloudflare R2	Image storage
Web Crypto API	JWT implementation
Giscus	Comments
Google AdSense	Advertising
Wrangler	Cloudflare development and deployment
pnpm	Package management

6. Implemented Features

Content

Bilingual Spanish/English blog.
MDX articles.
Categories.
Featured posts.
Draft support.
Related posts.
Server-side pagination.
Automatic table of contents.
YouTube embeds.
Social sharing.
Basic SEO.

Administration

Administration login.
JWT authentication.
HttpOnly, Secure, and SameSite cookies.
Protected middleware.
Administration dashboard.
Rich-text editor.
MDX content generation.
Cloudflare R2 image uploads.

Interface

Responsive design.
Dark mode / Light mode.
View Transitions.
Reusable components.
Custom 404 and 500 pages.

Integrations

Cloudflare R2.
Giscus.
Google AdSense.

CLI

Post creation scripts.
R2 image upload scripts.

Partial Features

Search: SearchBar and Fuse.js are present, but search is not yet connected to a functional implementation.
Newsletter: the UI exists, but no email provider is integrated.
Article deletion: the DELETE endpoint exists, but does not currently remove MDX files from the repository.
Mobile navigation: the menu button exists, but the implementation is incomplete.
Tiptap: Tiptap dependencies are installed, but the current editor uses contentEditable.

7. Key Technical Decisions

Astro SSR + Cloudflare Workers

SSR was selected to run the frontend, middleware, and API within the same edge environment.

Advantage: combines rendering, server-side logic, and API endpoints within Cloudflare Workers.

Trade-off: introduces Cloudflare runtime dependency and more complexity than a fully static site.

JWT with Web Crypto API

Authentication uses crypto.subtle to implement HMAC-SHA256 without an additional cryptographic library.

Advantage: uses native APIs compatible with Workers.

Trade-off: manually maintaining authentication components increases maintenance responsibility and requires careful security review.

MDX as Editorial Storage

Articles remain inside the repository and are versioned through Git.

Advantage: versioned, reproducible, and schema-validated content.

Trade-off: publishing content requires repository changes and a new deployment.

Tailwind CSS 4

The CSS-first configuration model of Tailwind CSS 4 is used.

Advantage: keeps much of the configuration directly within CSS.

Trade-off: requires familiarity with Tailwind’s newer configuration model.

Separate Language Routes

Spanish and English content use separate route structures.

Advantage: explicit control over each language’s content.

Trade-off: increases maintenance and can introduce structural duplication.

8. Security

Implemented Controls

JWT signed using HMAC-SHA256.
Token expiration.
HttpOnly cookies.
Secure cookies.
SameSite=Strict.
Middleware protecting /admin.
API route protection.
Content validation through Zod.

Identified Limitations

No login rate limiting.
No explicitly documented CSRF protection.
Credentials require a stronger comparison mechanism.
Upload validation can be strengthened.
No automated authentication tests.
Manual JWT management increases maintenance responsibility.

Priorities

Add login rate limiting.
Use timing-safe credential comparison.
Strictly validate upload size and file types.
Avoid exposing internal error details.
Add authentication and API tests.

9. Quality & Current Status

Testing

Currently there are no:

Unit tests.
Integration tests.
E2E tests.
Automated coverage.
CI/CD pipeline.

TypeScript uses strict configuration, although the project keeps ignoreBuildErrors: true.

This represents technical debt, because deployment can proceed despite TypeScript errors.

Status

Classification: proof of concept

The project’s main functional foundation is implemented, but several capabilities remain incomplete:

Fully automated publishing.
Search.
Newsletter.
Complete mobile navigation.
Actual article deletion.
Automated testing.
CI/CD.
Authentication hardening.

Therefore, PixelPress should not be presented as a finished editorial platform, but as an actively developed full-stack project with a substantial functional foundation.