8080.AI
DesignReqs
Tasks
User FlowArchitecture
Log inSign up for free

neon-template

byHemitha Kp

Project: Dynamic Template Rendering Engine for Configurable Website Generation Project Overview Build a full-stack MERN application that lets users browse pre-built website templates, customize them through a live editor (text, colors, fonts, images), and generate a live, shareable website — all rendered dynamically from JSON data rather than hardcoded pages. Tech Stack Frontend: React (Vite), React Router, Tailwind CSS, Framer Motion (animations) Backend: Node.js, Express.js Database: MongoDB (Mongoose ODM) Auth: JWT + bcrypt for password hashing File uploads: Multer (or Cloudinary if you want hosted image URLs) State management: React Context or Redux Toolkit (Context is enough for this scope) Module Breakdown 1. Landing Page Module Hero section with animated headline, subtext, and CTA buttons ("Get Started", "Browse Templates") Animated feature highlights section (3-4 cards: "Pick a Template", "Customize Live", "Publish Instantly") using scroll-triggered Framer Motion animations Template preview carousel/showcase (auto-scrolling or swipeable) Testimonials or "How it works" 3-step visual section Footer with links Fully responsive (mobile-first) 2. Authentication & Registration Module Register: name, email, password (with client + server-side validation), password confirmation Login: email + password, JWT issued on success, stored in httpOnly cookie or localStorage Protected routes: dashboard, customizer, and save actions require auth (React route guards + Express middleware) Password security: bcrypt hashing, never store plaintext Optional stretch: forgot-password flow with email reset link, Google OAuth login 3. Template Gallery Module Grid/card layout of available templates with thumbnail, name, category tag Category filter (Portfolio, Business, Event, Blog, etc.) and search bar Animated card hover effects (scale/shadow transitions) "Preview" button (opens read-only live preview) and "Use this Template" button (opens customizer) 4. Template Customizer Module (core feature) Sidebar editor with dynamically generated form fields based on the selected template's schema (heading text, subheading, colors, font choice, image upload per section) Live preview pane on the same screen — updates in real time as fields change (no page reload) Section-by-section editing (Hero, About, Services, Gallery, Contact, Footer — whichever sections the template defines) Color picker component, font-family dropdown, image upload with preview "Save" and "Save & Publish" actions 5. Dynamic Rendering Engine (the core architecture) A single React rendering component that takes templateStructure (JSON schema) + userCustomizations (JSON data) as props and renders the appropriate section components dynamically (e.g., <HeroSection>, <AboutSection>, <ContactSection>) based on what the template defines This is the piece to emphasize in your report/demo — one engine renders any template with any data, instead of separate hardcoded pages per template 6. My Sites Dashboard Module List of all sites the logged-in user has created (thumbnail, name, last updated, published/draft status) Actions: Edit, Duplicate, Delete, View Live, Copy Share Link Empty state with CTA when user has no sites yet 7. Public Site Viewer Module Route like /site/:slug that renders the final published site standalone (no editor UI, no app chrome) — this is what gets shared Should load fast and look like a real deployed website, not an "app screen" 8. Admin/Template Management Module (optional but adds depth) Simple admin view to add new templates (define sections + editable fields as JSON) — this shows you understand the template schema deeply and gives you something extra to demo Can be a simple protected route, doesn't need a full role system unless you want one Animation Guidelines (Framer Motion) Page transitions: fade/slide between routes Landing page: scroll-reveal animations for sections (whileInView) Template gallery cards: hover scale + shadow lift Customizer: smooth transitions when switching between sections being edited Live preview: subtle animated highlight when a field updates, so the user visually sees what changed Design Guidelines Clean, modern SaaS aesthetic — generous whitespace, a confident primary color + neutral grays, one accent color for CTAs Consistent typography scale (e.g., Inter or Poppins from Google Fonts) Card-based layouts with soft shadows and rounded corners for template gallery and dashboard Sidebar + live-preview split layout for the customizer (roughly 30/70 split) Fully responsive — at minimum, the landing page, gallery, and dashboard should work well on mobile; the customizer can be desktop-optimized if needed (common in real builder tools) Database Schema (Mongoose) User: { name, email, passwordHash, createdAt } Template: { name, category, thumbnail, structure: [ { sectionType, editableFields: [{ fieldName, fieldType, defaultValue }] } ] } UserSite: { userId, templateId, siteName, slug, customizations: { sectionId: { fieldName: value } }, theme: { primaryColor, font }, status: "draft" | "published", createdAt, updatedAt } API Endpoints (Express) POST /api/auth/register POST /api/auth/login GET /api/templates GET /api/templates/:id POST /api/templates (admin) GET /api/sites (user's own sites) POST /api/sites (create/save) PUT /api/sites/:id (update customizations) DELETE /api/sites/:id GET /api/sites/public/:slug (public viewer, no auth) Suggested Folder Structure /client /src /components (Navbar, TemplateCard, SectionRenderer, ColorPicker...) /pages (Landing, Gallery, Customizer, Dashboard, PublicSite, Login, Register) /context (AuthContext) /hooks /server /models (User, Template, UserSite) /routes /controllers /middleware (auth.js)

Landing PageTemplate GalleryAuthentication & RegistrationTemplate CustomizerMy Sites Dashboard
Landing Page

Comments (0)

No comments yet. Be the first!

Project Tasks

11
#1

Setup Authentication System

To Do

As a developer, I want to implement user registration and login using JWT authentication to ensure secure access to the application. Implementation contract: - Outcome: Setup Authentication System - Requirement sources: - src-6da83d6cb8a1d00e - src-5843ad1e242f0805 - src-5b6b6d2005137747 - src-0aea038c1f429c4f - src-393529049602f2c9 - src-e81bd92bf6b0ca3c - src-35a1e011ea1d6756 - src-ecada4a4078c8c9c - src-e05d1f932a6718a9 - src-3d5a28d19654084f - src-ddc40fd8e882179f - src-67a6194b85d24e62 - 5 additional source record(s) are retained in the structured implementation contract. - Owned behavior: - As a developer, I want to implement user registration and login using JWT authentication to ensure secure access to the application. - User registration and login - User Login API (User) — trigger: User submits login data to POST /api/auth/login; inputs: email, password; outcomes: JWT issued on successful authentication - User Site Management (User) — trigger: User accesses My Sites Dashboard; inputs: User authentication (JWT), User ID; outcomes: List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link) - Public Site Viewing (Guest) — trigger: Guest visits a public site URL (/site/:slug); inputs: Site slug; outcomes: Published site rendered as standalone page - Create New Template (Admin) — trigger: Admin submits new template data via admin/template management interface or POST /api/templates; inputs: Template name, Category, Thumbnail, Structure (sections and editable fields as JSON schema); outcomes: New template is added to the template collection and available for users - User registration and login with JWT authentication. - Provide authoritative application identity, session, and current-user access state. - Enforce the accepted privileged-access distinctions and authorization decisions. - Interfaces: - POST /api/auth/register - POST /api/auth/login - Input contract for User Login API: email, password - Input contract for User Site Management: User authentication (JWT), User ID - Input contract for Public Site Viewing: Site slug - Input contract for Create New Template: Template name, Category, Thumbnail, Structure (sections and editable fields as JSON schema) - Provide user.registration.login: User registration and login with JWT authentication. - Provide identity.access.management: Provide authoritative application identity, session, and current-user access state. - Provide identity.authorization: Enforce the accepted privileged-access distinctions and authorization decisions. - State transitions: - User account creation - JWT token issuance - When User submits login data to POST /api/auth/login: JWT issued on successful authentication - When User accesses My Sites Dashboard: List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link) - When Guest visits a public site URL (/site/:slug): Published site rendered as standalone page - When Admin submits new template data via admin/template management interface or POST /api/templates: Template document created in database - Failure and safety behavior: - Invalid credentials - Account already exists - If User Login API cannot complete: Login error response. - If User Site Management cannot complete: Dashboard error message. - If Public Site Viewing cannot complete: Site not found or unavailable message. - If Create New Template cannot complete: Template creation error message. - Use authoritative session/current-user state, enforce access server-side, and fail closed without exposing prototype identity data. - Web research: - JWT authentication setup - bcrypt password hashing Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - Successful registration and login - JWT token returned - When User submits login data to POST /api/auth/login, User produces JWT issued on successful authentication. - When User accesses My Sites Dashboard, User produces List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link). - User Site Management includes the required human touchpoint: My Sites Dashboard. - When Guest visits a public site URL (/site/:slug), Guest produces Published site rendered as standalone page. - Public Site Viewing includes the required human touchpoint: Public Site Viewer. - When Admin submits new template data via admin/template management interface or POST /api/templates, Admin produces New template is added to the template collection and available for users. - Create New Template includes the required human touchpoint: Admin/Template Management Page. - Capability user.registration.login implements User registration and login with JWT authentication. and is verified through its declared interfaces. - Capability identity.access.management implements Provide authoritative application identity, session, and current-user access state. and is verified through its declared interfaces. - Capability identity.authorization implements Enforce the accepted privileged-access distinctions and authorization decisions. and is verified through its declared interfaces.

