🛠️ Blog / CMS

This is an ongoing implementation of the multi-authors CMS using Symfony, Next.js and ShadCN UI components.
The goal is to recreate a clean, elegant blog layout inspired by Vercel’s blog design.

Local setup

Copy the example environment files and adjust them with your own values:

cp backend/.env.dev.example backend/.env.dev
cp frontend/.env.local.example frontend/.env.local

Docker Compose relies on these variables when starting the containers.

---

✅ Current progress

• Set up database structure with users, articles, and categories
• Create static home & article detail pages
• Generate dynamic article detail pages based on slug (/blog/[slug])
• Make homepage dynamic: fetch and display latest articles
• Add search functionality for articles based on keywords
• Add basic authentication (register / login)
• Implement user roles (reader vs author)
• Add comment system (with nesting support)
• Allow authors to create their own articles
• Allow authors to edit their own articles
• Allow authors to delete their own articles
• Allow readers to post and manage their own comments
• Add file upload support (image/video/document per article)
• Add user management from initial .txt file
• Secure form inputs and validate user data
• Ensure full mobile/desktop responsiveness
• Write simplified project documentation
• Add minimal testing coverage

---

📸 Screenshots (WIP)

/blog – static layout

🧱 Component composition + overall structure

---

/blog/[slug] – article detail layout

💡 Metadata + CTA + Vercel-inspired styling

---

/admin/article/new – article creation

✍️ Structured editor for authors to write high-quality articles

This interface provides a guided, step-by-step layout for writing blog content.
It's optimized for clarity, SEO-readiness, and a smooth authoring experience.

Key features:

• 🧱 Section-based layout:

  • Introduction
  • 3 customizable content steps
  • Quote or punchline
  • Conclusion and CTA

• 📝 Title & metadata fields:

  • H1 Title
  • Meta Title (SEO)
  • Meta Description (SEO)

• 🧠 Smart placeholders to guide the writing process in each section

• 💡 Rich text editing with Tiptap:

  • BubbleMenu with grouped formatting tools (bold, italic, strike, color, highlight)
  • Alignment, blockquote, link insertion
  • Lists (bullet, ordered)

• ➕ Block insertion modal for:

  • Images
  • Tables
  • Horizontal separators

• ✅ Clean and structured JSON payload ready for export to the backend

---

🎯 Bubble menu with minimal UI

Floating toolbar with horizontal scroll on overflow — optimized for readability and focus.

---

➕ Block insertion modal

Quickly insert visuals or layout elements without disrupting the writing flow.

---

Admin Interface /admin – Admin dashboard

---

Author Interface /editor – Author dashboard

---

Author Interface /editor/articles – Article listing and actions

---

User Settings /account/settings – Personal information and preferences