Introduction
This QuickStart guides you through creating a complete blog with the BWEB component: a public interface and an administration back-office. You will develop the application while reading along.
⏱️ Estimated Duration: 2-3 hours
📌 Important Note
The BWEB component is regularly updated with new features and improvements. The interface you see in your version may have some visual differences compared to the screenshots in this QuickStart. The concepts and logic remain identical.
What You Will Build
🌐 Public Blog (Frontend)
- ▸ Home page: list of published articles
- ▸ Article detail page: full article display
- ▸ Contact page: simple form
⚙️ Admin Back-Office (Backend)
- ▸ Article list with actions (edit, delete, publish)
- ▸ Article creation/editing form
- ▸ Rights management: admin and editor profiles
Prerequisites
💻 Technical
🎓 Knowledge
- ✓ Basics of 4D (tables, methods, dataclasses)
- ✓ Data modeling (entities, relationships)
- ✓ Basic web concepts (HTTP, routes) appreciated but not required
- ✗ No need to know: HTML, JavaScript, Tailwind CSS in detail
💡 BWEB automatically installs all dependencies (Tailwind, npm, etc.)
Development Approach
BWEB uses a WYSIWYG editor: you compose your interfaces by drag-and-drop and configure the style through visual forms. Two possible approaches for styling:
1️⃣ Visual
Fill in configuration fields (border, spacing, colors, etc.) through an inspector
2️⃣ Tailwind Classes
Add CSS classes directly if you prefer
Both approaches give the same result. This QuickStart favors the visual approach, which requires no prior technical knowledge.
Tutorial Structure
Part 1: Project Setup
Installation, data model, test data
Part 2: Admin Domain – Back-Office
Article list, CRUD forms, rights management
Part 3: Front Domain - Public Blog
Home page, article detail, contact + navigation