AI 70%
Human 30%
High Priority
3 days
Backend Developer
#2

Define Database Schema

To Do

As a developer, I want to define the database schema for users, templates, and user sites to ensure data is stored correctly. Implementation contract: - Outcome: Define Database Schema - Requirement sources: - src-6da83d6cb8a1d00e - src-5843ad1e242f0805 - src-5b6b6d2005137747 - src-0aea038c1f429c4f - src-5335696078ec74fb - src-a6d43f2f52f1cde1 - src-750f97e68156378a - src-e05d1f932a6718a9 - src-282ed9c28ea65ea8 - src-ecada4a4078c8c9c - Owned behavior: - As a developer, I want to define the database schema for users, templates, and user sites to ensure data is stored correctly. - Data persistence for users, templates, and user sites - User Site Management (User) — trigger: User accesses My Sites Dashboard; inputs: User authentication (JWT), User ID; outcomes: List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link) - Create New Template (Admin) — trigger: Admin submits new template data via admin/template management interface or POST /api/templates; inputs: Template name, Category, Thumbnail, Structure (sections and editable fields as JSON schema); outcomes: New template is added to the template collection and available for users - Manage user's created sites. - Admin view for managing templates. - Interfaces: - MongoDB via Mongoose ODM - Input contract for User Site Management: User authentication (JWT), User ID - Input contract for Create New Template: Template name, Category, Thumbnail, Structure (sections and editable fields as JSON schema) - Provide user.site.management: Manage user's created sites. - Provide admin.template.management: Admin view for managing templates. - State transitions: - Data creation, update, and deletion - When User accesses My Sites Dashboard: List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link) - When Admin submits new template data via admin/template management interface or POST /api/templates: Template document created in database - Failure and safety behavior: - Schema validation errors - Data integrity issues - If User Site Management cannot complete: Dashboard error message. - If Create New Template cannot complete: Template creation error message. - Web research: - Mongoose schema design Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - Schema supports all required data operations - Data integrity maintained - When User accesses My Sites Dashboard, User produces List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link). - User Site Management includes the required human touchpoint: My Sites Dashboard. - When Admin submits new template data via admin/template management interface or POST /api/templates, Admin produces New template is added to the template collection and available for users. - Create New Template includes the required human touchpoint: Admin/Template Management Page. - Capability user.site.management implements Manage user's created sites. and is verified through its declared interfaces. - Capability admin.template.management implements Admin view for managing templates. and is verified through its declared interfaces.

