├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── directory.json
├── index.html
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── icons
│ ├── android-icon-144x144.png
│ ├── android-icon-192x192.png
│ ├── android-icon-36x36.png
│ ├── android-icon-48x48.png
│ ├── android-icon-72x72.png
│ ├── android-icon-96x96.png
│ ├── apple-icon-114x114.png
│ ├── apple-icon-120x120.png
│ ├── apple-icon-144x144.png
│ ├── apple-icon-152x152.png
│ ├── apple-icon-180x180.png
│ ├── apple-icon-57x57.png
│ ├── apple-icon-60x60.png
│ ├── apple-icon-72x72.png
│ ├── apple-icon-76x76.png
│ ├── apple-icon-precomposed.png
│ ├── apple-icon.png
│ ├── browserconfig.xml
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon-96x96.png
│ ├── manifest.json
│ ├── ms-icon-144x144.png
│ ├── ms-icon-150x150.png
│ ├── ms-icon-310x310.png
│ └── ms-icon-70x70.png
├── images
│ ├── cat1.jpg
│ ├── cat10.jpg
│ ├── cat11.jpg
│ ├── cat2.jpg
│ ├── cat3.jpg
│ ├── cat4.jpg
│ ├── cat5.jpg
│ ├── cat6.jpg
│ ├── cat7.jpg
│ ├── cat8.jpg
│ ├── cat9.jpg
│ ├── dog1.jpg
│ ├── dog2.jpg
│ ├── dog3.jpg
│ ├── dog4.jpg
│ ├── dog5.jpg
│ ├── dog6.jpg
│ ├── dog7.jpg
│ ├── dog8.jpg
│ ├── dog9.jpg
│ ├── flower1.jpg
│ ├── flower2.jpg
│ ├── flower3.jpg
│ ├── flower4.jpg
│ ├── flower5.jpg
│ ├── flower6.jpg
│ └── flower7.jpg
├── logo.png
├── script.js
└── style.css
└── server.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.js]
2 | indent_style = tab
3 | indent_size = 2
4 |
5 | [*.{html,css}]
6 | indent_style = tab
7 | indent_size = 4
8 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "env": {
3 | "browser": true,
4 | "commonjs": true,
5 | "node": true
6 | },
7 | "extends": "eslint:recommended",
8 | "parserOptions": {
9 | "ecmaVersion": 5
10 | },
11 | "rules": {
12 | "no-console": 0,
13 | "no-undef": 0,
14 | "indent": [
15 | "error",
16 | "tab"
17 | ],
18 | "linebreak-style": [
19 | "error",
20 | "unix"
21 | ],
22 | "quotes": [
23 | "error",
24 | "double"
25 | ],
26 | "semi": [
27 | "error",
28 | "always"
29 | ]
30 | }
31 | };
32 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | .env
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue.js Poster Shop
2 |
3 | Source code for the case-study project from the course [Build Your First Vue.js App](https://courses.vuejsdevelopers.com/p/build-your-first-vue-js-app?utm_source=github-vjd
4 | )
5 |
6 | #### Demo
7 |
8 | See the completed project here: [http://poster-shop.vuejsdevelopers.com/](http://poster-shop.vuejsdevelopers.com/)
9 |
10 | #### Pre-installation
11 |
12 | Ensure [Node.js >=4](https://nodejs.org/en/download/), [NPM](https://docs.npmjs.com) and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) are installed on your system
13 |
14 | #### Installation
15 |
16 | 1. Install this code on your local system
17 |
18 | 1. Fork this repository (click 'Fork' button in top right corner)
19 | 2. Clone the forked repository on your local file system
20 |
21 | ```
22 | cd /path/to/install/location
23 |
24 | git clone https://github.com/[your_username]/poster-shop.git
25 | ```
26 |
27 | 2. Change directory into the local clone of the repository
28 |
29 | ```
30 | cd poster-shop
31 | ```
32 |
33 | 3. Install dependencies
34 |
35 | ```
36 | npm install
37 | ```
38 |
39 | 4. Start project
40 |
41 | ```
42 | npm run serve
43 | ```
44 |
45 | 5. Your site will be available at *localhost:3000*.
46 |
47 | ## Troubleshooting
48 |
49 | Here are some common mistakes people make, check these before filing an issue:
50 |
51 | - `EADDRINUSE :::3000`. You already have another application using port 3000. Either end it, or change manually set the `PORT` environment variable to resolve the conflict e.g. `3001`
52 | - Ensure you have a version of Node >= 4
53 |
54 | ```
55 | node -v
56 | ```
57 |
58 | ## Sponsors
59 |
60 | 
61 |
62 | [Support Vue.js Developers](https://www.patreon.com/anthonygore?utm-source=github-vjd&utm-medium=link&utm_campaign=sponsors) to get your logo here.
63 |
64 | ## Lecture branches
65 |
66 | Each branch of of the repo shows the state of the code at the end of any particular video e.g. `video/05` shows the state at the end of video 5.
67 |
68 | If you want the initial state of the code, use the `master` branch.
69 |
70 | If you're doing the *Vue.js Essentials - 3 Course Bundle* course on Udemy, you'll need the following conversion table to match the branch to the lecture number.
71 |
72 | | Lecture # | Branch name |
73 | | - | - |
74 | | 15 | video/05 |
75 | | 16 | video/06 |
76 | | 17 | video/07 |
77 | | 19 | video/09 |
78 | | 20 | video/10 |
79 | | 21 | video/11 |
80 | | 22 | video/12 |
81 | | 25 | video/15 |
82 | | 26 | video/16 |
83 | | 27 | video/17 |
84 | | 28 | video/18 |
85 | | 29 | video/19 |
86 | | 31 | video/21 |
87 | | 32 | video/22 |
88 | | 33 | video/23 |
89 | | 35 | video/25 |
90 | | 38 | video/28 |
91 | | 39 | video/29 |
92 | | 40 | video/30 |
93 | | 41 | video/31 |
94 | | 42 | video/32 |
95 | | 43 | video/33 |
96 | | 45 | video/35 |
97 | | 47 | video/37 |
98 | | 48 | video/38 |
99 | | 49 | video/39 |
100 | | 50 | video/40 |
101 | | 51 | video/41 |
102 | | 52 | video/42 |
103 | | 53 | video/43 |
104 | | 54 | video/44 |
105 | | 55 | video/45 |
106 |
--------------------------------------------------------------------------------
/directory.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": 1,
4 | "title": "Calico Cat",
5 | "thumb": "cat1.jpg",
6 | "price": 19.95,
7 | "tags": [ "cat", "orange" ]
8 | },
9 | {
10 | "id": 2,
11 | "title": "Cat Close Up",
12 | "thumb": "cat2.jpg",
13 | "price": 23.95,
14 | "tags": [ "cat", "face" ]
15 | },
16 | {
17 | "id": 3,
18 | "title": "Grey Kitten",
19 | "thumb": "cat3.jpg",
20 | "price": 17.95,
21 | "tags": [ "cat", "kitten" ]
22 | },
23 | {
24 | "id": 4,
25 | "title": "Cat Outdoors",
26 | "thumb": "cat4.jpg",
27 | "price": 17.95,
28 | "tags": [ "cat", "outdoors" ]
29 | },
30 | {
31 | "id": 5,
32 | "title": "Sneaky Cat",
33 | "thumb": "cat5.jpg",
34 | "price": 19.95,
35 | "tags": [ "cat", "outdoors" ]
36 | },
37 | {
38 | "id": 6,
39 | "title": "Fluffy Cat",
40 | "thumb": "cat6.jpg",
41 | "price": 23.95,
42 | "tags": [ "cat", "fluffy" ]
43 | },
44 | {
45 | "id": 7,
46 | "title": "Blue-Eyed Cat",
47 | "thumb": "cat7.jpg",
48 | "price": 19.95,
49 | "tags": [ "cat", "blue" ]
50 | },
51 | {
52 | "id": 8,
53 | "title": "White Cat",
54 | "thumb": "cat8.jpg",
55 | "price": 23.95,
56 | "tags": [ "cat", "white" ]
57 | },
58 | {
59 | "id": 9,
60 | "title": "Orange Cat",
61 | "thumb": "cat9.jpg",
62 | "price": 19.95,
63 | "tags": [ "cat", "orange" ]
64 | },
65 | {
66 | "id": 10,
67 | "title": "Cat Pile",
68 | "thumb": "cat10.jpg",
69 | "price": 27.95,
70 | "tags": [ "cat", "pile", "funny" ]
71 | },
72 | {
73 | "id": 11,
74 | "title": "Black Cat",
75 | "thumb": "cat11.jpg",
76 | "price": 27.95,
77 | "tags": [ "cat", "black" ]
78 | },
79 | {
80 | "id": 12,
81 | "title": "Rottweiler",
82 | "thumb": "dog1.jpg",
83 | "price": 18.95,
84 | "tags": [ "dog", "black" ]
85 | },
86 | {
87 | "id": 13,
88 | "title": "Grey dog",
89 | "thumb": "dog2.jpg",
90 | "price": 23.95,
91 | "tags": [ "dog", "grey" ]
92 | },
93 | {
94 | "id": 14,
95 | "title": "Dog on grass",
96 | "thumb": "dog3.jpg",
97 | "price": 23.95,
98 | "tags": [ "dog", "grass" ]
99 | },
100 | {
101 | "id": 15,
102 | "title": "Sad puppy",
103 | "thumb": "dog4.jpg",
104 | "price": 23.95,
105 | "tags": [ "dog", "puppy" ]
106 | },
107 | {
108 | "id": 16,
109 | "title": "Boxer",
110 | "thumb": "dog5.jpg",
111 | "price": 22.95,
112 | "tags": [ "dog", "boxer" ]
113 | },
114 | {
115 | "id": 17,
116 | "title": "Looking sideways",
117 | "thumb": "dog6.jpg",
118 | "price": 19.95,
119 | "tags": [ "dog" ]
120 | },
121 | {
122 | "id": 18,
123 | "title": "German shepard",
124 | "thumb": "dog7.jpg",
125 | "price": 19.95,
126 | "tags": [ "dog" ]
127 | },
128 | {
129 | "id": 19,
130 | "title": "Sleepy dog",
131 | "thumb": "dog8.jpg",
132 | "price": 18.95,
133 | "tags": [ "dog", "black" ]
134 | },
135 | {
136 | "id": 20,
137 | "title": "Happy dog",
138 | "thumb": "dog9.jpg",
139 | "price": 23.95,
140 | "tags": [ "dog", "happy" ]
141 | },
142 | {
143 | "id": 21,
144 | "title": "Pink Lily",
145 | "thumb": "flower1.jpg",
146 | "price": 23.95,
147 | "tags": [ "flower", "lily", "pink" ]
148 | },
149 | {
150 | "id": 22,
151 | "title": "Orchid",
152 | "thumb": "flower2.jpg",
153 | "price": 24.95,
154 | "tags": [ "flower", "orchid" ]
155 | },
156 | {
157 | "id": 23,
158 | "title": "Dandelion",
159 | "thumb": "flower3.jpg",
160 | "price": 15.95,
161 | "tags": [ "flower", "dandeloin" ]
162 | },
163 | {
164 | "id": 24,
165 | "title": "Orange flower",
166 | "thumb": "flower4.jpg",
167 | "price": 24.95,
168 | "tags": [ "flower", "orange" ]
169 | },
170 | {
171 | "id": 25,
172 | "title": "Water lily",
173 | "thumb": "flower5.jpg",
174 | "price": 17.95,
175 | "tags": [ "flower", "lily" ]
176 | },
177 | {
178 | "id": 25,
179 | "title": "Red tulip",
180 | "thumb": "flower6.jpg",
181 | "price": 18.95,
182 | "tags": [ "flower", "tulip", "red" ]
183 | },
184 | {
185 | "id": 26,
186 | "title": "Red poppy",
187 | "thumb": "flower7.jpg",
188 | "price": 22.95,
189 | "tags": [ "flower", "poppy", "red" ]
190 | }
191 | ]
192 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Vue.js Poster Shop
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
23 |
24 |
25 |
Products go here.
26 |
27 |
28 |
Shopping Cart
29 |
30 | Total: $0.00
31 |
32 |
33 |
34 |
19 |