Devlog 5 - Templates Page

Spent 4 hours and 52 minutes working on the templates page today.

This page is going to be the main place where all invitation templates are managed, so I wanted to get the basic structure done before moving on to creating more templates.

Templates Grid

The first thing I worked on was the layout. I switched the page to a responsive grid system and started building the actual templates page. I also added a Create Template card that is only visible to admins.

Clicking the card opens a modal for creating new templates.

Template Creation Modal

The modal is still incomplete, but the basic flow is now working.

Currently it has fields for:

• Template name
• HTML file name
• Preview image
• Template category
• Template fields

There’s still quite a bit of work left to do here, but at least the structure is finally in place.

Template Categories & Fields

One thing I didn’t want to do was create a completely separate form for every invitation type.

Instead, I’m building a system where templates can be configured using categories and predefined fields.

const templateCategories = [
  { id: "wedding", name: "Wedding" },
  { id: "engagement", name: "Engagement" },
  { id: "birthday", name: "Birthday" }
....
]

const templateFields = [
  {
    id: "eventTitle",
    label: "Event Title",
    type: "text",
    category: "common"
  },
  {
    id: "groomName",
    label: "Groom Name",
    type: "text",
    category: "wedding"
  }
....
]

Right now I’ve added categories for weddings, birthdays, engagements, housewarmings, baby showers and several other event types. The field system should make adding future templates a lot easier.

Small UI Improvements

I also spent some time cleaning up the page and added a footer. The site is slowly starting to look more like an actual product instead of a collection of pages.

Next

The next step is finishing the template creation page and making the field selection system fully functional.

Once that’s done, adding new templates should be much faster than it is right now.