AI 60%
Human 40%
Medium Priority
2 days
Data Engineer
#4

Implement Shared Navbar

To Do

As a Frontend Developer, implement the shared Navbar component from its approved JSX/CSS design and reuse it across all declared pages without duplicating local variants. Implementation contract: - Outcome: Implement Shared Navbar - Owned behavior: - As a Frontend Developer, implement the shared Navbar component from its approved JSX/CSS design and reuse it across all declared pages without duplicating local variants. - Implement shared design sections: Navbar. Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - The shared Navbar component renders once and is reused by every declared consuming page.

AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#5

Implement Shared Footer

To Do

As a Frontend Developer, implement the shared Footer component from its approved JSX/CSS design and reuse it across all declared pages without duplicating local variants. Implementation contract: - Outcome: Implement Shared Footer - Owned behavior: - As a Frontend Developer, implement the shared Footer component from its approved JSX/CSS design and reuse it across all declared pages without duplicating local variants. - Implement shared design sections: Footer. Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - The shared Footer component renders once and is reused by every declared consuming page.

AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#11

Implement the accepted behavior User Login API with authoritative outcomes and failure handling

To Do

Implement and verify the project capability `accepted.behavior.35fffd29c883557b` required by generated downstream tasks. Expose a stable implementation contract and satisfy every linked consumer without frontend mocks. Implementation contract: - Outcome: Implement Accepted Behavior 35Fffd29C883557B Capability - Requirement sources: - src-393529049602f2c9 - src-e81bd92bf6b0ca3c - src-08dbd0972089e487 - Owned behavior: - Implement and verify the project capability `accepted.behavior.35fffd29c883557b` required by generated downstream tasks. Expose a stable implementation contract and satisfy every linked consumer without frontend mocks. - Implement and expose capability accepted.behavior.35fffd29c883557b. - Implement the accepted behavior User Login API with authoritative outcomes and failure handling. - User Login API (User) — trigger: User submits login data to POST /api/auth/login; inputs: email, password; outcomes: JWT issued on successful authentication - Interfaces: - Provide accepted.behavior.35fffd29c883557b. - Provide accepted.behavior.35fffd29c883557b: Implement the accepted behavior User Login API with authoritative outcomes and failure handling. - Input contract for User Login API: email, password - State transitions: - When User submits login data to POST /api/auth/login: JWT issued on successful authentication - Failure and safety behavior: - If User Login API cannot complete: Login error response. Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - Capability accepted.behavior.35fffd29c883557b has one active implementation owner and every declared consumer can use its verified interface. - Capability accepted.behavior.35fffd29c883557b implements Implement the accepted behavior User Login API with authoritative outcomes and failure handling. and is verified through its declared interfaces. - When User submits login data to POST /api/auth/login, User produces JWT issued on successful authentication.

