Nestly — Babysitter & Childcare Website with Full CMS

Nestly is a full-stack babysitter and childcare website for brands that need trust, warmth, and operational control in one package. The public site follows a polished rose-and-cream childcare design — sticky navigation, wave dividers, animated stats, sitter cards, testimonial carousel, blog, newsletter, and contact booking — while a dedicated admin CMS lets you edit every homepage section, manage sitters and services, moderate inquiries, and configure SEO & analytics without touching code.

This is not a HTML template or a “pretty homepage.” You get a production Next.js 15 App Router project with TypeScript, Tailwind, Shadcn UI, Framer Motion, React Hook Form + Zod, MongoDB/Mongoose, JWT auth, local or Cloudinary image uploads, seed demo content, and Docker Compose for MongoDB + app deployment.

Why you should buy

• Ship client childcare sites faster. Design-faithful UI plus CMS, auth, SEO, and forms are already production-ready.
• Admin controls everything. Site identity, hero, about, services, sitters, testimonials, blog, newsletter, contacts, media, and full SEO/analytics config.
• SEO & marketing ready. Meta tags, Open Graph, Twitter cards, robots, Google Analytics, GTM, Search Console verification, Bing, Facebook Pixel, custom scripts, and JSON-LD.
• Pixel-perfect childcare branding. Built from a Figma Make design reference with Poppins + Dancing Script, rose accents, and responsive breakpoints.
• Host with Docker or Node. Compose files for MongoDB, seed, and app — plus local npm run dev workflow.

Who it’s for

• Babysitting agencies and nanny placement businesses
• Childcare brands launching a trust-first marketing site
• Agencies delivering white-label childcare websites to clients
• Founders who need CMS + SEO tooling without WordPress

Public website

• Full marketing homepage: TopBar, Navbar, Hero search widget, Features, About, Services, Stats count-up, How It Works, Sitters, Testimonials carousel, Blog, Newsletter, Contact, Footer
• Wave section dividers, hover card animations, Framer Motion fade-ins
• Blog listing + blog detail pages with per-post SEO fields
• Contact booking form (validated) → admin inbox
• Newsletter subscribe → admin subscriber list
• CMS-driven phone, email, address, hours, social links, and copy

Admin CMS

• Secure admin at /admin with JWT httpOnly cookie auth
• Dashboard counts for sitters, posts, contacts, subscribers
• Site Settings tabs: General, Hero, About, Newsletter, Footer, Contact, Social
• SEO & Analytics: meta, OG/Twitter, robots, GA, GTM, Search Console, Bing, Pixel, custom head/body scripts, JSON-LD
• CRUD: Features, Services, Stats, How It Works steps, Sitters, Testimonials
• Blog posts + categories with publish/featured flags and SEO fields
• Contacts inbox with status workflow (new → read → replied → archived)
• Newsletter subscribers management
• Media library with upload (local or Cloudinary) and copy URL

Technical highlights

• Next.js 15 App Router + TypeScript + Tailwind CSS + Shadcn UI
• Framer Motion animations, React Hook Form + Zod validation
• MongoDB + Mongoose models, JWT authentication
• Cloudinary or local /public/uploads image handling
• Docker Compose (app, MongoDB, optional Mongo Express, seed profile)
• Seed script with demo admin, sitters, services, blog posts, and site settings
• Figma Make design reference included under /designs

Complete feature breakdown

Homepage & visitor experience

• Trust-building contact strip with phone, email, and social channels
• Sticky responsive navigation with desktop and mobile menus
• Image-led hero with location input, care-type selector, CTA, and trust indicators
• Four benefit cards covering vetting, compassionate care, booking, and satisfaction
• About section with editable story, proof badges, image, and safety checklist
• Six service cards with editable icon, color, title, slug, and description
• Animated business statistics triggered when the section enters the viewport
• Four-step “How It Works” journey with icons and connecting line
• Featured sitter cards with profile imagery, expertise tags, ratings, and hover details
• Interactive parent testimonial carousel with rating stars and navigation controls
• Featured blog cards linked to complete article pages
• Newsletter signup with duplicate-safe MongoDB persistence
• Validated childcare inquiry form sent directly to the admin inbox
• Multi-column footer with service links, company links, contact information, and legal links

Content management

