Yoga Studio Template

Overview

Yoga Studio is a production-ready, full-stack website template designed for yoga studios, fitness centers, and wellness businesses. Built with Next.js 16, React 19, MongoDB, and Tailwind CSS 4, it provides a stunning public-facing landing page and a powerful admin dashboard for complete content management.

Every element of the public website — from hero banners to team members, gallery images, class schedules, and more — is fully manageable through the admin panel without writing a single line of code.

Tech Stack

Features

Public Website

• Responsive landing page with 15+ configurable sections
• Hero banner with dynamic content
• About Us & Founder sections
• Types of Yoga showcase with icons
• Classes & Programs display
• Yoga at Home section
• Image & Video galleries
• Why Choose Us section with stats
• Pricing plans
• Testimonials & FAQ sections
• Contact form with submissions management
• Newsletter subscription
• Team member directory
• SEO metadata management
• Dark/Light theme support

Admin Dashboard

• Secure JWT-based authentication
• Dashboard with real-time statistics
• Full CRUD for all content types
• Drag-and-drop reordering
• Active/Inactive status toggle
• Rich text editor (SunEditor)
• Image upload with Cloudinary integration
• Contact & subscription management
• Business hours configuration
• General settings (logo, favicon, social links)
• SEO metadata editor
• Terms & Privacy policy editor
• Page banner management

Requirements

Installation

Step 1: Clone the Repository

git clone <repository-url>
cd template-yoga

Step 2: Install Dependencies

pnpm install

Step 3: Configure Environment Variables

Create a .env file in the root directory (see Environment Variables section below).

Step 4: Run the Development Server

pnpm dev

The application will start at http://localhost:3000.

Step 5: Build for Production

pnpm build
pnpm start

Environment Variables

Create a .env file in the project root with the following variables:

Default Admin Credentials

On first startup, the application seeds a default admin account:

Available Scripts

Project Structure

Database Models

The application uses MongoDB with Mongoose ODM. Below are all 11 collections and their schemas.

User

Yoga

Team

YogaSchedule

Gallery

VideoGallery

Banner

HomeSection

Settings (Singleton)

Subscribe

Contactus

Authentication System

The application uses JWT-based authentication with NextAuth 5.

Login Flow

1. Admin submits email and password to POST /api/admin/auth/login
2. Server verifies credentials against bcrypt-hashed password in database
3. On success, a JWT token is generated with 30-day expiration
4. Token payload contains: { email, role: 'admin' }
5. Client stores the token and sends it in subsequent requests via Authorization: Bearer {token} header

Route Protection

• Admin API routes use the asyncHandler() middleware with authentication enabled
• JWT is verified on every request using the NEXTAUTH_SECRET
• Invalid or expired tokens return 401 Unauthorized
• User data is extracted from the token and attached to the request context

Password Security

• Passwords are hashed using bcrypt with 10 salt rounds
• Password change requires the current password for verification
• New password confirmation is enforced via Zod validation

Cloudinary Integration

All media files (images and videos) are stored on Cloudinary CDN for optimized delivery and management.

Setup