AI 80%
Human 20%
High Priority
2 days
Backend Developer
#3

Implement API Endpoints

To Do

As a developer, I want to implement API endpoints for templates and user sites to enable CRUD operations. Implementation contract: - Outcome: Implement API Endpoints - Requirement sources: - src-6da83d6cb8a1d00e - src-5843ad1e242f0805 - src-5b6b6d2005137747 - src-0aea038c1f429c4f - src-5335696078ec74fb - src-a6d43f2f52f1cde1 - src-750f97e68156378a - src-e05d1f932a6718a9 - src-794cd6640311b5eb - src-e471bc181528d871 - src-3d5a28d19654084f - src-282ed9c28ea65ea8 - 1 additional source record(s) are retained in the structured implementation contract. - Owned behavior: - As a developer, I want to implement API endpoints for templates and user sites to enable CRUD operations. - CRUD operations for templates and user sites - User Site Management (User) — trigger: User accesses My Sites Dashboard; inputs: User authentication (JWT), User ID; outcomes: List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link) - Public Site Viewing (Guest) — trigger: Guest visits a public site URL (/site/:slug); inputs: Site slug; outcomes: Published site rendered as standalone page - Create New Template (Admin) — trigger: Admin submits new template data via admin/template management interface or POST /api/templates; inputs: Template name, Category, Thumbnail, Structure (sections and editable fields as JSON schema); outcomes: New template is added to the template collection and available for users - Render and share published sites. - Interfaces: - GET /api/templates - GET /api/templates/:id - POST /api/templates - GET /api/sites - POST /api/sites - PUT /api/sites/:id - DELETE /api/sites/:id - Input contract for User Site Management: User authentication (JWT), User ID - Input contract for Public Site Viewing: Site slug - Input contract for Create New Template: Template name, Category, Thumbnail, Structure (sections and editable fields as JSON schema) - Provide public.site.viewing: Render and share published sites. - State transitions: - Data retrieval, creation, update, and deletion - When User accesses My Sites Dashboard: List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link) - When Guest visits a public site URL (/site/:slug): Published site rendered as standalone page - When Admin submits new template data via admin/template management interface or POST /api/templates: Template document created in database - Failure and safety behavior: - API request errors - Data not found - If User Site Management cannot complete: Dashboard error message. - If Public Site Viewing cannot complete: Site not found or unavailable message. - If Create New Template cannot complete: Template creation error message. - Web research: - Express.js API design Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - API endpoints return correct data - CRUD operations function as expected - When User accesses My Sites Dashboard, User produces List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link). - User Site Management includes the required human touchpoint: My Sites Dashboard. - When Guest visits a public site URL (/site/:slug), Guest produces Published site rendered as standalone page. - Public Site Viewing includes the required human touchpoint: Public Site Viewer. - When Admin submits new template data via admin/template management interface or POST /api/templates, Admin produces New template is added to the template collection and available for users. - Create New Template includes the required human touchpoint: Admin/Template Management Page. - Capability public.site.viewing implements Render and share published sites. and is verified through its declared interfaces.