• Dashboard overview with live content and lead counts
• General branding: site name, tagline, logo text, emoji mark, and favicon
• Hero content: eyebrow text, title, highlighted title, subtitle, background image, CTA, and trust items
• About content: heading, paragraphs, safety checklist, image, proof badges, and CTA
• Contact information: phone, email, office address, and opening hours
• Social links: Facebook, X/Twitter, LinkedIn, Instagram, and Pinterest
• Feature, service, statistic, and process-step CRUD with active/inactive control
• Sitter management with photo, role, rating, reviews, tags, bio, city, care types, order, and featured status
• Testimonial management with quote, parent name, location, avatar, rating, and order
• Blog post and category management with slugs, excerpts, content, hero images, author, reading time, publication dates, and visibility flags
• Contact inbox with new, read, replied, and archived statuses
• Newsletter subscriber list with active status management
• Media library with upload, preview, and copyable asset URLs

SEO & analytics controls

• Global meta title, meta description, and meta keywords
• Open Graph title, description, and social sharing image
• Twitter/X card type and social metadata
• Canonical URL and robots index/follow controls
• Google Analytics measurement ID
• Google Tag Manager container ID
• Google Search Console verification
• Bing Webmaster Tools verification
• Facebook/Meta Pixel integration
• Custom head and body scripts
• JSON-LD structured data editor
• Per-blog-post SEO title, description, and keywords

Security & data handling

• Passwords hashed with bcrypt
• Signed JWT sessions stored in secure httpOnly cookies
• Admin pages and APIs protected by authentication middleware
• Server-side input validation and consistent API error responses
• React Hook Form + Zod validation for public and admin forms
• MongoDB models with schema validation, timestamps, unique fields, and controlled status values
• Environment-based secrets — production credentials are not committed to source

API & database modules

• Authentication: login, logout, and current-user endpoints
• Public content bundle endpoint for CMS-driven rendering
• Public contact and newsletter endpoints
• Authenticated admin CRUD APIs for all content modules
• Dashboard aggregation endpoint
• Multipart media upload endpoint
• MongoDB models for users, settings, features, services, stats, process steps, sitters, testimonials, blog categories, blog posts, contacts, subscribers, and media

Responsive design

• Desktop, tablet, and mobile layouts based on 1024px, 768px, and 520px breakpoints
• Responsive grids for services, sitters, features, steps, blog cards, stats, contact, and footer
• Mobile navigation menu and touch-friendly controls
• Fluid typography using CSS clamp values
• Optimized responsive images through Next.js Image

Installation & deployment

1. Copy .env.example to .env.
2. Set the MongoDB connection, JWT secret, admin account, and optional Cloudinary credentials.
3. Run npm install.
4. Run npm run seed to create the demo admin and starter content.
5. Run npm run dev for local development or use the included Docker Compose configuration.

Docker workflow

docker compose up -d mongo
docker compose --profile seed run --rm seed
docker compose -f docker-compose.yml -f docker-compose.dev.yml up --build app

System requirements

• Node.js 20 or newer
• npm 10 or newer
• MongoDB 7, local MongoDB, or MongoDB Atlas
• Docker Desktop / Docker Engine for container deployment
• Optional Cloudinary account for hosted image storage

What is included

• Complete and editable Next.js source code
• Public childcare website and blog
• Secure admin CMS with all management modules
• MongoDB schemas and starter-data seed script
• Public and protected API routes
• Dockerfiles and Docker Compose configurations
• Environment variable template
• Installation README and detailed testing checklist
• Original Figma Make design reference

Customization

All brand colors are defined as reusable Tailwind design tokens. Typography, spacing, content, imagery, services, sitters, statistics, testimonials, contact details, social links, and SEO settings can be changed without rebuilding the architecture. Developers can extend the existing Mongoose models and App Router APIs for bookings, payments, parent accounts, or sitter portals.

Important notes

• Demo photographs are loaded from Unsplash and should be replaced or independently licensed for production use.
• Cloudinary credentials, analytics IDs, verification tokens, and production secrets are not included.
• The hero search widget is presentation-ready; connect it to location-based sitter search if marketplace matching is required.
• No third-party paid service subscription is included with the source package.

Documentation & support

The package includes setup instructions, environment configuration guidance, Docker commands, demo credentials, and a comprehensive QA checklist. Buyers receive the full source code for customization and deployment.