BrainNest - Educational Toys & Games Store HTML & CSS App with Payload CMS preview 1

BrainNest - Educational Toys & Games Store HTML & CSS App with Payload CMS

bookmark

BrainNest is an HTML template for an online store selling educational toys and games, adapted from the BeShop e-commerce template and built with the Bootstrap framework. The template includes 41 pages covering core e-commerce workflows s...

HTML

Project Overview

BrainNest is an HTML template for an online store selling educational toys and games, adapted from the BeShop e-commerce template and built with the Bootstrap framework. The template includes 41 pages covering core e-commerce workflows such as registration/login, shopping cart, and product display, along with a Payload CMS (Next.js-based) backend management system for quickly building a complete toy e-commerce website.

Tech Stack

  • Bootstrap 5 (Frontend UI Framework)
  • HTML5 / CSS3 / SCSS
  • jQuery
  • Swiper (Carousel Component)
  • Payload CMS (Node.js Headless CMS)
  • Next.js (CMS Management Frontend)
  • MongoDB (CMS Data Storage)

Project Structure

text
brainnesthtml-10/
├── app-documentation/          # HTML Template Documentation
│   ├── index.html
│   └── assets/css/style.css
├── cms-documentaion/           # Payload CMS Setup Documentation
│   ├── index.html
│   └── assets/
├── html/                       # Frontend Page Examples
│   ├── index.html              # Onboarding Guide Page
│   ├── css/index.css
│   └── assets/
├── payload-cms/                # Payload CMS Backend
│   └── brainnest/
│       ├── src/
│       ├── package.json
│       └── docker-compose.yml
└── __MACOSX/                   # macOS Metadata Files

Key File Descriptions

  • app-documentation/index.html — Official HTML template documentation, including page structure, CSS architecture, and customization instructions
  • cms-documentaion/index.html — Payload CMS installation and deployment guide, including database configuration and project setup steps
  • html/index.html — App onboarding page example, featuring Swiper carousel and login entry
  • payload-cms/brainnest/src/ — Payload CMS core source code directory, containing CMS configuration and data models
  • payload-cms/brainnest/package.json — CMS project dependency definitions (Next.js + Payload)
  • payload-cms/brainnest/docker-compose.yml — Docker containerized deployment configuration

Quick Start

Frontend Template (Static Pages)

Open html/index.html directly in a browser, or start any static server:

bash
cd html
python -m http.server 8080
# Visit http://localhost:8080

Payload CMS Backend

bash
cd payload-cms/brainnest
npm install
# Configure DATABASE_URI and PAYLOAD_SECRET in .env
npm run dev

Usage Recommendations

This template is suitable for developing e-commerce websites in the educational toys and puzzle games category. For full e-commerce functionality, it is recommended to use the included Payload CMS backend (requires a self-prepared MongoDB database). The CMS documentation provides a complete workflow from environment setup to Docker deployment.

help_outline

FAQ