Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Body Spoils — Massage Therapy Website

Netlify Status

A premium, client-focused website built for Body Spoils, a massage therapy practice centered on relaxation, restoration, and intentional care.

This project is designed to feel elevated, calming, and conversion-focused, combining thoughtful UI/UX decisions with a modern frontend architecture.


Live Preview

(Add your deployed URL here when ready)


Overview

Body Spoils is a service-based website built to:

  • Present massage therapy services in a clear, inviting way
  • Guide users through a seamless booking experience
  • Establish trust through strong visual branding and thoughtful layout
  • Convert visitors into booked clients

The experience emphasizes:

  • Soft, calming visual design
  • Clean content hierarchy
  • Smooth interactions and intuitive navigation

Key Features

Booking Flow (Multi-Step UI)

  • Step-based booking interface:
    • Service selection
    • Date & time selection
    • User details
    • Confirmation
  • Interactive selection states and feedback
  • Structured for future backend/API integration

Service Presentation

  • Clearly defined service cards
  • Duration + pricing visibility
  • Scannable descriptions for quick decision-making

Contact Experience

  • Split layout with:
    • Business information
    • Contact form
  • Form designed for usability and clarity
  • Ready for SMTP/email integration

Responsive Design

  • Fully responsive across:
    • Desktop
    • Tablet
    • Mobile
  • Layout shifts prioritize readability and usability

Reusable Component Structure

  • Modular React components
  • Scalable layout system
  • Clean separation of UI sections

Tech Stack

Frontend

  • React (Vite)
  • JavaScript (ES6+)
  • CSS / Tailwind (if applicable)

Tooling

  • Vite (fast dev + build)
  • ESLint (code quality)

Project Structure

src/ ├── components/ # Reusable UI components ├── pages/ # Page-level components ├── assets/ # Images, icons, branding ├── styles/ # Global styles ├── App.jsx └── main.jsx


Design Direction

The design system is built around a soft luxury aesthetic:

  • Warm neutrals and blush tones
  • Minimal, elegant typography
  • Spacious layouts with intentional hierarchy
  • Subtle shadows and rounded surfaces

The goal:

Make the experience feel calm, premium, and trustworthy — not loud or overly decorative.


UX Strategy

This project prioritizes clarity and conversion:

  • Strong visual hierarchy
  • Clear call-to-actions
  • Reduced cognitive load in booking flow
  • Balanced whitespace for readability
  • Immediate access to key information (services, pricing, contact)

Future Enhancements

  • Backend integration for booking (Node / Express / PostgreSQL)
  • Payment processing (Stripe, Apple Pay, etc.)
  • Email + SMS notifications
  • Admin dashboard for appointment management
  • CMS integration for service updates

Getting Started

Install dependencies

npm install

Run development server

npm run dev

Build for production

npm run build

Preview production build

npm run preview


Author

Built by Hungry Ghost DEV

Bold brands. Sharp websites. Development that performs.


License

This project is for portfolio and client demonstration purposes.

About

A modern, client-ready booking experience built with React, designed for performance, usability, and real-world business use.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages