8080.AI
DesignReqsTasksUser 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!

System Requirements

System Requirement Document
Page 1 of 8

System Requirements Document for neon-template

1. Introduction

The project "neon-template" aims to develop a dynamic template rendering engine for configurable website generation. This full-stack MERN application will allow users to browse pre-built website templates, customize them through a live editor, and generate live, shareable websites rendered dynamically from JSON data.

2. System Overview

Page 2 of 8

2a. Product Interpretation and Delivery Boundary

  • Domain Descriptors:

    • Dynamic Template Rendering: The product dynamically renders templates from JSON data.
    • Live Customization: Users can customize templates live with real-time updates.

  • Project Scope:

    • Included: Dynamic rendering engine, live customization, user site management, public site viewing, and optional admin/template management.
    • Excluded: Generic e-commerce features, conventional CMS functionalities.

  • Access:

    • Application-owned identity with JWT authentication.
    • Public entry surfaces for browsing and viewing sites.

  • Behavior Contracts:

    • Dynamic Template Rendering: Renders websites or previews dynamically based on JSON data.
    • User Site Management: Displays and manages user-created sites.
    • Public Site Viewing: Renders published sites as standalone pages.
    • User Login API: Issues JWT on successful authentication.
    • Get All Templates API: Returns a list of available templates.
    • Get Template By ID API: Returns template details.
    • Get User Sites API: Returns a list of user's sites.
    • Get Public Site By Slug API: Returns published site data.
    • Create New Template: Adds new templates to the collection.
Page 3 of 8

2b. Source Content Inventory

No explicit content sources were provided.

Page 4 of 8

2c. Page Content and Component Coverage

  • Landing Page:

    • Hero section with animated headline, subtext, and CTA buttons.
    • Animated feature highlights section.
    • Template preview carousel/showcase.
    • Testimonials or "How it works" section.
    • Footer with links.
    • Fully responsive design.

  • Authentication & Registration:

    • Registration and login forms with client and server-side validation.
    • JWT authentication with password hashing.
    • Optional Google OAuth login.

  • Template Gallery:

    • Grid layout of templates with filtering and search.
    • Animated card hover effects.
    • "Preview" and "Use this Template" buttons.

  • Template Customizer:

    • Sidebar editor with dynamically generated form fields.
    • Live preview pane with real-time updates.
    • Section-by-section editing.
    • Color picker, font-family dropdown, and image upload.

  • My Sites Dashboard:

    • List of user-created sites with actions (Edit, Duplicate, Delete, etc.).
    • Empty state with CTA.

  • Public Site Viewer:

    • Renders the final published site standalone.

  • Admin/Template Management:

    • Admin view to add new templates.
Page 5 of 8

3. Functional Requirements as Story Points

  • As a user, I should be able to register and log in using JWT authentication and optionally Google OAuth. explicit
  • As a user, I should be able to browse and filter available templates in a gallery. explicit
  • As a user, I should be able to preview and customize templates live with real-time updates. explicit
  • As a user, I should be able to manage my created sites through a dashboard. explicit
  • As a guest, I should be able to view published sites via a public URL. explicit
  • As an admin, I should be able to add new templates through a management interface. explicit
  • As a user, I should be able to render templates dynamically from JSON data. explicit

4. User Personas

  • User: Primary participant for browsing, customizing, and managing sites.
  • Admin: Manages templates and site configurations.
Page 6 of 8

5. Core User Flows

  • User Registration and Login:

    1. Access the authentication page.
    2. Register or log in using email/password or Google OAuth.
    3. Receive JWT upon successful login.

  • Template Browsing and Customization:

    1. Access the template gallery.
    2. Filter and select a template.
    3. Customize the template in the live editor.
    4. Save or publish the customized site.

  • Site Management:

    1. Access the My Sites Dashboard.
    2. View, edit, duplicate, or delete sites.
    3. Copy share link or view live site.

  • Public Site Viewing:

    1. Access a public site URL.
    2. View the published site as a standalone page.
Page 7 of 8

6. Visuals Colors and Theme

  • Primary Color: #3498db
  • Primary Light: #5dade2
  • Secondary Color: #2ecc71
  • Accent Color: #e74c3c
  • Highlight Color: #f1c40f
  • Background Color: #ecf0f1
  • Surface Color: #ffffff
  • Text Color: #2c3e50
  • Text Muted Color: #95a5a6
  • Border Color: #dcdcdc

7. Signature Design Concept

The landing page will feature a clean, modern SaaS aesthetic with generous whitespace and a confident primary color. The hero section will include an animated headline and CTA buttons, with scroll-reveal animations for feature highlights. The template gallery will use card-based layouts with soft shadows and rounded corners. The customizer will have a sidebar and live-preview split layout, optimized for desktop use.

8. Interaction Model & Motion Direction

  • Landing Page: Animated with scroll-reveal animations.
  • Template Gallery: Hover scale and shadow lift animations.
  • Customizer: Smooth transitions between sections.
  • Public Site Viewer: Static for fast loading and clarity.
Page 8 of 8

9. Non-Functional Requirements

  • JWT authentication for secure access control.
  • Responsive design for mobile and desktop.
  • Real-time updates in the customizer.

10. Tech Stack

  • Frontend: React (Vite), React Router, Tailwind CSS, Framer Motion
  • Backend: Node.js, Express.js
  • Database: MongoDB (Mongoose ODM)
  • Auth: JWT + bcrypt, Google OAuth
  • File Uploads: Multer or Cloudinary
  • State Management: React Context or Redux Toolkit

11. Assumptions and Constraints

  • The application will not include generic e-commerce features or conventional CMS functionalities.
  • The customizer is optimized for desktop use, while other modules are fully responsive.

12. Glossary

  • JWT: JSON Web Token, a compact URL-safe means of representing claims to be transferred between two parties.
  • MERN: MongoDB, Express.js, React, Node.js stack for web development.
  • ODM: Object Document Mapper, a tool for managing data in MongoDB.
  • SaaS: Software as a Service, a software distribution model in which applications are hosted by a service provider and made available to customers over the internet.
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