Case-study project

After a whirlwind overview of Vue's key features, I'm sure you're keen now to start properly learning Vue and putting it to use. Let's first have a look at the case-study project you'll be building throughout the book.

Vuebnb

Vuebnb is a realistic, full-stack web application which utilizes many of the main features of Vue, Laravel, and the other tools and design patterns covered in this book.

From a user's point of view, Vuebnb is an online marketplace for renting short-term lodgings in cities around the world. You may notice some likeness between Vuebnb and another online marketplace for accommodation with a similar name!

You can view a completed version of Vuebnb here: http://vuebnb.vuejsdevelopers.com.

If you don't have internet access right now, here are screenshots of two of the main pages. Firstly, the home page, where users can search or browse through accommodation options:

Figure 1.3. Vuebnb home page

Secondly, the listing page, where users view information specific to a single lodging they may be interested in renting:

Figure 1.4. Vuebnb listing page

 

Code base

The case-study project runs through the entire duration of this book, so once you've created the code base you can keep adding to it chapter by chapter. By the end, you'll have built and deployed a full-stack app from scratch.

The code base is in a GitHub repository. Download it in whatever folder on your computer that you normally put projects in, for example, ~/Projects:

$ cd ~/Projects
$ git clone https://github.com/PacktPublishing/Full-Stack-Vue.js-2-and-Laravel-5
$ cd Full-Stack-Vue.js-2-and-Laravel-5

Rather than cloning this repository directly, you could first make a fork and clone that. This will allow you to make any changes you like and save your work to your own remote repository. Here's a guide to forking a repository on GitHub: https://help.github.com/articles/fork-a-repo/.

Folders

The code base contains the following folders:

Figure 1.5. Code base directory contents

Here's a rundown of what each folder is used for:

• Chapter02 to Chapter10 contains the completed state of the code for each chapter (excluding this one)
• The images directory contains sample images for use in Vuebnb. This will be explained in Chapter 4, Building a Web Service with Laravel
• vuebnb is the project code you'll use for the main case-study project that we begin work on in Chapter 3, Setting Up a Laravel Development Environment
• vuebnb-prototype is the project code of the Vuebnb prototype that we'll build in Chapter 2, Prototyping Vuebnb, Your First Vue.js Project