Structured Content Workflow & JSON Publishing Simulator
PostBuilder is a lightweight web application that simulates a modern content creation and publishing workflow similar to those used in CMS platforms. The application allows users to build structured blog content through a multi-step form interface, preview the content in real time, and generate a JSON payload representing the post. It also demonstrates validation workflows, asynchronous submission, and UI feedback patterns commonly found in product platforms. This project was developed as part of a technical portfolio to showcase frontend workflow design, structured content modeling, and CMS-style publishing experiences.
- Live Demo
- Key Features
- Application Architecture
- Product Management Approach
- Workflow Overview
- Form Sections
- Screenshots
- Live Preview
- Validation System
- JSON Output
- UI Design System
- Technologies Used
- Purpose of the Project
- Project Status
- Author
https://postbuilder.smarterspec.tech/
- Multi-step content creation workflow with sidebar navigation
- Real-time blog preview that updates as users type
- Structured JSON generation for API-style workflows
- Native form validation with custom UI handling
- Section-aware validation (auto-navigation to invalid fields)
- Asynchronous form submission with progress modal
- Copy and download JSON utilities
- Responsive layout for desktop and mobile
PostBuilder follows a frontend-driven architecture with a lightweight backend. The architecture emphasizes UI state management, user feedback, and structured data generation.
PostBuilder was developed using a structured Agile (Scrum-based) workflow to simulate real-world product development practices.
- Created and managed a structured backlog in Jira
- Defined features (stories), bug fixes, and acceptance criteria
- Estimated work using story points
- Prioritized MVP features to ensure focused delivery
- Organized development into 2 sprints:
- Sprint 1: Core content workflow (UI, preview, validation)
- Sprint 2: Backend processing, JSON output, and data handling
- Managed dependencies between frontend state, validation, and backend logic
- Maintained clear separation between frontend and backend responsibilities
- Focused on delivering a functional MVP first
- Deferred non-critical features to reduce scope creep
- Balanced user experience improvements with backend reliability
- Identified and resolved a tag persistence issue affecting data consistency
- Ensured alignment between frontend state and backend processing
- Conducted end-to-end validation of submission and JSON output workflows
- Delivered a complete MVP in 2 sprints
- Achieved full completion of planned sprint scope
- Established a structured content model for API-driven workflows
The application simulates a simplified CMS publishing experience:
- User navigates through form sections via sidebar
- Content is entered and preview updates in real time
- Validation ensures required fields are completed
- Form is submitted asynchronously
- Upload modal displays progress and status
- JSON payload is generated and displayed
- Title (auto-generates slug)
- Description - Content
- Name
- Role
- Bio
- Meta Title
- Meta Description
- Dynamic tag input system
- Tag pills UI
- Featured image upload
- Client-side preview
- Publish preference
- Optional scheduled date
| Initial Load | Form Section |
|---|---|
 |
 |
| Filled Form | Generated JSON |
|---|---|
 |
 |
The live preview updates instantly as users input content. It simulates a blog post card including: - title
- author
- description
- content
- tags
- publish date
- featured image
This demonstrates real-time DOM updates and product-style UI feedback.
PostBuilder uses native HTML5 validation enhanced with custom behavior. Features include:
- required field validation
- character limits
- custom invalid event handling Custom UX improvements:
- automatically navigates to the section containing invalid fields
- syncs sidebar active state
- scrolls to the relevant section
- focuses invalid inputs
- displays global error messaging
The application generates a structured JSON payload based on user input. Example: json { "title": "Post Title", "slug": "post-title", "description": "...", "content": "...", "tags": [], "author": { "name": "...", "role": "...", "bio": "..." }, "metaTitle": "...", "metaDescription": "...", "featuredImage": "...", "publishPreference": "...", "specificPublishDate": "..." }
The JSON is displayed in a formatted preview panel after submission.
PostBuilder uses a lightweight design system built with CSS variables. Key principles:
- consistent spacing and layout
- card-based UI structure
- sidebar navigation with active states
- modal-based feedback system
- responsive design for smaller screens
- HTML
- CSS (custom design system with variables)
- JavaScript (vanilla, modular structure)
- PHP (JSON generation endpoint)
- AJAX (XMLHttpRequest for async submission)
This project includes several safeguards to ensure safe handling of user input and file uploads:
• User-generated content is rendered using safe DOM methods such as textContent to prevent script execution • Avoids use of innerHTML for dynamic content where possible • Input fields are sanitized and constrained using character limits
• Slugs are normalized and restricted to alphanumeric characters and hyphens • Prevents path traversal and malicious filename injection
• Accepts only specific file types (JPEG, PNG) • Validates both MIME type and file extension • Enforces file size limits • Uploaded files are renamed using sanitized slugs to prevent execution of malicious filenames
• Limits the number of generated JSON files to prevent abuse or storage overflow
• Validation is implemented on both frontend and backend to ensure data integrity and prevent bypassing client-side restrictions
PostBuilder demonstrates how modern content platforms structure user workflows for creating, validating, and publishing content. The project highlights how frontend applications can:
- manage multi-step user input
- provide real-time feedback
- generate structured data for APIs
- simulate publishing workflows without full backend systems
PostBuilder is an actively evolving portfolio project focused on frontend product workflows and structured content systems. Current version includes:
- multi-step form navigation
- live preview system
- validation with guided UX
- JSON generation and display
- asynchronous submission with modal feedback
Future improvements may include:
- database persistence
- CMS API integration
- markdown editor support
- autosave controls
- multi-user workflows
Portfolio project created by Alejandra Badia