A beauty salon pricing app, built with Laravel 5.3 and Vue 2.
PHP Vue HTML JavaScript ApacheConf
Switch branches/tags
Nothing to show
Clone or download


Beauty Salon Pricing

This is a repository for a beauty salon pricing app, built with Laravel 5.3 and Vue 2.


The application uses Fractal, via the spatie/laravel-fractal package and has been utilized to create an internal API for the retrieval of a complex data structure. The data is accessible by registered users at /products/fetch and /services/fetch. You can find the implementation of the complex data structure in App\Http\Controllers\ProductsController and App\Http\Controllers\ServicesController.

Vue has been used to create the reactive front-end components that consume the API.


  • Allows user to register and create products and services.
  • Services are defined by a title , category and price.
  • Products are defined by a brand, name, category and price.
  • Products and Services, once created, can be edited and deleted via the 'backend' UI (/products or /services).
  • All products and services are available for viewing, in a price listing UI (/prices/services, prices/products or /prices/all), seperate to the 'backend' view. /prices/all being a view including all products & services.
  • The price listing view has the option to add a quantity of any item (Product or Service) to the total price, as well as removing a specified quantity of the item from the total price.
  • Products and Services may be sorted by brand and category, respectively, in the 'backend' view, as well as the pricing list view.
  • Products and Services may be discounted via the UI, using predefined values as per the project specifications.

Note, the user registration controller currently restricts registration to only one user, as per the project specifications. To remove this restriction, simply remove the no_accounts validation rule in the RegisterController.

Installation & Configuration

If you would like to install this project, treat it as you would any other Laravel application:

  • Clone the repo.
  • Install dependencies: composer install (also, npm install, if you need).
  • Configure environment variables- .env (see below).
  • Generate application key: php artisan key:generate.
  • Run Laravel migrations: php artisan migrate.

Make sure you configure these environment variables:

  • APP_URL : the url of the application. This variable is used for linking to the application in emails.
  • MAIL_FROM_EMAIL and MAIL_FROM_NAME: the 'from' email address and name. This is used for sending out emails.
  • COPY_NAME and COPY_URL: the text and link in footer, used for dev details.
  • BUGSNAG_API_KEY: your API key to use the Bugsnag service. Not required. If you are not using this service, just remove the bugsnag dependency in composer.json, config entries in config/app.php and alias in App\Providers\AppServiceProvider register method. Then run composer update.

Remember to either remove references to the legal views routes, or add in your own views under legal.terms and legal.privacy

Further steps:

  • Set the APP_ENV environment variable to production when the app is on a live sever, to force HTTPS connections on all routes.

Custom Validation rules

As well as the no_accounts validation rule, used in the RegisterController, two other custom validation rules have been implemented, dollars and allowed_dollar_amount.

The dollars validation rule uses the following pattern: /^\d{0,5}(\.\d{2})?$/, to verify that a value is in the following format: 123.45.

The allowed_dollar_amount uses the following pattern: /^\d{0,5}(\.\d{2})?$/, to verify that a value has a maximum of 5 whole numbers, preceeding the . and two decimal places.


Adding Items

Adding services 'backend' Adding Services

Adding products 'backend' Adding Products

Backend Listings

Product listings Product Listings

Service listings Service Listings

Pricing lists

Pricing list (top) All Prices- top

Pricing list (bottom) All Prices- bottoml


Routes Thanks to Pretty Routes

Additional Packages


  • Prices, within the database and Vue components are of type float, feel free to enhance the trailing points' accuracy by changing the type to double. However, I have chosen to stick with float type, as there is no real advantage, considering the limitations in rounding up floating point numbers to the nearest floating point value (, given the number of trailing decimals to keep intact) in JavaScript.
  • The price field in the products and services tables are restricted to values no greater than 99999.99(7 digits, 2 of which are trailing decimals).
  • It is possible for total prices, shown in footer at /prices/all, /prices/services and /prices/products to be off by, at most, 1/2 cent. This is due to prices not being rounded up before being displayed. Instead, total prices are 'trimmed' down with n.toFixed(2). I have also removed any possible - preceeding the total price. A preceeding - may appear, if all items are removed from the total. The resulting code is n.toFixed(2).replace('-', '').

Please do not use the associated legal views, if they still exist in this repository (terms.blade.php and privacy.blade.php). Use at your own peril.