Depends on:#2
Waiting for dependencies
AI 65%
Human 35%
High Priority
4 days
Backend Developer
#6

Implement Landing Page

To Do

As a Frontend Developer, implement the approved Landing Page page design and the task-owned sections below. Implementation contract: - Outcome: Implement Landing Page - Requirement sources: - src-7f4a1bdc63b7501e - src-2634ce11ee228e43 - src-dd58a97b2a77b2af - src-b7b245bb9ed9faaf - src-c66400ab11b30e20 - src-35a1e011ea1d6756 - src-ecada4a4078c8c9c - src-e05d1f932a6718a9 - src-3d5a28d19654084f - src-ddc40fd8e882179f - src-67a6194b85d24e62 - src-fbdaae7c037d81bd - 1 additional source record(s) are retained in the structured implementation contract. - Owned behavior: - visible and interactive behavior owned by these sections - Interfaces: - Consume identity.access.management: Provide authoritative application identity, session, and current-user access state. Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - observable task-owned checks - Capability identity.access.management implements Provide authoritative application identity, session, and current-user access state. and is verified through its declared interfaces.

Depends on:#4#5#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
2.5 days
Frontend Developer
#7

Implement Authentication & Registration page

To Do

As a Frontend Developer, implement the approved Authentication & Registration page design and the task-owned sections below. Implementation contract: - Outcome: Implement Authentication & Registration page - Requirement sources: - src-393529049602f2c9 - src-e81bd92bf6b0ca3c - src-6da83d6cb8a1d00e - src-5843ad1e242f0805 - src-5b6b6d2005137747 - src-0aea038c1f429c4f - src-35a1e011ea1d6756 - src-ecada4a4078c8c9c - src-e05d1f932a6718a9 - src-3d5a28d19654084f - src-ddc40fd8e882179f - src-67a6194b85d24e62 - 3 additional source record(s) are retained in the structured implementation contract. - Owned behavior: - Toggle login/register mode - Input email and password - Submit authentication request - Handle server response and route to destination - User Login API (User) — trigger: User submits login data to POST /api/auth/login; inputs: email, password; outcomes: JWT issued on successful authentication - Interfaces: - /api/auth/login - /api/auth/register - Input contract for User Login API: email, password - Consume user.registration.login: User registration and login with JWT authentication. - Consume identity.access.management: Provide authoritative application identity, session, and current-user access state. - Consume accepted.behavior.35fffd29c883557b: Implement the accepted behavior User Login API with authoritative outcomes and failure handling. - State transitions: - JWT issued on successful authentication - User routed to role-appropriate destination - When User submits login data to POST /api/auth/login: JWT issued on successful authentication - Failure and safety behavior: - Authentication failed. Please check your details and try again. - Unable to reach the server. Please check your connection and try again. - If User Login API cannot complete: Login error response. Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - AuthenticationPanel renders once - Mode toggle, email and password inputs with validation - Password strength indicator in register mode - Submit button with loading state - OAuth sign-in option - Correct backend integration and routing - When User submits login data to POST /api/auth/login, User produces JWT issued on successful authentication. - Capability user.registration.login implements User registration and login with JWT authentication. and is verified through its declared interfaces. - Capability identity.access.management implements Provide authoritative application identity, session, and current-user access state. and is verified through its declared interfaces. - Capability accepted.behavior.35fffd29c883557b implements Implement the accepted behavior User Login API with authoritative outcomes and failure handling. and is verified through its declared interfaces.