1. Create a free account at cloudinary.com
2. Navigate to Admin Dashboard > Settings in your application
3. Enter your Cloudinary credentials: Cloud Name, API Key, API Secret
4. Set a Folder Name for organized storage
5. Enter the Secure URL Base (e.g., https://res.cloudinary.com/your-cloud)

Features

• Automatic image optimization and responsive delivery
• Secure URL generation for all assets
• Folder-based organization
• Upload and delete operations via the admin panel
• File type and size validation before upload

Utility Functions

API Reference: Authentication

Base URL: /api/admin/auth

POST /api/admin/auth/login

Request body:

{
  "email": "admin@example.com",
  "password": "ChangeMe123!"
}

Success response:

{
  "success": true,
  "data": { "token": "eyJhbGciOiJIUzI1NiIs..." }
}

PUT /api/admin/auth/password

Request body:

{
  "oldPassword": "ChangeMe123!",
  "newPassword": "NewSecurePass456!",
  "confirmPassword": "NewSecurePass456!"
}

API Reference: Yoga Management

Base URL: /api/admin/yoga — All endpoints require Bearer token authentication.

Create/Update Yoga (multipart/form-data)

Reorder (PUT /api/admin/yoga/sort)

{ "sortedIds": ["id1", "id2", "id3"] }

Toggle Status (PUT /api/admin/yoga/status/:id)

{ "status": true }

API Reference: Team Management

Base URL: /api/admin/team — All endpoints require Bearer token authentication.

Create/Update Team Member (multipart/form-data)

API Reference: Gallery Management

Base URL: /api/admin/gallery — All endpoints require Bearer token authentication.

API Reference: Video Gallery Management

Base URL: /api/admin/video-gallery — All endpoints require Bearer token authentication.

API Reference: Yoga Schedule Management

Base URL: /api/admin/yoga-schedule — All endpoints require Bearer token authentication.

Create Schedule (POST /api/admin/yoga-schedule)

{
  "yoga": "ObjectId",
  "instructor": "ObjectId",
  "timeSlots": [
    {
      "startTime": "09:00",
      "endTime": "10:00",
      "days": ["MON", "WED", "FRI"]
    }
  ],
  "position": 1,
  "status": true
}

API Reference: Banner Management

Base URL: /api/admin/banner — Requires Bearer token authentication.

API Reference: Home Section Management

Base URL: /api/admin/home-section — Requires Bearer token authentication.

Create/Update Home Section

{
  "sectionKey": "about-us",
  "title": "About Our Studio",
  "subTitle": "Where Mind Meets Body",
  "features": [
    { "title": "Expert Teachers", "description": "Certified instructors" }
  ],
  "stats": [
    { "value": "500", "suffix": "+", "label": "Students Trained" }
  ],
  "status": true,
  "orderBy": 1
}

API Reference: Contact Management

Base URL: /api/admin/contact-us — Requires Bearer token authentication.

Pagination Query Parameters

API Reference: Subscription Management

Base URL: /api/admin/subscribe — Requires Bearer token authentication.

Supports the same pagination query parameters as the Contact endpoint.

API Reference: File Management

Base URL: /api/admin/file — Requires Bearer token authentication.

Upload (POST, multipart/form-data)

Response:

{
  "success": true,
  "data": {
    "single": { "imageId": "public_id", "url": "https://..." },
    "multiple": [{ "imageId": "public_id", "url": "https://..." }],
    "all": [{ "imageId": "public_id", "url": "https://..." }]
  }
}

Delete (DELETE)

{
  "imageId": "single_public_id",
  "imageIds": ["id1", "id2"]
}

API Reference: Dashboard Statistics

Response:

{
  "success": true,
  "data": {
    "yoga": { "active": 5, "inactive": 2, "total": 7 },
    "gallery": { "active": 12, "inactive": 1, "total": 13 },
    "team": { "active": 4, "inactive": 0, "total": 4 }
  }
}

API Reference: Settings

All settings endpoints require Bearer token authentication.

General Settings

Update Fields (multipart/form-data)

Cloudinary Settings

{
  "cloudName": "your-cloud",
  "apiKey": "123456789",
  "apiSecret": "secret",
  "folderName": "yoga-studio",
  "secureUrlBase": "https://res.cloudinary.com/your-cloud"
}

Business Hours

{
  "businessHour": [
    { "dayOfWeek": 0, "openTime": 540, "closeTime": 1080, "isClosed": false },
    { "dayOfWeek": 6, "openTime": 0, "closeTime": 0, "isClosed": true }
  ]
}

SEO Metadata

Page Banners

Terms & Policies

{
  "terms": "<p>Your terms of service HTML content...</p>",
  "policy": "<p>Your privacy policy HTML content...</p>"
}

API Reference: Public Endpoints

These endpoints do not require authentication and are used by the public-facing website.

POST /api/public/subscribe

{ "email": "user@example.com" }

POST /api/public/contact-us

{
  "name": "John Doe",
  "email": "john@example.com",
  "message": "I'd like to know more about your classes."
}

GET /api/public/settings

The context query parameter accepts one of:

• general — Company info, logo, social links
• pageBanner — Page banner images
• cloudinary — Cloudinary base URL
• metadata — SEO metadata
• termsPolicy — Terms & privacy policy
• businessHours — Business hours schedule

Admin Dashboard Pages

Public Pages

Landing Page Sections

The landing page is composed of the following configurable sections (all manageable from admin dashboard):

1. Hero Banner
2. About Us
3. About Founder
4. Types of Yoga
5. Classes & Programs
6. Yoga at Home
7. Why Choose Us
8. Image Gallery
9. Video Gallery
10. Yoga Categories
11. Features
12. Pricing Plans
13. Testimonials
14. FAQ
15. Call to Action
16. Contact Form

Component Library

The template includes 40+ base UI components built with Radix UI and shadcn/ui patterns, plus custom components for specific functionality.

Base UI Components (components/ui/)

Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Badge, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Command, Context Menu, Dialog, Drawer, Dropdown Menu, Form, Hover Card, Input, Input OTP, Label, Menubar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip.

Custom Components (components/custom/)

Data Table Components (components/tables/)

Built with TanStack React Table, includes sortable columns, pagination, search toolbar, faceted filtering, and column visibility options.

Docker Deployment

A Dockerfile is included for containerized deployment.

# Build the Docker image
docker build -t yoga-studio .

# Run the container
docker run -p 3000:3000 --env-file .env yoga-studio

Customization

Theming

• Colors and styles are managed through Tailwind CSS configuration
• Dark/Light mode is built-in via next-themes
• Custom CSS variables for theme colors are defined in globals.css

Fonts

Four Google Fonts are loaded in the root layout:

Adding New Sections

1. Create a new Mongoose model in model/
2. Add API routes in app/api/admin/
3. Create server actions in actions/
4. Build the admin management page in app/(private)/admin/dashboard/
5. Add the public-facing component in components/features/landing/

Changelog

Version 1.0.0 — Initial Release

• Full-stack Next.js 16 application with App Router
• React 19 with Tailwind CSS 4
• Admin dashboard with complete content management system
• 15+ configurable landing page sections
• MongoDB with Mongoose ODM (11 collections)
• Cloudinary media management integration
• JWT-based authentication with NextAuth 5
• 40+ Radix UI / shadcn components
• Dark/Light theme support
• Drag-and-drop content reordering
• Docker deployment support
• Fully responsive design
• SEO optimization with metadata management

Support

For support, questions, or feature requests, please reach out through the item support channel on the marketplace where you purchased this template.

When reporting an issue, please include:

• Your Node.js version (node -v)
• Your package manager and version
• The error message or screenshot
• Steps to reproduce the issue