Demo of the case study app

Resources:
PrintBay live demo

The case-study project for this course is called PrintBay, and it's an online store for buying prints of famous art works.

Now PrintBay is not a massive app, but it has been specially designed to capture many of the feaures and development challenges that you'll face when building enterprise Vue apps.

So let's now take a look at its main feature and structure.

Home page

Beginning with the home page, we can see the prints that are available for sale.

Item page

If we click on any particular print, we'll see a detail page, including this "add to cart" button.

If we click that, we'll be redirected to a login page where we can either login or register a new users. So let's go ahead and register a new user.

I'll create one with my name Anthony, and the user name anthony@test.com, and a password.

Once I submit that form, that then redirects us to back to the homepage. Notice in the toolbar at the top right that it's displaying the name I registered and also giving me a logout link.

Let's now click on a print again, and click add to cart again. Since we're authenticated now, that item will be added to the cart, and we can see in the right of the toolbar that there's now a number badge on the cart icon.

Cart

Let's click that cart icon in the toolbar and we'll be linked to the cart page. We can edit the quantity of any print in our cart here, or we can remove it from the cart entirely.

Admin

Let's now logout using this link in the toolbar, and then we'll sign in again.

This time I'm going to sign in with the email admin@test.com, and the password is t.e.s.t.1.2.3.4.

This is an account that's provided by default in the database seed, and is the only account with admin privileges.

The main difference between regular user privileges and admin privileges is that on the item page the call to action button is now "edit item" instead of "add to cart".

You'll also notice there's no shopping cart icon in the toolbar for an admin user, and if we attempt to go to the "/cart" route as an admin user we face a HTTP 400 Forbidden page.

Edit item

Going to the edit page for a print, we change any of it's details. So let's change the price from 29.95 to 39.95.

Now, if we go to the home page again, we can see that price change has taken effect.

Add item

In the footer of the page you can also see a links section. Admin users will have a link here "sell new item" which opens a form allowing us to add a new print.

Let's give it a title "My painting", the artist is me, Anthony Gore.

We can now provide a year, but let's actually skip that field and you'll see that validation is triggered and we see an error message.

This also prevents us from submitting the form.

Codebase

So now you've seen the app we'll be building, let's now do a quick tour of the code base as well.

You may be able to tell that this is a Vue CLI 3 project. You'll see the familiar vue.config file in the root directory for example.

Client

What's a bit different though it that the frontend files are in this folder here, client. If you open that you'll see all the files you normally would see in the src folder in a standard Vue CLI 3 installation.

Server

We also have a server folder here which contains the Express API which has been structured in the classic MVC configuration.

Tests

There's also the tests folder here which contains two subdirectories; unit and e2e. Inside the unit folder you'll see our client and server tests and the e2e folder contains the specs for our automated browser testing.

So that's the end of our brief tour, and in the next video we'll get an overview of each module of the course.