Depends on:#11#5#4#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#8

Implement Template Gallery page

To Do

As a Frontend Developer, implement the approved Template Gallery page design and the task-owned sections below. Implementation contract: - Outcome: Implement Template Gallery page - Requirement sources: - src-4dc092a4b0804767 - src-6663b2863de79c9f - src-6da83d6cb8a1d00e - src-5843ad1e242f0805 - src-5b6b6d2005137747 - src-0aea038c1f429c4f - src-35a1e011ea1d6756 - src-ecada4a4078c8c9c - src-e05d1f932a6718a9 - src-3d5a28d19654084f - src-ddc40fd8e882179f - src-67a6194b85d24e62 - 2 additional source record(s) are retained in the structured implementation contract. - Owned behavior: - Display and filter available templates - Hover card animation - Click Preview button - Click Use this Template button - Responsive grid reflow - Get All Templates API (User) — trigger: GET request to /api/templates; inputs: User authentication (optional); outcomes: List of available templates returned - Display and filter available templates. - Interfaces: - GET /api/templates - Input contract for Get All Templates API: User authentication (optional) - Provide template.gallery.display: Display and filter available templates. - Consume identity.access.management: Provide authoritative application identity, session, and current-user access state. - State transitions: - User selects a category filter, observable change in displayed templates - User selects 'Use this Template' and is routed based on authentication - When GET request to /api/templates: List of available templates returned - Failure and safety behavior: - Error message if template data fails to load - Error response if fetch fails - If Get All Templates API cannot complete: Error response if fetch fails. Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - GalleryHeader and GalleryFilters sections render correctly with specified interactions and design - observable task-owned checks - When GET request to /api/templates, User produces List of available templates returned. - Capability template.gallery.display implements Display and filter available templates. and is verified through its declared interfaces. - Capability identity.access.management implements Provide authoritative application identity, session, and current-user access state. and is verified through its declared interfaces.

Depends on:#4#1#5
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#9

Implement Template Customizer page

To Do

As a Frontend Developer, implement the approved Template Customizer page design and the task-owned sections below. Implementation contract: - Outcome: Implement Template Customizer page - Requirement sources: - src-6da83d6cb8a1d00e - src-5843ad1e242f0805 - src-5b6b6d2005137747 - src-0aea038c1f429c4f - src-a7a1b30327c7d94e - src-9960ed299e6e168b - src-35a1e011ea1d6756 - src-ecada4a4078c8c9c - src-e05d1f932a6718a9 - src-3d5a28d19654084f - src-ddc40fd8e882179f - src-67a6194b85d24e62 - 5 additional source record(s) are retained in the structured implementation contract. - Owned behavior: - Load selected template and provide real-time editor interface for customizing all editable sections, with live preview and save/publish actions - Dynamic Template Rendering (Application) — trigger: User or system requests rendering of a site or preview from template and customization data; inputs: templateStructure (JSON schema), userCustomizations (JSON data); outcomes: Website or preview rendered dynamically based on provided data - Get Template By ID API (User) — trigger: GET request to /api/templates/:id; inputs: Template ID; outcomes: Template details returned - Render templates dynamically from JSON data. - Implement the accepted behavior Get Template By ID API with authoritative outcomes and failure handling. - Interfaces: - GET /api/templates/:id - POST /api/sites - Input contract for Dynamic Template Rendering: templateStructure (JSON schema), userCustomizations (JSON data) - Input contract for Get Template By ID API: Template ID - Provide dynamic.template.rendering: Render templates dynamically from JSON data. - Consume identity.access.management: Provide authoritative application identity, session, and current-user access state. - Provide accepted.behavior.3ed2466403510a9e: Implement the accepted behavior Get Template By ID API with authoritative outcomes and failure handling. - State transitions: - User saves or publishes the customized site - When User or system requests rendering of a site or preview from template and customization data: Website or preview rendered dynamically based on provided data - When GET request to /api/templates/:id: Template details returned - Failure and safety behavior: - Rendering error message - Validation error message - If Dynamic Template Rendering cannot complete: Rendering error message. - If Get Template By ID API cannot complete: Error response if not found. Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - The Template Customizer page must render exactly once when accessed by a logged-in user. - The sidebar editor must dynamically generate form fields based on the template structure. - Changes must sync in real-time with the live preview pane. - The Save Site and Publish Site buttons must validate all required fields and interact with the backend via the Create Site API. - The page must handle empty/loading states and provide validation feedback for required/invalid fields. - Access is restricted to logged-in users. - When User or system requests rendering of a site or preview from template and customization data, Application produces Website or preview rendered dynamically based on provided data. - Dynamic Template Rendering includes the required human touchpoint: Customizer page. - Dynamic Template Rendering includes the required human touchpoint: Public Site Viewer. - When GET request to /api/templates/:id, User produces Template details returned. - Capability dynamic.template.rendering implements Render templates dynamically from JSON data. and is verified through its declared interfaces. - Capability identity.access.management implements Provide authoritative application identity, session, and current-user access state. and is verified through its declared interfaces. - Capability accepted.behavior.3ed2466403510a9e implements Implement the accepted behavior Get Template By ID API with authoritative outcomes and failure handling. and is verified through its declared interfaces.

