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)