Depends on:#8#4#5#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
3 days
Frontend Developer
#10

Implement My Sites Dashboard page

To Do

As a Frontend Developer, implement the approved My Sites Dashboard page design and the task-owned sections below. Implementation contract: - Outcome: Implement My Sites Dashboard page - Requirement sources: - src-5335696078ec74fb - src-a6d43f2f52f1cde1 - src-750f97e68156378a - src-e05d1f932a6718a9 - src-6da83d6cb8a1d00e - src-5843ad1e242f0805 - src-5b6b6d2005137747 - src-0aea038c1f429c4f - src-35a1e011ea1d6756 - src-ecada4a4078c8c9c - src-3d5a28d19654084f - src-ddc40fd8e882179f - 5 additional source record(s) are retained in the structured implementation contract. - Owned behavior: - Display and manage user-created sites with CRUD actions - Navigate to template gallery from 'Create New Site' CTA - User Site Management (User) — trigger: User accesses My Sites Dashboard; inputs: User authentication (JWT), User ID; outcomes: List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link) - Interfaces: - GET /api/sites - POST /api/sites - PUT /api/sites/:id - DELETE /api/sites/:id - Input contract for User Site Management: User authentication (JWT), User ID - Consume user.site.management: Manage user's created sites. - Consume identity.access.management: Provide authoritative application identity, session, and current-user access state. - Consume identity.authorization: Enforce the accepted privileged-access distinctions and authorization decisions. - State transitions: - User selects a site card to edit, duplicate, delete, or view live - User confirms or cancels site deletion - When User accesses My Sites Dashboard: List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link) - Failure and safety behavior: - Dashboard error message if sites cannot be loaded - If User Site Management cannot complete: Dashboard error message. Acceptance criteria: - The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions. - Render My Sites Dashboard with DashboardHeader and SitesListSection - Ensure 'Create New Site' button navigates to template gallery - Display site stats and manage site actions with state handling - Maintain design structure and theme - Integrate with backend endpoints for site management - Restrict access to authenticated users - When User accesses My Sites Dashboard, User produces List of user's created sites displayed with actions (Edit, Duplicate, Delete, View Live, Copy Share Link). - User Site Management includes the required human touchpoint: My Sites Dashboard. - Capability user.site.management implements Manage user's created sites. and is verified through its declared interfaces. - Capability identity.access.management implements Provide authoritative application identity, session, and current-user access state. and is verified through its declared interfaces. - Capability identity.authorization implements Enforce the accepted privileged-access distinctions and authorization decisions. and is verified through its declared interfaces.

Depends on:#2#9#5#1#4
Waiting for dependencies
AI 90%
Human 10%
High Priority
3 days
Frontend Developer
Landing Page design preview
Authentication & Registration: admin logs in
Admin/Template Management: admin creates a new template
Landing Page design preview
Authentication & Registration: admin logs in
Admin/Template Management: admin creates a new template