├── .DS_Store
├── 01-Baby-Name-Generator
    ├── .DS_Store
    ├── .gitignore
    ├── README.md
    ├── app.vue
    ├── components
    │   ├── Card
    │   │   └── Name.vue
    │   └── Option.vue
    ├── data.ts
    ├── nuxt.config.ts
    ├── package-lock.json
    ├── package.json
    └── tsconfig.json
├── 02-Top-Restaurants
    ├── .gitignore
    ├── README.md
    ├── boilerplate.vue
    ├── components
    │   ├── Nav.vue
    │   └── restaurant
    │   │   ├── Ad.vue
    │   │   ├── Row.vue
    │   │   └── Table.vue
    ├── data.json
    ├── layouts
    │   ├── custom.vue
    │   ├── default.vue
    │   └── error.vue
    ├── nuxt.config.ts
    ├── package-lock.json
    ├── package.json
    ├── pages
    │   ├── 404.vue
    │   ├── index.vue
    │   └── restaurants
    │   │   ├── [name].vue
    │   │   └── index.vue
    └── tsconfig.json
├── 03-DarkMode
    ├── .gitignore
    ├── README.md
    ├── app.vue
    ├── components
    │   ├── Card.vue
    │   ├── Cards.vue
    │   ├── Heading.vue
    │   └── Nav.vue
    ├── composables
    │   └── useDarkMode.ts
    ├── nuxt.config.ts
    ├── package-lock.json
    ├── package.json
    └── tsconfig.json
├── 04-WeatherApp
    ├── .gitignore
    ├── README.md
    ├── app.vue
    ├── assets
    │   └── css
    │   │   └── tailwind.css
    ├── nuxt.config.ts
    ├── package-lock.json
    ├── package.json
    ├── tailwind.config.js
    └── tsconfig.json
├── 05-TodoApp
    ├── .gitignore
    ├── README.md
    ├── app.vue
    ├── composables
    │   └── useTodos.ts
    ├── nuxt.config.ts
    ├── package-lock.json
    ├── package.json
    ├── server
    │   ├── api
    │   │   └── todo
    │   │   │   ├── [id].ts
    │   │   │   └── index.ts
    │   └── db
    │   │   └── index.ts
    └── tsconfig.json
└── 06-NotesApp
    ├── .gitignore
    ├── README.md
    ├── components
        ├── Auth
        │   └── Card.vue
        └── Nav.vue
    ├── composables
        ├── useAuth.ts
        └── useSupabase.ts
    ├── layouts
        └── default.vue
    ├── nuxt.config.ts
    ├── package-lock.json
    ├── package.json
    ├── pages
        ├── index.vue
        └── myprofile.vue
    └── tsconfig.json


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harblaith7/Nuxt3-Course-Udemy/5b33e070ca11582a87f1fcd781cbb59596a02c79/.DS_Store


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harblaith7/Nuxt3-Course-Udemy/5b33e070ca11582a87f1fcd781cbb59596a02c79/01-Baby-Name-Generator/.DS_Store


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .nuxt
4 | nuxt.d.ts
5 | .output
6 | .env


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | We recommend to look at the [documentation](https://v3.nuxtjs.org).
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies
 8 | 
 9 | ```bash
10 | yarn install
11 | ```
12 | 
13 | ## Development
14 | 
15 | Start the development server on http://localhost:3000
16 | 
17 | ```bash
18 | yarn dev
19 | ```
20 | 
21 | ## Production
22 | 
23 | Build the application for production:
24 | 
25 | ```bash
26 | yarn build
27 | ```
28 | 
29 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/app.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { Gender, Popularity, Length, names } from "@/data";
  3 | 
  4 | interface OptionsState {
  5 |   gender: Gender;
  6 |   popularity: Popularity;
  7 |   length: Length;
  8 | }
  9 | 
 10 | const options = reactive<OptionsState>({
 11 |   gender: Gender.GIRL,
 12 |   length: Length.SHORT,
 13 |   popularity: Popularity.TRENDY,
 14 | });
 15 | 
 16 | const computeSelectedNames = () => {
 17 |   const filteredNames = names
 18 |     .filter((name) => name.gender === options.gender)
 19 |     .filter((name) => name.popularity === options.popularity)
 20 |     .filter((name) => {
 21 |       if (options.length === Length.ALL) return true;
 22 |       else return name.length === options.length;
 23 |     });
 24 | 
 25 |   selectedNames.value = filteredNames.map((name) => name.name);
 26 | };
 27 | 
 28 | const selectedNames = ref<string[]>([]);
 29 | 
 30 | const removeName = (index: number) => {
 31 |   const filteredNames = [...selectedNames.value];
 32 |   filteredNames.splice(index, 1);
 33 |   selectedNames.value = filteredNames;
 34 | };
 35 | 
 36 | const optionsArray = [
 37 |   {
 38 |     title: "1) Choose a gender",
 39 |     category: "gender",
 40 |     buttons: [Gender.GIRL, Gender.UNISEX, Gender.BOY],
 41 |   },
 42 |   {
 43 |     title: "2) Choose the name's popularity",
 44 |     category: "popularity",
 45 |     buttons: [Popularity.TRENDY, Popularity.UNIQUE],
 46 |   },
 47 |   {
 48 |     title: "3) Choose name's length",
 49 |     category: "length",
 50 |     buttons: [Length.SHORT, Length.ALL, Length.LONG],
 51 |   },
 52 | ];
 53 | </script>
 54 | 
 55 | <template>
 56 |   <div class="container">
 57 |     <h1>Baby Name Generator</h1>
 58 |     <p>Choose your options and click the "Find Names" buttom below</p>
 59 |     <div class="options-container">
 60 |       <Option
 61 |         v-for="option in optionsArray"
 62 |         :key="option.title"
 63 |         :option="option"
 64 |         :options="options"
 65 |       />
 66 |       <button class="primary" @click="computeSelectedNames">Find Names</button>
 67 |     </div>
 68 |     <div class="cards-container">
 69 |       <CardName
 70 |         v-for="(name, index) in selectedNames"
 71 |         :key="name"
 72 |         :name="name"
 73 |         @remove="() => removeName(index)"
 74 |         :index="index"
 75 |       />
 76 |     </div>
 77 |   </div>
 78 | </template>
 79 | 
 80 | <style scoped>
 81 | .container {
 82 |   font-family: Arial, Helvetica, sans-serif;
 83 |   color: rgb(27, 60, 138);
 84 |   max-width: 50rem;
 85 |   margin: 0 auto;
 86 |   text-align: center;
 87 | }
 88 | 
 89 | h1 {
 90 |   font-size: 3rem;
 91 | }
 92 | .options-container {
 93 |   background-color: rgb(255, 238, 236);
 94 |   border-radius: 2rem;
 95 |   padding: 1rem;
 96 |   width: 95%;
 97 |   margin: 0 auto;
 98 |   margin-top: 4rem;
 99 |   position: relative;
100 | }
101 | 
102 | .primary {
103 |   background-color: rgb(249, 87, 89);
104 |   color: white;
105 |   border-radius: 6.5rem;
106 |   border: none;
107 |   padding: 0.75rem 4rem;
108 |   font-size: 1rem;
109 |   margin-top: 1rem;
110 |   cursor: pointer;
111 | }
112 | 
113 | .cards-container {
114 |   display: flex;
115 |   margin-top: 3rem;
116 |   flex-wrap: wrap;
117 | }
118 | </style>
119 | 


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/components/Card/Name.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | interface NameProps {
 3 |   name: string;
 4 |   index: number;
 5 | }
 6 | const props = defineProps<NameProps>();
 7 | 
 8 | const emit = defineEmits(["remove"]);
 9 | 
10 | const removeName = () => {
11 |   emit("remove", props.index);
12 | };
13 | </script>
14 | 
15 | <template>
16 |   <div class="card">
17 |     <h4>{{ name }}</h4>
18 |     <p @click="removeName">x</p>
19 |   </div>
20 | </template>
21 | 
22 | <style scoped>
23 | .card {
24 |   background-color: rgb(27, 60, 138);
25 |   width: 28%;
26 |   color: white;
27 |   border-radius: 1rem;
28 |   padding: 0.1rem;
29 |   margin-right: 0.5rem;
30 |   margin-bottom: 1rem;
31 |   position: relative;
32 | }
33 | 
34 | .card p {
35 |   position: absolute;
36 |   top: -29%;
37 |   left: 92.5%;
38 |   cursor: pointer;
39 |   color: rgba(255, 255, 255, 0.178);
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/components/Option.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 
 3 | import { Gender, Length, Popularity } from "@/data";
 4 | 
 5 | interface OptionProps {
 6 |   option: {
 7 |     title: string;
 8 |     category: string;
 9 |     buttons: Gender[] | Popularity[] | Length[];
10 | 
11 |   };
12 |   options: {
13 |     gender: Gender;
14 |     popularity: Popularity;
15 |     length: Length;
16 |   };
17 | }
18 | 
19 | const props = defineProps<OptionProps>();
20 | 
21 | const computeButtonClasses = (value, index) => {
22 |   const classNames = [];
23 | 
24 |   if (props.options[props.option.category] === value) {
25 |     classNames.push("option-active");
26 |   }
27 | 
28 |   if (index === 0) classNames.push("option-left");
29 |   if (index === props.option.buttons.length - 1)
30 |     classNames.push("option-right");
31 |   return classNames.join(" ");
32 | };
33 | </script>
34 | 
35 | <template>
36 |   <div class="option-container">
37 |     <h4>{{ option.title }}</h4>
38 |     <div class="option-buttons">
39 |       <button
40 |         v-for="(value, index) in option.buttons"
41 |         :key="value"
42 |         class="option"
43 |         :class="computeButtonClasses(value, index)"
44 |         @click="options[option.category] = value"
45 |       >
46 |         {{ value }}
47 |       </button>
48 |     </div>
49 |   </div>
50 | </template>
51 | 
52 | <style scoped>
53 | .option-container {
54 |   margin-bottom: 2rem;
55 | }
56 | 
57 | .option {
58 |   background: white;
59 |   outline: 0.15rem solid rgb(249, 87, 89);
60 |   border: none;
61 |   padding: 0.75rem;
62 |   width: 12rem;
63 |   font-size: 1rem;
64 |   color: rgb(27, 60, 138);
65 |   cursor: pointer;
66 |   font-weight: 200;
67 | }
68 | 
69 | .option-left {
70 |   border-radius: 1rem 0 0 1rem;
71 | }
72 | 
73 | .option-right {
74 |   border-radius: 0 1rem 1rem 0;
75 | }
76 | 
77 | .option-active {
78 |   background-color: rgb(249, 87, 89);
79 |   color: white;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/data.ts:
--------------------------------------------------------------------------------
  1 | interface Name {
  2 |   id: number;
  3 |   name: string;
  4 |   gender: Gender;
  5 |   popularity: Popularity;
  6 |   length: Length;
  7 | }
  8 | 
  9 | export enum Gender {
 10 |   GIRL = "Girl",
 11 |   BOY = "Boy",
 12 |   UNISEX = "Unisex",
 13 | }
 14 | 
 15 | export enum Popularity {
 16 |   TRENDY = "Trendy",
 17 |   UNIQUE = "Unique",
 18 | }
 19 | 
 20 | export enum Length {
 21 |   SHORT = "Short",
 22 |   LONG = "Long",
 23 |   ALL = "All",
 24 | }
 25 | export const names: Name[] = [
 26 |   {
 27 |     id: 1,
 28 |     name: "Laith",
 29 |     gender: Gender.BOY,
 30 |     popularity: Popularity.UNIQUE,
 31 |     length: Length.SHORT,
 32 |   },
 33 |   {
 34 |     id: 2,
 35 |     name: "Jake",
 36 |     gender: Gender.BOY,
 37 |     popularity: Popularity.TRENDY,
 38 |     length: Length.SHORT,
 39 |   },
 40 |   {
 41 |     id: 3,
 42 |     name: "Lamelo",
 43 |     gender: Gender.BOY,
 44 |     popularity: Popularity.UNIQUE,
 45 |     length: Length.SHORT,
 46 |   },
 47 |   {
 48 |     id: 4,
 49 |     name: "Abraham",
 50 |     gender: Gender.BOY,
 51 |     popularity: Popularity.TRENDY,
 52 |     length: Length.LONG,
 53 |   },
 54 |   {
 55 |     id: 5,
 56 |     name: "Bartholomew",
 57 |     gender: Gender.BOY,
 58 |     popularity: Popularity.UNIQUE,
 59 |     length: Length.LONG,
 60 |   },
 61 |   {
 62 |     id: 6,
 63 |     name: "Noah",
 64 |     gender: Gender.BOY,
 65 |     popularity: Popularity.TRENDY,
 66 |     length: Length.SHORT,
 67 |   },
 68 |   {
 69 |     id: 7,
 70 |     name: "Benjamin",
 71 |     gender: Gender.BOY,
 72 |     popularity: Popularity.TRENDY,
 73 |     length: Length.LONG,
 74 |   },
 75 |   {
 76 |     id: 8,
 77 |     name: "William",
 78 |     gender: Gender.BOY,
 79 |     popularity: Popularity.TRENDY,
 80 |     length: Length.LONG,
 81 |   },
 82 |   {
 83 |     id: 9,
 84 |     name: "Lucus",
 85 |     gender: Gender.BOY,
 86 |     popularity: Popularity.TRENDY,
 87 |     length: Length.SHORT,
 88 |   },
 89 |   {
 90 |     id: 10,
 91 |     name: "Harrison",
 92 |     gender: Gender.BOY,
 93 |     popularity: Popularity.UNIQUE,
 94 |     length: Length.LONG,
 95 |   },
 96 |   {
 97 |     id: 11,
 98 |     name: "Selma",
 99 |     gender: Gender.BOY,
100 |     popularity: Popularity.UNIQUE,
101 |     length: Length.SHORT,
102 |   },
103 |   {
104 |     id: 12,
105 |     name: "Asher",
106 |     gender: Gender.BOY,
107 |     popularity: Popularity.UNIQUE,
108 |     length: Length.SHORT,
109 |   },
110 |   {
111 |     id: 13,
112 |     name: "Tucker",
113 |     gender: Gender.BOY,
114 |     popularity: Popularity.TRENDY,
115 |     length: Length.SHORT,
116 |   },
117 | 
118 |   {
119 |     id: 14,
120 |     name: "Arya",
121 |     gender: Gender.GIRL,
122 |     popularity: Popularity.UNIQUE,
123 |     length: Length.SHORT,
124 |   },
125 |   {
126 |     id: 15,
127 |     name: "Olivia",
128 |     gender: Gender.GIRL,
129 |     popularity: Popularity.TRENDY,
130 |     length: Length.SHORT,
131 |   },
132 |   {
133 |     id: 16,
134 |     name: "Fay",
135 |     gender: Gender.GIRL,
136 |     popularity: Popularity.UNIQUE,
137 |     length: Length.SHORT,
138 |   },
139 |   {
140 |     id: 17,
141 |     name: "Brooklyn",
142 |     gender: Gender.GIRL,
143 |     popularity: Popularity.TRENDY,
144 |     length: Length.LONG,
145 |   },
146 |   {
147 |     id: 18,
148 |     name: "Genevieve",
149 |     gender: Gender.GIRL,
150 |     popularity: Popularity.UNIQUE,
151 |     length: Length.LONG,
152 |   },
153 |   {
154 |     id: 19,
155 |     name: "Zoe",
156 |     gender: Gender.GIRL,
157 |     popularity: Popularity.TRENDY,
158 |     length: Length.SHORT,
159 |   },
160 |   {
161 |     id: 20,
162 |     name: "Valentina",
163 |     gender: Gender.GIRL,
164 |     popularity: Popularity.TRENDY,
165 |     length: Length.LONG,
166 |   },
167 |   {
168 |     id: 21,
169 |     name: "Josephine",
170 |     gender: Gender.GIRL,
171 |     popularity: Popularity.TRENDY,
172 |     length: Length.LONG,
173 |   },
174 |   {
175 |     id: 22,
176 |     name: "Maya",
177 |     gender: Gender.GIRL,
178 |     popularity: Popularity.TRENDY,
179 |     length: Length.SHORT,
180 |   },
181 |   {
182 |     id: 23,
183 |     name: "Everleigh",
184 |     gender: Gender.GIRL,
185 |     popularity: Popularity.UNIQUE,
186 |     length: Length.LONG,
187 |   },
188 |   {
189 |     id: 24,
190 |     name: "Poppy",
191 |     gender: Gender.GIRL,
192 |     popularity: Popularity.UNIQUE,
193 |     length: Length.SHORT,
194 |   },
195 |   {
196 |     id: 25,
197 |     name: "Maia",
198 |     gender: Gender.GIRL,
199 |     popularity: Popularity.UNIQUE,
200 |     length: Length.SHORT,
201 |   },
202 |   {
203 |     id: 26,
204 |     name: "Ivy",
205 |     gender: Gender.GIRL,
206 |     popularity: Popularity.TRENDY,
207 |     length: Length.SHORT,
208 |   },
209 | 
210 |   {
211 |     id: 27,
212 |     name: "Jude",
213 |     gender: Gender.UNISEX,
214 |     popularity: Popularity.UNIQUE,
215 |     length: Length.SHORT,
216 |   },
217 |   {
218 |     id: 28,
219 |     name: "Adrian",
220 |     gender: Gender.UNISEX,
221 |     popularity: Popularity.TRENDY,
222 |     length: Length.SHORT,
223 |   },
224 |   {
225 |     id: 29,
226 |     name: "Sunny",
227 |     gender: Gender.UNISEX,
228 |     popularity: Popularity.UNIQUE,
229 |     length: Length.SHORT,
230 |   },
231 |   {
232 |     id: 30,
233 |     name: "Channing",
234 |     gender: Gender.UNISEX,
235 |     popularity: Popularity.TRENDY,
236 |     length: Length.LONG,
237 |   },
238 |   {
239 |     id: 31,
240 |     name: "Tennessee",
241 |     gender: Gender.UNISEX,
242 |     popularity: Popularity.UNIQUE,
243 |     length: Length.LONG,
244 |   },
245 |   {
246 |     id: 32,
247 |     name: "Dallas",
248 |     gender: Gender.UNISEX,
249 |     popularity: Popularity.TRENDY,
250 |     length: Length.SHORT,
251 |   },
252 | 
253 |   {
254 |     id: 33,
255 |     name: "Zephyr",
256 |     gender: Gender.UNISEX,
257 |     popularity: Popularity.UNIQUE,
258 |     length: Length.LONG,
259 |   },
260 | 
261 |   {
262 |     id: 34,
263 |     name: "Teri",
264 |     gender: Gender.UNISEX,
265 |     popularity: Popularity.TRENDY,
266 |     length: Length.SHORT,
267 |   },
268 | ];
269 | 


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtConfig } from 'nuxt3'
2 | 
3 | // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
4 | export default defineNuxtConfig({
5 | 
6 | })
7 | 


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "nuxi dev",
 5 |     "build": "nuxi build",
 6 |     "start": "node .output/server/index.mjs"
 7 |   },
 8 |   "devDependencies": {
 9 |     "nuxt3": "latest"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/01-Baby-Name-Generator/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .nuxt
4 | nuxt.d.ts
5 | .output
6 | .env


--------------------------------------------------------------------------------
/02-Top-Restaurants/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | We recommend to look at the [documentation](https://v3.nuxtjs.org).
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies
 8 | 
 9 | ```bash
10 | yarn install
11 | ```
12 | 
13 | ## Development
14 | 
15 | Start the development server on http://localhost:3000
16 | 
17 | ```bash
18 | yarn dev
19 | ```
20 | 
21 | ## Production
22 | 
23 | Build the application for production:
24 | 
25 | ```bash
26 | yarn build
27 | ```
28 | 
29 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).


--------------------------------------------------------------------------------
/02-Top-Restaurants/boilerplate.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import restaurants from "./data.json";
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div>
 7 |     <div class="restaurant-container">
 8 |       <div class="image-container">
 9 |         <img :src="image" alt="" />
10 |       </div>
11 |       <div class="info-container">
12 |         <h1>name</h1>
13 |         <div class="stats-container">
14 |           <h5>Revenue (in billions)</h5>
15 |           <p>$revenue</p>
16 |         </div>
17 |         <div class="stats-container">
18 |           <h5>Number of Stores</h5>
19 |           <p>133331</p>
20 |         </div>
21 |         <p class="content">content</p>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <style scoped>
28 | .restaurant-container {
29 |   display: flex;
30 | }
31 | .image-container {
32 |   width: 75%;
33 |   height: 95vh;
34 | }
35 | .image-container img {
36 |   width: 100%;
37 |   height: 100%;
38 | }
39 | .restaurant-not-found {
40 |   height: 75vh;
41 |   display: flex;
42 |   flex-direction: column;
43 |   align-items: center;
44 |   justify-content: center;
45 | }
46 | .info-container {
47 |   padding: 3rem;
48 |   width: 50%;
49 | }
50 | .info-container h1 {
51 |   text-transform: uppercase;
52 |   font-size: 6rem;
53 |   margin-bottom: 3rem;
54 | }
55 | .stats-container {
56 |   display: flex;
57 |   align-items: flex-end;
58 |   margin-bottom: 1rem;
59 | }
60 | .stats-container h5 {
61 |   width: 20rem;
62 |   font-size: 2rem;
63 |   margin: 0;
64 |   margin-right: 5rem;
65 | }
66 | .stats-container p {
67 |   font-size: 2rem;
68 |   margin: 0;
69 | }
70 | .content {
71 |   font-size: 1.5rem;
72 |   margin-top: 4rem;
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 3 |     <div class="container-fluid">
 4 |       <NuxtLink class="navbar-brand" to="/">Restaurantly</NuxtLink>
 5 |       <div class="collapse navbar-collapse" id="navbarSupportedContent">
 6 |         <ul class="navbar-nav ml-auto mb-2 mb-lg-0">
 7 |           <li class="nav-item">
 8 |             <NuxtLink
 9 |               to="/"
10 |               class="nav-link"
11 |               activeClass="active"
12 |               aria-current="page"
13 |               >Home</NuxtLink
14 |             >
15 |           </li>
16 |           <li class="nav-item">
17 |             <NuxtLink to="/restaurants" class="nav-link" activeClass="active"
18 |               >Restaurants</NuxtLink
19 |             >
20 |           </li>
21 |         </ul>
22 |       </div>
23 |     </div>
24 |   </nav>
25 | </template>
26 | 
27 | <style scoped>
28 | .ml-auto {
29 |   margin-left: auto;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/components/restaurant/Ad.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="add-container">
 3 |     <h1>Get the best restauarant ad</h1>
 4 |     <button class="btn btn-primary btn-large">Buy Now</button>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <style scoped>
 9 | .add-container {
10 |   margin: 10rem 0;
11 |   text-align: center;
12 |   font-size: 2rem;
13 |   background-color: rgba(103, 103, 231, 0.3);
14 |   padding: 3rem;
15 | }
16 | </style>
17 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/components/restaurant/Row.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | interface RowProps {
 3 |   rank?: number;
 4 |   name?: string;
 5 |   index?: number;
 6 |   isHeader?: boolean;
 7 | }
 8 | 
 9 | const props = defineProps<RowProps>();
10 | </script>
11 | 
12 | <template>
13 |   <div class="row" v-if="isHeader">
14 |     <h4 class="header">Rank</h4>
15 |     <h4 class="header">Chain</h4>
16 |   </div>
17 |   <div
18 |     v-else
19 |     class="row"
20 |     :style="index % 2 === 0 ? { background: 'rgba(128,128,128,0.15)' } : null"
21 |   >
22 |     <h4 class="header rank">{{ rank }}</h4>
23 |     <NuxtLink :to="`/restaurants/${name}`" class="header link">{{
24 |       name
25 |     }}</NuxtLink>
26 |   </div>
27 | </template>
28 | 
29 | <style scoped>
30 | .row {
31 |   border-top: 1px solid rgba(128, 128, 128, 0.336);
32 |   display: flex;
33 |   align-items: center;
34 | }
35 | .header {
36 |   font-size: 1.25rem;
37 |   color: rgb(10, 31, 148);
38 |   margin: 0;
39 |   margin-right: 2rem;
40 |   padding: 0.5rem 1rem;
41 |   font-weight: 700;
42 |   width: 4rem;
43 | }
44 | .rank {
45 |   color: black;
46 | }
47 | .link {
48 |   text-decoration: none;
49 |   color: rgb(228, 157, 27);
50 |   width: auto;
51 |   font-weight: 500;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/components/restaurant/Table.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import restaurants from "@/data.json";
 3 | 
 4 | const restaurantsOrganized = {
 5 |   first: [...restaurants].splice(0, 25),
 6 |   second: [...restaurants].splice(25, 25),
 7 | };
 8 | </script>
 9 | 
10 | <template>
11 |   <div class="table">
12 |     <h1>TOP 50: THE RANKING</h1>
13 |     <div class="table-container">
14 |       <div class="table-col">
15 |         <RestaurantRow :isHeader="true" />
16 |         <RestaurantRow
17 |           v-for="(restaurant, index) in restaurantsOrganized.first"
18 |           :key="restaurant.id"
19 |           :name="restaurant.name"
20 |           :rank="restaurant.rank"
21 |           :index="index"
22 |         />
23 |       </div>
24 |       <div class="table-col">
25 |         <RestaurantRow :isHeader="true" />
26 |         <RestaurantRow
27 |           v-for="(restaurant, index) in restaurantsOrganized.second"
28 |           :key="restaurant.id"
29 |           :name="restaurant.name"
30 |           :rank="restaurant.rank"
31 |           :index="index"
32 |         />
33 |       </div>
34 |     </div>
35 |   </div>
36 | </template>
37 | 
38 | <style scoped>
39 | .table {
40 |   margin: 3rem 0;
41 | }
42 | .table h1 {
43 |   margin-bottom: 2rem;
44 | }
45 | .table-container {
46 |   display: flex;
47 |   justify-content: space-between;
48 | }
49 | .table-col {
50 |   width: 48%;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/data.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "id": 1,
  4 |     "rank": 1,
  5 |     "name": "McDonalds",
  6 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
  7 |     "revenue": 42.4,
  8 |     "numberOfStores": "39,222",
  9 |     "imageUrl": "https://images.unsplash.com/photo-1602400236316-f5e3b6d2314c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=5070&q=80"
 10 |   },
 11 |   {
 12 |     "id": 2,
 13 |     "rank": 2,
 14 |     "name": "Starbucks",
 15 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 16 |     "revenue": 26.5,
 17 |     "numberOfStores": "33,295",
 18 |     "imageUrl": "https://images.unsplash.com/photo-1592321675774-3de57f3ee0dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fHN0YXJidWNrc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
 19 |   },
 20 |   {
 21 |     "id": 3,
 22 |     "rank": 3,
 23 |     "name": "Chick-fil-A",
 24 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 25 |     "revenue": 4.3,
 26 |     "numberOfStores": "2,774",
 27 |     "imageUrl": "https://images.unsplash.com/photo-1558883188-817ab9ecf395?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Q2hpY2slMjBmaWwlMjBBfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
 28 |   },
 29 |   {
 30 |     "id": 4,
 31 |     "rank": 4,
 32 |     "name": "Taco Bell",
 33 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 34 |     "revenue": 4.22,
 35 |     "numberOfStores": "7,072",
 36 |     "imageUrl": "https://www.tacobell.ca/static/images/homepage/bottom-right-mobile.ce18cb836e49.jpg"
 37 |   },
 38 |   {
 39 |     "id": 5,
 40 |     "rank": 5,
 41 |     "name": "Wendy's",
 42 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 43 |     "revenue": 4.01,
 44 |     "numberOfStores": "6,534",
 45 |     "imageUrl": "https://ichef.bbci.co.uk/news/976/cpsprodpb/7A97/production/_118438313_wendys.jpg"
 46 |   },
 47 |   {
 48 |     "id": 6,
 49 |     "rank": 6,
 50 |     "name": "Burger King",
 51 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 52 |     "revenue": 3.97,
 53 |     "numberOfStores": "6,933",
 54 |     "imageUrl": "https://image.cnbcfm.com/api/v1/image/106936180-1630511993739-gettyimages-1234486065-PWeaver-Milton-210804-04.jpeg?v=1630512088"
 55 |   },
 56 |   {
 57 |     "id": 7,
 58 |     "rank": 7,
 59 |     "name": "Dunkin'",
 60 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 61 |     "revenue": 3.95,
 62 |     "numberOfStores": "8,522",
 63 |     "imageUrl": "https://www.boston.com/wp-content/uploads/2021/11/Dunkin-holiday-drinks-61815ecc2952c.jpg"
 64 |   },
 65 |   {
 66 |     "id": 8,
 67 |     "rank": 8,
 68 |     "name": "Subway",
 69 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 70 |     "revenue": 16.4,
 71 |     "numberOfStores": "37,343",
 72 |     "imageUrl": "https://cdn.britannica.com/08/193908-050-66767D57/view-Subway-restaurant-Bangkok-Thailand.jpg"
 73 |   },
 74 |   {
 75 |     "id": 9,
 76 |     "rank": 9,
 77 |     "name": "Domino's",
 78 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 79 |     "revenue": 42.4,
 80 |     "numberOfStores": "12,333",
 81 |     "imageUrl": "https://media-cdn.tripadvisor.com/media/photo-s/12/fe/c3/86/domino-s-pizza.jpg"
 82 |   },
 83 |   {
 84 |     "id": 10,
 85 |     "rank": 10,
 86 |     "name": "Chipotle Mexican Grill",
 87 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 88 |     "revenue": 14.4,
 89 |     "numberOfStores": "2,333",
 90 |     "imageUrl": "https://www.investopedia.com/thmb/2sLc9U9RNVeFblgbDxh_uL1tnC4=/680x440/filters:fill(auto,1)/shutterstock_186861896-5bfc33c646e0fb00517d7538.jpg"
 91 |   },
 92 |   {
 93 |     "id": 11,
 94 |     "rank": 11,
 95 |     "name": "Sonic Drive-In",
 96 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
 97 |     "revenue": 4.7,
 98 |     "numberOfStores": "3.563",
 99 |     "imageUrl": "https://www.qsrmagazine.com/sites/default/files/styles/story_page/public/2020-07/SonicEXT.jpg?itok=X6-nYuXg"
100 |   },
101 |   {
102 |     "id": 12,
103 |     "rank": 12,
104 |     "name": "Pizza Hut",
105 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
106 |     "revenue": 1.04,
107 |     "numberOfStores": "18,435",
108 |     "imageUrl": "https://www.ottawabusinessjournal.com/wp-content/uploads/2019/07/e5e17083-273e-40f5-91cf-63a5ca339e99-ea3557c8-71a1-48e8-967f-4c166054baab-pizza-image_no-text.jpg"
109 |   },
110 |   {
111 |     "id": 13,
112 |     "rank": 13,
113 |     "name": "Panera Bread",
114 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
115 |     "revenue": 2.8,
116 |     "numberOfStores": "2,333",
117 |     "imageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAONmid71xguDSR8lHs4QWYNjsauHfYgBTEQ&usqp=CAU"
118 |   },
119 |   {
120 |     "id": 14,
121 |     "rank": 14,
122 |     "name": "KFC",
123 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
124 |     "revenue": 28.5,
125 |     "numberOfStores": "24,536",
126 |     "imageUrl": "https://www.tasteofhome.com/wp-content/uploads/2020/03/kfc-sign-GettyImages-921240630.jpg"
127 |   },
128 |   {
129 |     "id": 15,
130 |     "rank": 15,
131 |     "name": "Popeyes Louisiana Kitchen",
132 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
133 |     "revenue": 42.4,
134 |     "numberOfStores": "12,333",
135 |     "imageUrl": "https://www.godairyfree.org/wp-content/uploads/2009/12/fast-food-popeyes.jpg"
136 |   },
137 |   {
138 |     "id": 16,
139 |     "rank": 16,
140 |     "name": "Arby's",
141 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
142 |     "revenue": 42.4,
143 |     "numberOfStores": "12,333",
144 |     "imageUrl": "https://media-exp1.licdn.com/dms/image/C561BAQFOQyq-un_zNw/company-background_10000/0/1519796443509?e=2159024400&v=beta&t=0Olg06sblnfDhRfh8DRNvGDJFxZrO2072lkQHhvV5N8"
145 |   },
146 |   {
147 |     "id": 17,
148 |     "rank": 17,
149 |     "name": "Dairy Queen",
150 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
151 |     "revenue": 42.4,
152 |     "numberOfStores": "12,333",
153 |     "imageUrl": "https://www.qsrmagazine.com/sites/default/files/styles/story_page/public/story/blizzard-incentives.jpg?itok=9R-RrxC9"
154 |   },
155 |   {
156 |     "id": 18,
157 |     "rank": 18,
158 |     "name": "Little Caesars",
159 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
160 |     "revenue": 42.4,
161 |     "numberOfStores": "12,333",
162 |     "imageUrl": "https://www.masslive.com/resizer/M1NIHyzJjJdMcvw_LZt7jSwXFc8=/1280x0/smart/cloudfront-us-east-1.images.arcpublishing.com/advancelocal/2JI5P5VPDBEQNJR5CAYRC5VCMU.jpg"
163 |   },
164 |   {
165 |     "id": 19,
166 |     "rank": 19,
167 |     "name": "Panda Express",
168 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
169 |     "revenue": 42.4,
170 |     "numberOfStores": "12,333",
171 |     "imageUrl": "https://www.seriouseats.com/thmb/n1EmSyrh7pEal-eSsXEYzuKyDqg=/1500x844/smart/filters:no_upscale()/__opt__aboutcom__coeus__resources__content_migration__serious_eats__seriouseats.com__images__2014__05__20140514-panda-express-sign-2e429c96c13746fb8d648e1b8eca9c80.jpg"
172 |   },
173 |   {
174 |     "id": 20,
175 |     "rank": 20,
176 |     "name": "Jack in the Box",
177 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
178 |     "revenue": 42.4,
179 |     "numberOfStores": "12,333",
180 |     "imageUrl": "https://www.qsrmagazine.com/sites/default/files/styles/story_page/public/story/jack-box-expects-product-innovation-drive-growth.jpg?itok=tj3dRL1G"
181 |   },
182 |   {
183 |     "id": 21,
184 |     "rank": 21,
185 |     "name": "Olive Garden",
186 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
187 |     "revenue": 42.4,
188 |     "numberOfStores": "12,333",
189 |     "imageUrl": "https://media.olivegarden.com/en_us/images/marketing/olive-garden-tuscan-italian-restaurant-g5-rdv.jpg"
190 |   },
191 |   {
192 |     "id": 22,
193 |     "rank": 22,
194 |     "name": "Papa John's",
195 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
196 |     "revenue": 42.4,
197 |     "numberOfStores": "12,333",
198 |     "imageUrl": "https://fox59.com/wp-content/uploads/sites/21/2021/11/PapaJOhnsGettyImages-1044350104.jpg?w=1280"
199 |   },
200 |   {
201 |     "id": 23,
202 |     "rank": 23,
203 |     "name": "Buffalo Wild Wings",
204 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
205 |     "revenue": 42.4,
206 |     "numberOfStores": "12,333",
207 |     "imageUrl": "https://www.mashed.com/img/gallery/scandals-that-buffalo-wild-wings-can-never-live-down/intro-1602864744.jpg"
208 |   },
209 |   {
210 |     "id": 24,
211 |     "rank": 24,
212 |     "name": "Applebee's",
213 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
214 |     "revenue": 42.4,
215 |     "numberOfStores": "12,333",
216 |     "imageUrl": "https://www.nrn.com/sites/nrn.com/files/applebees-storefront.png"
217 |   },
218 |   {
219 |     "id": 25,
220 |     "rank": 25,
221 |     "name": "Chili's Grill & Bar",
222 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
223 |     "revenue": 42.4,
224 |     "numberOfStores": "12,333",
225 |     "imageUrl": "https://media-cdn.tripadvisor.com/media/photo-s/06/a4/b9/e7/chili-s-grill-bar.jpg"
226 |   },
227 |   {
228 |     "id": 26,
229 |     "rank": 26,
230 |     "name": "Whataburger",
231 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
232 |     "revenue": 42.4,
233 |     "numberOfStores": "12,333",
234 |     "imageUrl": "https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5f29710fdb2bffa70809fa0f%2FWhataburger%2F960x0.jpg%3Ffit%3Dscale"
235 |   },
236 |   {
237 |     "id": 27,
238 |     "rank": 27,
239 |     "name": "Texas Roadhouse",
240 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
241 |     "revenue": 42.4,
242 |     "numberOfStores": "12,333",
243 |     "imageUrl": "https://cdn.vox-cdn.com/thumbor/Om_vzCuDw_nMBs6RDOlYdHfpApQ=/0x0:1000x439/1200x800/filters:focal(421x92:581x252)/cdn.vox-cdn.com/uploads/chorus_image/image/66890945/Texas_Roadhouse.0.jpg"
244 |   },
245 |   {
246 |     "id": 28,
247 |     "rank": 28,
248 |     "name": "IHOP",
249 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
250 |     "revenue": 42.4,
251 |     "numberOfStores": "12,333",
252 |     "imageUrl": "https://media.blogto.com/articles/20210816-ihop.jpg?w=2048&cmd=resize_then_crop&height=1365&quality=70"
253 |   },
254 |   {
255 |     "id": 29,
256 |     "rank": 29,
257 |     "name": "Outback Steakhouse",
258 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
259 |     "revenue": 42.4,
260 |     "numberOfStores": "12,333",
261 |     "imageUrl": "https://www.nrn.com/sites/nrn.com/files/Bloomin-Brands-Outback-Q3-strides-toward-multi-channel.jpg"
262 |   },
263 |   {
264 |     "id": 30,
265 |     "rank": 30,
266 |     "name": "Zaxby's",
267 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
268 |     "revenue": 42.4,
269 |     "numberOfStores": "12,333",
270 |     "imageUrl": "https://nmgprod.s3.amazonaws.com/media/files/1b/c9/1bc93563b43c4752c7203dd4f44507c5/cover_image_1620397420.jpg.760x400_q85_crop_upscale.jpg"
271 |   },
272 |   {
273 |     "id": 31,
274 |     "rank": 31,
275 |     "name": "Culver's",
276 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
277 |     "revenue": 42.4,
278 |     "numberOfStores": "12,333",
279 |     "imageUrl": "https://www.mashed.com/img/gallery/what-you-dont-know-about-culvers/intro-1560520860.jpg"
280 |   },
281 |   {
282 |     "id": 32,
283 |     "rank": 32,
284 |     "name": "Jimmy John's Gourmet Sandwiches",
285 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
286 |     "revenue": 42.4,
287 |     "numberOfStores": "12,333",
288 |     "imageUrl": "https://s11284.pcdn.co/wp-content/uploads/2020/06/jimmy-johns-sandwich-shop-700x467.jpg.optimal.jpg"
289 |   },
290 |   {
291 |     "id": 33,
292 |     "rank": 33,
293 |     "name": "Wingstop",
294 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
295 |     "revenue": 42.4,
296 |     "numberOfStores": "12,333",
297 |     "imageUrl": "https://www.qsrmagazine.com/sites/default/files/styles/story_page/public/2020-11/Wingstop.jpg?itok=BLKTA-Z-"
298 |   },
299 |   {
300 |     "id": 34,
301 |     "rank": 34,
302 |     "name": "Hardee's",
303 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
304 |     "revenue": 42.4,
305 |     "numberOfStores": "12,333",
306 |     "imageUrl": "https://upload.wikimedia.org/wikipedia/commons/4/40/Hardee%27s%2C_Salem%2C_Virginia_.jpg"
307 |   },
308 |   {
309 |     "id": 35,
310 |     "rank": 35,
311 |     "name": "Cracker Barrel",
312 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
313 |     "revenue": 42.4,
314 |     "numberOfStores": "12,333",
315 |     "imageUrl": "https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F9%2F2020%2F06%2F05%2Fcracker-barrel-reopening-testing-alcohol-sales-FT-BLOG0620.jpg"
316 |   },
317 |   {
318 |     "id": 36,
319 |     "rank": 36,
320 |     "name": "Red Lobster",
321 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
322 |     "revenue": 42.4,
323 |     "numberOfStores": "12,333",
324 |     "imageUrl": "https://a57.foxnews.com/static.foxnews.com/foxnews.com/content/uploads/2021/05/931/524/Red-Lobster-iStock.jpg?ve=1&tl=1"
325 |   },
326 |   {
327 |     "id": 37,
328 |     "rank": 37,
329 |     "name": "Denny's",
330 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
331 |     "revenue": 42.4,
332 |     "numberOfStores": "12,333",
333 |     "imageUrl": "https://www.nrn.com/sites/nrn.com/files/Dennys-off-premises-sales-Burger-Den-Melt-Down-Q2-2021.jpg"
334 |   },
335 |   {
336 |     "id": 38,
337 |     "rank": 38,
338 |     "name": "Raising Cane's Chicken Fingers",
339 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
340 |     "revenue": 42.4,
341 |     "numberOfStores": "12,333",
342 |     "imageUrl": ""
343 |   },
344 |   {
345 |     "id": 39,
346 |     "rank": 39,
347 |     "name": "Five Guys",
348 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
349 |     "revenue": 42.4,
350 |     "numberOfStores": "12,333",
351 |     "imageUrl": "https://www.gannett-cdn.com/presto/2021/05/01/NVIC/bfadcf26-3bd0-41ba-be08-585c996f25f5-Raising_Canes.jpg?auto=webp&crop=767,432,x0,y39&format=pjpg&width=1200"
352 |   },
353 |   {
354 |     "id": 40,
355 |     "rank": 40,
356 |     "name": "Jersey Mike's Subs",
357 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
358 |     "revenue": 42.4,
359 |     "numberOfStores": "12,333",
360 |     "imageUrl": "https://www.jerseymikes.ca/media/static/locations/1.jpg"
361 |   },
362 |   {
363 |     "id": 41,
364 |     "rank": 41,
365 |     "name": "LongHorn Steakhouse",
366 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
367 |     "revenue": 42.4,
368 |     "numberOfStores": "12,333",
369 |     "imageUrl": "https://i.ytimg.com/vi/8KwRTE91U9I/maxresdefault.jpg"
370 |   },
371 |   {
372 |     "id": 42,
373 |     "rank": 42,
374 |     "name": "The Cheesecake Factory",
375 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
376 |     "revenue": 42.4,
377 |     "numberOfStores": "12,333",
378 |     "imageUrl": "https://cdn.vox-cdn.com/thumbor/Is5STGnbZqVB_hV43MzFReLWneg=/1400x788/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/19832787/Cheesecake_Factory.jpg"
379 |   },
380 |   {
381 |     "id": 43,
382 |     "rank": 43,
383 |     "name": "Bojangles",
384 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
385 |     "revenue": 42.4,
386 |     "numberOfStores": "12,333",
387 |     "imageUrl": "https://www.al.com/resizer/X2ZnTmIKqrG4RFpbSUSQco1Rfag=/1280x0/smart/cloudfront-us-east-1.images.arcpublishing.com/advancelocal/WNRWZSHLQVGEBNOJHGATJT7HHI.jpg"
388 |   },
389 |   {
390 |     "id": 44,
391 |     "rank": 44,
392 |     "name": "Carl's Jr.",
393 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
394 |     "revenue": 42.4,
395 |     "numberOfStores": "12,333",
396 |     "imageUrl": ""
397 |   },
398 |   {
399 |     "id": 45,
400 |     "rank": 45,
401 |     "name": "In-N-Out Burger",
402 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
403 |     "revenue": 42.4,
404 |     "numberOfStores": "12,333",
405 |     "imageUrl": "https://hips.hearstapps.com/del.h-cdn.co/assets/16/35/2560x1920/sd-aspect-1472672403-1659715513-dcdcd9dd17-o.jpg?resize=480:*"
406 |   },
407 |   {
408 |     "id": 46,
409 |     "rank": 46,
410 |     "name": "Red Robin",
411 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
412 |     "revenue": 42.4,
413 |     "numberOfStores": "12,333",
414 |     "imageUrl": "https://www.mashed.com/img/gallery/the-real-reason-red-robin-is-struggling/intro-1553611735.jpg"
415 |   },
416 |   {
417 |     "id": 47,
418 |     "rank": 47,
419 |     "name": "El Pollo Loco",
420 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
421 |     "revenue": 42.4,
422 |     "numberOfStores": "12,333",
423 |     "imageUrl": "https://cdn.winsightmedia.com/platform/files/public/2021-03/background/El-Pollo-Loco-Remodel_1615569606.png?VersionId=wruIYBU_U4juOW6GMUJ0nyZuzMHWo1PB"
424 |   },
425 |   {
426 |     "id": 48,
427 |     "rank": 48,
428 |     "name": "Del Taco",
429 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
430 |     "revenue": 42.4,
431 |     "numberOfStores": "12,333",
432 |     "imageUrl": "https://www.qsrmagazine.com/sites/default/files/styles/story_page/public/news-image/del-taco-refranchises-san-diego-market.jpg?itok=o1zpCTL8"
433 |   },
434 |   {
435 |     "id": 49,
436 |     "rank": 49,
437 |     "name": "Qdoba Mexican Eats",
438 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
439 |     "revenue": 42.4,
440 |     "numberOfStores": "12,333",
441 |     "imageUrl": "https://cdn.vox-cdn.com/thumbor/zBEzySds-coOKCa7Ymm2H56gr6A=/0x0:3500x2336/1200x800/filters:focal(1470x888:2030x1448)/cdn.vox-cdn.com/uploads/chorus_image/image/58037473/L_Omaha-1-2.0.0.jpg"
442 |   },
443 |   {
444 |     "id": 50,
445 |     "rank": 50,
446 |     "name": "Firehouse Subs",
447 |     "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium maiores reprehenderit at culpa atque, dolorum tempore dignissimos nobis ipsam, aliquid iure accusantium natus quam dolor neque optio dolore cum! Laborum veritatis et sed soluta minima fuga impedit inventore doloremque at, reiciendis esse neque obcaecati voluptatum nemo. Omnis ducimus, perspiciatis dolores quidem optio adipisci explicabo facere consequatur, aspernatur fuga, molestias iure laboriosam obcaecati ipsa quasi. Iure dolorem dignissimos odio quisquam. Maiores quasi et laudantium aliquid sequi soluta unde hic optio deleniti!",
448 |     "revenue": 42.4,
449 |     "numberOfStores": "12,333",
450 |     "imageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJM5nrxZjrmUw3VpbmiRzil2TyCZXyQ2mx5w&usqp=CAU"
451 |   }
452 | ]
453 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/layouts/custom.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <slot />
4 |     <RestaurantAd />
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <Nav />
4 |     <slot />
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot name="header"></slot>
 4 |     <div>
 5 |       <img
 6 |         src="https://www.iconpacks.net/icons/2/free-sad-face-icon-2691-thumb.png"
 7 |         alt=""
 8 |       />
 9 |     </div>
10 |     <slot name="redirectEl" />
11 |   </div>
12 | </template>
13 | 
14 | <style scoped>
15 | img {
16 |   width: 10rem;
17 | }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from "nuxt3";
 2 | 
 3 | // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 4 | export default defineNuxtConfig({
 5 |   meta: {
 6 |     link: [
 7 |       {
 8 |         rel: "stylesheet",
 9 |         href: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css",
10 |       },
11 |     ],
12 |   },
13 | });
14 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "nuxi dev",
 5 |     "build": "nuxi build",
 6 |     "start": "node .output/server/index.mjs"
 7 |   },
 8 |   "devDependencies": {
 9 |     "nuxt3": "latest"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/pages/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="container">
 4 |       <NuxtLayout name="error">
 5 |         <template #header>
 6 |           <h1>Page not found</h1>
 7 |         </template>
 8 | 
 9 |         <template #redirectEl>
10 |           <NuxtLink to="/">Go Back</NuxtLink>
11 |         </template>
12 |       </NuxtLayout>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <style scoped>
18 | .container {
19 |   text-align: center;
20 |   margin-top: 5rem;
21 | }
22 | 
23 | img {
24 |   width: 10rem;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
 4 |       <Head>
 5 |         <Title>Restaurantly </Title>
 6 |         <Meta name="description" content="My page is cool" />
 7 |         <Link
 8 |           rel="preload"
 9 |           href="https://www.iconpacks.net/icons/2/free-sad-face-icon-2691-thumb.png"
10 |           as="script"
11 |         />
12 |       </Head>
13 |     </Html>
14 |     <div class="container">
15 |       <h1>Welcome to Restaurantly</h1>
16 |       <NuxtLink to="/restaurants">Go to restaurants</NuxtLink>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <style scoped>
22 | .container {
23 |   text-align: center;
24 |   margin-top: 5rem;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/pages/restaurants/[name].vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import restaurants from "@/data.json";
  3 | 
  4 | const route = useRoute();
  5 | const name = route.params.name;
  6 | 
  7 | const restaurant = restaurants.find((r) => r.name === name);
  8 | 
  9 | useMeta({
 10 |   title: restaurant ? name : "404 - Restaurant Not Found",
 11 |   meta: [
 12 |     {
 13 |       name: "viewport",
 14 |       content: "width=device-width",
 15 |     },
 16 |   ],
 17 | });
 18 | </script>
 19 | 
 20 | <template>
 21 |   <div>
 22 |     <NuxtLayout name="custom" v-if="restaurant">
 23 |       <div class="restaurant-container">
 24 |         <div class="image-container">
 25 |           <img :src="restaurant.imageUrl" alt="" />
 26 |         </div>
 27 |         <div class="info-container">
 28 |           <h1>{{ restaurant.name }}</h1>
 29 |           <div class="stats-container">
 30 |             <h5>Revenue (in billions)</h5>
 31 |             <p>${{ restaurant.revenue }}</p>
 32 |           </div>
 33 |           <div class="stats-container">
 34 |             <h5>Number of Stores</h5>
 35 |             <p>{{ restaurant.numberOfStores }}</p>
 36 |           </div>
 37 |           <p class="content">{{ restaurant.content }}</p>
 38 |         </div>
 39 |       </div>
 40 |     </NuxtLayout>
 41 | 
 42 |     <div class="restaurant-not-found" v-else>
 43 |       <NuxtLayout name="error">
 44 |         <template #header>
 45 |           <h1>Restaurant not found</h1>
 46 |         </template>
 47 |         <template #redirectEl>
 48 |           <button
 49 |             class="btn btn-primary btn-lg"
 50 |             @click="$router.push('/restaurants')"
 51 |           >
 52 |             Go Back
 53 |           </button>
 54 |         </template>
 55 |       </NuxtLayout>
 56 |     </div>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <style scoped>
 61 | .restaurant-container {
 62 |   display: flex;
 63 | }
 64 | .image-container {
 65 |   width: 75%;
 66 |   height: 95vh;
 67 | }
 68 | .image-container img {
 69 |   width: 100%;
 70 |   height: 100%;
 71 | }
 72 | .restaurant-not-found {
 73 |   height: 75vh;
 74 |   display: flex;
 75 |   flex-direction: column;
 76 |   align-items: center;
 77 |   justify-content: center;
 78 | }
 79 | .info-container {
 80 |   padding: 3rem;
 81 |   width: 50%;
 82 | }
 83 | .info-container h1 {
 84 |   text-transform: uppercase;
 85 |   font-size: 6rem;
 86 |   margin-bottom: 3rem;
 87 | }
 88 | .stats-container {
 89 |   display: flex;
 90 |   align-items: flex-end;
 91 |   margin-bottom: 1rem;
 92 | }
 93 | .stats-container h5 {
 94 |   width: 20rem;
 95 |   font-size: 2rem;
 96 |   margin: 0;
 97 |   margin-right: 5rem;
 98 | }
 99 | .stats-container p {
100 |   font-size: 2rem;
101 |   margin: 0;
102 | }
103 | .content {
104 |   font-size: 1.5rem;
105 |   margin-top: 4rem;
106 | }
107 | 
108 | img {
109 |   width: 10rem;
110 | }
111 | </style>
112 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/pages/restaurants/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
 4 |       <Head>
 5 |         <Title>Top 5O Restaurants in the World</Title>
 6 |         <Meta name="description" content="My page is cool" />
 7 |         <Link
 8 |           rel="preload"
 9 |           href="https://www.iconpacks.net/icons/2/free-sad-face-icon-2691-thumb.png"
10 |           as="script"
11 |         />
12 |       </Head>
13 |     </Html>
14 |     <NuxtLayout name="custom">
15 |       <div class="container">
16 |         <RestaurantTable />
17 |       </div>
18 |     </NuxtLayout>
19 |   </div>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/02-Top-Restaurants/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/03-DarkMode/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .nuxt
4 | nuxt.d.ts
5 | .output
6 | 


--------------------------------------------------------------------------------
/03-DarkMode/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | We recommend to look at the [documentation](https://v3.nuxtjs.org).
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies
 8 | 
 9 | ```bash
10 | yarn install
11 | ```
12 | 
13 | ## Development
14 | 
15 | Start the development server on http://localhost:3000
16 | 
17 | ```bash
18 | yarn dev
19 | ```
20 | 
21 | ## Production
22 | 
23 | Build the application for production:
24 | 
25 | ```bash
26 | yarn build
27 | ```
28 | 
29 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).


--------------------------------------------------------------------------------
/03-DarkMode/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { isDarkMode } = useDarkMode();
 3 | 
 4 | const lala;
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div :style="isDarkMode ? { backgroundColor: 'black' } : null">
 9 |     <Nav />
10 |     <Heading />
11 |     <Cards />
12 |   </div>
13 | </template>
14 | 
15 | <style>
16 | * {
17 |   margin: 0;
18 |   padding: 0;
19 |   font-family: Georgia;
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/03-DarkMode/components/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | interface CardProps {
 3 |   card: {
 4 |     img: string;
 5 |     title: string;
 6 |     author: string;
 7 |   };
 8 | }
 9 | const { isDarkMode } = useDarkMode();
10 | const props = defineProps<CardProps>();
11 | </script>
12 | 
13 | <template>
14 |   <div
15 |     class="card"
16 |     :style="isDarkMode ? { backgroundColor: 'black', color: 'white' } : null"
17 |   >
18 |     <img :src="card.img" alt="" />
19 |     <div class="content">
20 |       <h3>{{ card.title }}</h3>
21 |       <p>{{ card.author }}</p>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <style scoped>
27 | .card {
28 |   box-shadow: 1px 1px 5px black;
29 |   background: white;
30 |   width: 30%;
31 |   margin-bottom: 30px;
32 |   border-radius: 5px;
33 |   overflow: hidden;
34 | }
35 | 
36 | img {
37 |   width: 100%;
38 |   height: 200px;
39 | }
40 | 
41 | .content {
42 |   padding: 10px;
43 | }
44 | 
45 | p {
46 |   margin-top: 10px;
47 | }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/03-DarkMode/components/Cards.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { isDarkMode } = useDarkMode();
 3 | const cards = [
 4 |   {
 5 |     img: "https://images.unsplash.com/photo-1511919884226-fd3cad34687c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Y2FyfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
 6 |     title: "Sports Cars are Just Not Worth it",
 7 |     author: "Laith Harb",
 8 |   },
 9 |   {
10 |     img: "https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVzZXJ0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
11 |     title: "How to Survive in the Desert",
12 |     author: "Joe Doe",
13 |   },
14 |   {
15 |     img: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8c2hvZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
16 |     title: "Why Shoes are Turning More Red",
17 |     author: "Donald Brown",
18 |   },
19 |   {
20 |     img: "https://images.unsplash.com/photo-1520763185298-1b434c919102?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGZsb3dlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
21 |     title: "People are Eating this Deadly Flower",
22 |     author: "Mike Anderson",
23 |   },
24 |   {
25 |     img: "https://images.unsplash.com/photo-1559480671-12ceff3e511d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8a29iZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
26 |     title: "How to get the Mamba Mentality",
27 |     author: "Kobe Bean Bryant",
28 |   },
29 |   {
30 |     img: "https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3570&q=80",
31 |     title: "Worst Concert Ever",
32 |     author: "Gavin Scott",
33 |   },
34 | ];
35 | </script>
36 | 
37 | <template>
38 |   <div
39 |     class="container"
40 |     :style="isDarkMode ? { backgroundColor: 'rgb(73,72,72)' } : null"
41 |   >
42 |     <div class="content-container">
43 |       <h3 :style="isDarkMode ? { color: 'white' } : null">Reading List</h3>
44 |       <div class="cards-container">
45 |         <Card v-for="(card, index) in cards" :key="index" :card="card" />
46 |       </div>
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <style scoped>
52 | .container {
53 |   margin: 30px 0;
54 |   background: rgba(250, 250, 194, 0.637);
55 | }
56 | 
57 | .content-container {
58 |   width: 50%;
59 |   margin: 0 auto;
60 |   padding: 40px 0;
61 | }
62 | 
63 | .cards-container {
64 |   margin-top: 30px;
65 |   display: flex;
66 |   justify-content: space-between;
67 |   flex-wrap: wrap;
68 | }
69 | 
70 | h3 {
71 |   font-size: 25px;
72 | }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/03-DarkMode/components/Heading.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { isDarkMode } = useDarkMode();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="container">
 7 |     <div class="content-container">
 8 |       <div class="text-container">
 9 |         <h4>Based on your reading history</h4>
10 |         <h2 :style="isDarkMode ? { color: 'white' } : null">
11 |           Designing search for mobile apps
12 |         </h2>
13 |         <p :style="isDarkMode ? { color: 'white' } : null" class="date">
14 |           Aug 26th, 2021, 4pm
15 |         </p>
16 |         <p :style="isDarkMode ? { color: 'white' } : null" class="snippet">
17 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, in.
18 |           Obcaecati in iusto minima impedit assumenda perferendis natus tempore
19 |           modi ducimus. Blanditiis, quis. Maxime delectus ducimus assumenda vel
20 |           accusantium, eligendi nobis accusamus fuga, hic, natus ab odit. Earum,
21 |           eveniet magnam perspiciatis similique odit cupiditate optio aut fugit,
22 |           inventore, dolorem id?
23 |         </p>
24 |       </div>
25 |       <img
26 |         src="https://media.istockphoto.com/photos/mobile-responsive-website-development-wireframe-design-preview-on-picture-id844419966?b=1&k=20&m=844419966&s=170667a&w=0&h=Dfps34xqMI2CaLkKMznJnESU4G_XY5evvlC9ui9XEJk="
27 |         alt=""
28 |       />
29 |     </div>
30 |   </div>
31 | </template>
32 | 
33 | <style scoped>
34 | h4 {
35 |   text-transform: uppercase;
36 |   font-size: 20px;
37 |   color: grey;
38 | }
39 | 
40 | h2 {
41 |   margin-top: 15px;
42 |   font-size: 40px;
43 | }
44 | 
45 | .date {
46 |   margin-top: 15px;
47 | }
48 | 
49 | .content-container {
50 |   display: flex;
51 | }
52 | 
53 | .text-container {
54 |   padding-right: 50px;
55 | }
56 | 
57 | .snippet {
58 |   margin-top: 30px;
59 |   font-size: 20px;
60 |   line-height: 30px;
61 | }
62 | 
63 | .container {
64 |   width: 50%;
65 |   margin: 0 auto;
66 |   padding: 50px 0;
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/03-DarkMode/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { isDarkMode, toggleDarkMode } = useDarkMode();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <nav :style="isDarkMode ? { backgroundColor: 'rgb(73,72,72)' } : null">
 7 |     <div :style="isDarkMode ? { color: 'white' } : null">
 8 |       <h1>Artikle</h1>
 9 |       <label class="switch">
10 |         <input type="checkbox" v-model="isDarkMode" @click="toggleDarkMode" />
11 |         <span class="slider round"></span>
12 |       </label>
13 |     </div>
14 |   </nav>
15 | </template>
16 | 
17 | <style scoped>
18 | nav {
19 |   border-bottom: 1px solid rgba(73, 72, 72, 0.274);
20 |   padding: 20px;
21 |   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.253);
22 | }
23 | 
24 | nav div {
25 |   width: 50%;
26 |   margin: 0 auto;
27 |   display: flex;
28 |   justify-content: space-between;
29 | }
30 | 
31 | h1 {
32 |   font-size: 30px;
33 | }
34 | 
35 | /* The switch - the box around the slider */
36 | .switch {
37 |   position: relative;
38 |   display: inline-block;
39 |   width: 60px;
40 |   height: 34px;
41 | }
42 | 
43 | /* Hide default HTML checkbox */
44 | .switch input {
45 |   opacity: 0;
46 |   width: 0;
47 |   height: 0;
48 | }
49 | 
50 | /* The slider */
51 | .slider {
52 |   position: absolute;
53 |   cursor: pointer;
54 |   top: 0;
55 |   left: 0;
56 |   right: 0;
57 |   bottom: 0;
58 |   background-color: #ccc;
59 |   -webkit-transition: 0.4s;
60 |   transition: 0.4s;
61 | }
62 | 
63 | .slider:before {
64 |   position: absolute;
65 |   content: "";
66 |   height: 26px;
67 |   width: 26px;
68 |   left: 4px;
69 |   bottom: 4px;
70 |   background-color: white;
71 |   -webkit-transition: 0.4s;
72 |   transition: 0.4s;
73 | }
74 | 
75 | input:checked + .slider {
76 |   background-color: #2196f3;
77 | }
78 | 
79 | input:focus + .slider {
80 |   box-shadow: 0 0 1px #2196f3;
81 | }
82 | 
83 | input:checked + .slider:before {
84 |   -webkit-transform: translateX(26px);
85 |   -ms-transform: translateX(26px);
86 |   transform: translateX(26px);
87 | }
88 | 
89 | /* Rounded sliders */
90 | .slider.round {
91 |   border-radius: 34px;
92 | }
93 | 
94 | .slider.round:before {
95 |   border-radius: 50%;
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/03-DarkMode/composables/useDarkMode.ts:
--------------------------------------------------------------------------------
 1 | const useDarkMode = () => {
 2 |   const isDarkMode = useState("darkMode", () => false);
 3 | 
 4 |   const toggleDarkMode = () => {
 5 |     isDarkMode.value = !isDarkMode.value;
 6 |   };
 7 | 
 8 |   return {
 9 |     isDarkMode,
10 |     toggleDarkMode,
11 |   };
12 | };
13 | 
14 | export default useDarkMode;
15 | 


--------------------------------------------------------------------------------
/03-DarkMode/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtConfig } from "nuxt3";
2 | 
3 | // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
4 | export default defineNuxtConfig({});
5 | 


--------------------------------------------------------------------------------
/03-DarkMode/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "nuxi dev",
 5 |     "build": "nuxi build",
 6 |     "start": "node .output/server/index.mjs"
 7 |   },
 8 |   "devDependencies": {
 9 |     "nuxt3": "latest"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/03-DarkMode/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/04-WeatherApp/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .nuxt
4 | nuxt.d.ts
5 | .output
6 | .env


--------------------------------------------------------------------------------
/04-WeatherApp/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | We recommend to look at the [documentation](https://v3.nuxtjs.org).
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies
 8 | 
 9 | ```bash
10 | yarn install
11 | ```
12 | 
13 | ## Development
14 | 
15 | Start the development server on http://localhost:3000
16 | 
17 | ```bash
18 | yarn dev
19 | ```
20 | 
21 | ## Production
22 | 
23 | Build the application for production:
24 | 
25 | ```bash
26 | yarn build
27 | ```
28 | 
29 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).


--------------------------------------------------------------------------------
/04-WeatherApp/app.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | const cookie = useCookie("city");
  3 | const config = useRuntimeConfig();
  4 | 
  5 | if (!cookie.value) cookie.value = "Toronto";
  6 | 
  7 | const search = ref(cookie.value);
  8 | const input = ref("");
  9 | const background = ref("");
 10 | 
 11 | const { data: city, error } = useAsyncData(
 12 |   "city",
 13 |   async () => {
 14 |     let response;
 15 | 
 16 |     try {
 17 |       response = await $fetch(
 18 |         `https://api.openweathermap.org/data/2.5/weather?q=${search.value}`,
 19 |         {
 20 |           params: {
 21 |             units: "metric",
 22 |             appid: config.WEATHER_APP_SECRET,
 23 |           },
 24 |         }
 25 |       );
 26 | 
 27 |       cookie.value = search.value;
 28 | 
 29 |       const temp = response.main.temp;
 30 | 
 31 |       if (temp <= -10) {
 32 |         background.value =
 33 |           "https://images.unsplash.com/photo-1483664852095-d6cc6870702d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80";
 34 |       } else if (temp > -10 && temp <= 0) {
 35 |         background.value =
 36 |           "https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80";
 37 |       } else if (temp > 0 && temp <= 10) {
 38 |         background.value =
 39 |           "https://images.unsplash.com/photo-1560258018-c7db7645254e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=4032&q=80";
 40 |       } else {
 41 |         background.value =
 42 |           "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3546&q=80";
 43 |       }
 44 |     } catch (e) {}
 45 | 
 46 |     return response;
 47 |   },
 48 |   {
 49 |     watch: [search],
 50 |   }
 51 | );
 52 | 
 53 | let today = new Date();
 54 | 
 55 | today = today.toLocaleDateString("en-US", {
 56 |   weekday: "long",
 57 |   year: "numeric",
 58 |   month: "long",
 59 |   day: "numeric",
 60 | });
 61 | 
 62 | const handleClick = () => {
 63 |   const formatedSearch = input.value.trim().split(" ").join("+");
 64 |   search.value = formatedSearch;
 65 |   input.value = "";
 66 | };
 67 | 
 68 | const goBack = () => {
 69 |   search.value = cookie.value;
 70 | };
 71 | </script>
 72 | 
 73 | <template>
 74 |   <div v-if="city" class="h-screen relative overflow-hidden">
 75 |     <img :src="background" />
 76 |     <div class="absolute w-full h-full top-0 overlay" />
 77 |     <div class="absolute w-full h-full top-0 p-48">
 78 |       <div class="flex justify-between">
 79 |         <div>
 80 |           <h1 class="text-7xl text-white">{{ city.name }}</h1>
 81 |           <p class="font-extralight text-2xl mt-2 text-white">{{ today }}</p>
 82 |           <img
 83 |             :src="`https://openweathermap.org/img/wn/${city.weather[0].icon}@4x.png`"
 84 |             class="w-56 icon"
 85 |           />
 86 |         </div>
 87 |         <div>
 88 |           <p class="text-9xl text-white font-extralight">
 89 |             {{ city.main.temp }}°
 90 |           </p>
 91 |         </div>
 92 |       </div>
 93 |       <div class="mt-20">
 94 |         <input
 95 |           type="text"
 96 |           class="w-1/2 h-10"
 97 |           placeholder="Search a city..."
 98 |           v-model="input"
 99 |         />
100 |         <button class="bg-sky-400 w-20 text-white h-10" @click="handleClick">
101 |           Search
102 |         </button>
103 |       </div>
104 |     </div>
105 |   </div>
106 |   <div v-else class="p-10">
107 |     <h1 class="text-7xl">Oops, we can't find that city</h1>
108 |     <button class="mt-5 bg-sky-400 px-10 w-50 text-white h-10" @click="goBack">
109 |       Go Back
110 |     </button>
111 |   </div>
112 | </template>
113 | 
114 | <style scoped>
115 | .overlay {
116 |   background-color: rgba(0, 0, 0, 0.5);
117 | }
118 | 
119 | .icon {
120 |   margin-left: -2.75rem;
121 |   margin-top: -2.75rem;
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/04-WeatherApp/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 | @import "tailwindcss/components";
3 | @import "tailwindcss/utilities";
4 | 


--------------------------------------------------------------------------------
/04-WeatherApp/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from "nuxt3";
 2 | 
 3 | // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 4 | export default defineNuxtConfig({
 5 |   publicRuntimeConfig: {
 6 |     WEATHER_APP_SECRET: process.env.WEATHER_APP_SECRET,
 7 |   },
 8 |   privateRuntimeConfig: {
 9 |     HELLO: "world in the server not the client",
10 |   },
11 |   css: ["~/assets/css/tailwind.css"],
12 |   build: {
13 |     postcss: {
14 |       postcssOptions: {
15 |         plugins: {
16 |           tailwindcss: {},
17 |           autoprefixer: {},
18 |         },
19 |       },
20 |     },
21 |   },
22 | });
23 | 


--------------------------------------------------------------------------------
/04-WeatherApp/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "nuxi dev",
 5 |     "build": "nuxi build",
 6 |     "start": "node .output/server/index.mjs"
 7 |   },
 8 |   "devDependencies": {
 9 |     "nuxt3": "latest"
10 |   },
11 |   "dependencies": {
12 |     "@tailwindcss/aspect-ratio": "^0.4.0",
13 |     "@tailwindcss/forms": "^0.5.0",
14 |     "@tailwindcss/line-clamp": "^0.3.1",
15 |     "@tailwindcss/typography": "^0.5.2",
16 |     "tailwindcss": "^3.0.23"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/04-WeatherApp/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require("tailwindcss/defaultTheme");
 2 | 
 3 | module.exports = {
 4 |   mode: "jit",
 5 |   content: {
 6 |     files: [
 7 |       "./components/**/*.{vue,js}",
 8 |       "./layouts/**/*.vue",
 9 |       "./pages/**/*.vue",
10 |       "./app.vue",
11 |       "./plugins/**/*.{js,ts}",
12 |       "./nuxt.config.{js,ts}",
13 |     ],
14 |   },
15 |   theme: {
16 |     extend: {
17 |       fontFamily: {
18 |         sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
19 |       },
20 |     },
21 |   },
22 |   variants: {
23 |     extend: {},
24 |   },
25 |   plugins: [
26 |     require("@tailwindcss/forms"),
27 |     require("@tailwindcss/typography"),
28 |     require("@tailwindcss/line-clamp"),
29 |     require("@tailwindcss/aspect-ratio"),
30 |   ],
31 | };
32 | 


--------------------------------------------------------------------------------
/04-WeatherApp/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/05-TodoApp/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .nuxt
4 | nuxt.d.ts
5 | .output
6 | .env


--------------------------------------------------------------------------------
/05-TodoApp/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | We recommend to look at the [documentation](https://v3.nuxtjs.org).
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies
 8 | 
 9 | ```bash
10 | yarn install
11 | ```
12 | 
13 | ## Development
14 | 
15 | Start the development server on http://localhost:3000
16 | 
17 | ```bash
18 | yarn dev
19 | ```
20 | 
21 | ## Production
22 | 
23 | Build the application for production:
24 | 
25 | ```bash
26 | yarn build
27 | ```
28 | 
29 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).


--------------------------------------------------------------------------------
/05-TodoApp/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const input = ref("");
 3 | const { todos, addTodo, updateTodo, deleteTodo } = useTodos();
 4 | 
 5 | const handleClick = () => {
 6 |   addTodo(input.value);
 7 |   input.value = "";
 8 | };
 9 | </script>
10 | 
11 | <template>
12 |   <div class="container">
13 |     <NCard class="cards">
14 |       <h1>My Todos</h1>
15 |       <div class="add-todo">
16 |         <input placeholder="Add a new todo..." v-model="input" />
17 |         <NButton @click="handleClick">Add</NButton>
18 |       </div>
19 |       <NCard
20 |         @click="() => updateTodo(todo.id)"
21 |         class="card"
22 |         v-for="todo in todos"
23 |         :key="todo.id"
24 |       >
25 |         <h4 :class="todo.completed ? 'complete' : null">{{ todo.item }}</h4>
26 |         <p @click="() => deleteTodo(todo.id)">x</p>
27 |       </NCard>
28 |     </NCard>
29 |   </div>
30 | </template>
31 | 
32 | <style scoped>
33 | .container {
34 |   padding: 2rem;
35 |   margin: 0 auto;
36 |   max-width: 50%;
37 | }
38 | 
39 | .cards {
40 |   padding: 2rem;
41 | }
42 | 
43 | input {
44 |   outline: none;
45 | }
46 | 
47 | .add-todo {
48 |   display: flex;
49 |   justify-content: space-between;
50 | }
51 | 
52 | .card {
53 |   padding: 0.5rem;
54 |   margin-top: 1rem;
55 |   cursor: pointer;
56 |   display: flex;
57 |   justify-content: space-between;
58 | }
59 | 
60 | .complete {
61 |   text-decoration: line-through;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/05-TodoApp/composables/useTodos.ts:
--------------------------------------------------------------------------------
 1 | const useTodos = () => {
 2 |   const { data: todos, refresh } = useAsyncData("todos", () => {
 3 |     return $fetch("/api/todo");
 4 |   });
 5 | 
 6 |   const addTodo = async (item) => {
 7 |     if (!item) return;
 8 |     await $fetch("/api/todo", { method: "post", body: { item } });
 9 |     refresh();
10 |   };
11 | 
12 |   const updateTodo = async (id) => {
13 |     await $fetch(`/api/todo/${id}`, { method: "put" });
14 |     refresh();
15 |   };
16 | 
17 |   const deleteTodo = async (id) => {
18 |     await $fetch(`/api/todo/${id}`, { method: "delete" });
19 |     refresh();
20 |   };
21 | 
22 |   return { todos, addTodo, updateTodo, deleteTodo };
23 | };
24 | 
25 | export default useTodos;
26 | 


--------------------------------------------------------------------------------
/05-TodoApp/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtConfig } from "nuxt3";
2 | 
3 | // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
4 | export default defineNuxtConfig({
5 |   modules: ["@nuxt/ui"],
6 | });
7 | 


--------------------------------------------------------------------------------
/05-TodoApp/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "nuxi dev",
 5 |     "build": "nuxi build",
 6 |     "start": "node .output/server/index.mjs"
 7 |   },
 8 |   "devDependencies": {
 9 |     "nuxt3": "latest"
10 |   },
11 |   "dependencies": {
12 |     "@nuxt/ui": "^0.0.0-alpha.5",
13 |     "uuid": "^8.3.2"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/05-TodoApp/server/api/todo/[id].ts:
--------------------------------------------------------------------------------
 1 | import { db } from "../../db";
 2 | import { sendError } from "h3";
 3 | 
 4 | export default defineEventHandler((e) => {
 5 |   const method = e.req.method;
 6 |   const context = e.context;
 7 |   const { id } = context.params;
 8 | 
 9 |   const findTodoById = (todoId) => {
10 |     let index;
11 |     const todo = db.todos.find((t, i) => {
12 |       if (t.id === todoId) {
13 |         index = i;
14 |         return true;
15 |       }
16 |       return false;
17 |     });
18 | 
19 |     if (!todo) {
20 |       const TodoNotFoundError = createError({
21 |         statusCode: 404,
22 |         statusMessage: "Todo not found",
23 |         data: {},
24 |       });
25 | 
26 |       sendError(e, TodoNotFoundError);
27 |     }
28 | 
29 |     return { todo, index };
30 |   };
31 | 
32 |   if (method === "PUT") {
33 |     const { todo, index } = findTodoById(id);
34 | 
35 |     const updateTodo = {
36 |       ...todo,
37 |       completed: !todo.completed,
38 |     };
39 | 
40 |     db.todos[index] = updateTodo;
41 | 
42 |     return updateTodo;
43 |   }
44 | 
45 |   if (method === "DELETE") {
46 |     const { index } = findTodoById(id);
47 | 
48 |     db.todos.splice(index, 1);
49 | 
50 |     return {
51 |       message: "item deleted",
52 |     };
53 |   }
54 | });
55 | 


--------------------------------------------------------------------------------
/05-TodoApp/server/api/todo/index.ts:
--------------------------------------------------------------------------------
 1 | import { db } from "../../db";
 2 | import { v4 as uuid } from "uuid";
 3 | import { sendError } from "h3";
 4 | 
 5 | export default defineEventHandler(async (e) => {
 6 |   const method = e.req.method;
 7 | 
 8 |   if (method === "GET") {
 9 |     console.log(db.todos);
10 |     return db.todos;
11 |   }
12 | 
13 |   if (method === "POST") {
14 |     const body = await useBody(e);
15 | 
16 |     if (!body.item) {
17 |       const TodoNotFoundError = createError({
18 |         statusCode: 400,
19 |         statusMessage: "No item provided",
20 |         data: {},
21 |       });
22 | 
23 |       sendError(e, TodoNotFoundError);
24 |     }
25 | 
26 |     const newTodo = {
27 |       id: uuid(),
28 |       item: body.item,
29 |       completed: false,
30 |     };
31 | 
32 |     db.todos.push(newTodo);
33 | 
34 |     return newTodo;
35 |   }
36 | });
37 | 


--------------------------------------------------------------------------------
/05-TodoApp/server/db/index.ts:
--------------------------------------------------------------------------------
1 | export const db = {
2 |   todos: [],
3 | };
4 | 


--------------------------------------------------------------------------------
/05-TodoApp/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/06-NotesApp/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .nuxt
4 | nuxt.d.ts
5 | .output
6 | .env


--------------------------------------------------------------------------------
/06-NotesApp/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | We recommend to look at the [documentation](https://v3.nuxtjs.org).
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies
 8 | 
 9 | ```bash
10 | yarn install
11 | ```
12 | 
13 | ## Development
14 | 
15 | Start the development server on http://localhost:3000
16 | 
17 | ```bash
18 | yarn dev
19 | ```
20 | 
21 | ## Production
22 | 
23 | Build the application for production:
24 | 
25 | ```bash
26 | yarn build
27 | ```
28 | 
29 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).


--------------------------------------------------------------------------------
/06-NotesApp/components/Auth/Card.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | const authState = ref<"login" | "signup">("login");
  3 | const authError = ref("");
  4 | const showConfirmEmailMessage = ref(false);
  5 | const input = reactive({
  6 |   password: "",
  7 |   email: "",
  8 | });
  9 | const router = useRouter();
 10 | 
 11 | const { signUp, signIn, user, signOut } = useAuth();
 12 | 
 13 | const toggleAuthState = () => {
 14 |   if (authState.value === "login") authState.value = "signup";
 15 |   else authState.value = "login";
 16 |   authError.value = "";
 17 | };
 18 | 
 19 | const handleSubmit = async () => {
 20 |   try {
 21 |     if (authState.value === "login") {
 22 |       await signIn({ email: input.email, password: input.password });
 23 |       router.push("/myprofile");
 24 |     } else {
 25 |       await signUp({ email: input.email, password: input.password });
 26 |       showConfirmEmailMessage.value = true;
 27 |     }
 28 |     input.email = "";
 29 |     input.password = "";
 30 |   } catch (err) {
 31 |     authError.value = err.message;
 32 |   }
 33 | };
 34 | </script>
 35 | 
 36 | <template>
 37 |   <div>
 38 |     <NCard class="card">
 39 |       <div v-if="!showConfirmEmailMessage">
 40 |         <h3>{{ authState }}</h3>
 41 |         <div class="input-container">
 42 |           <input placeholder="Email" v-model="input.email" />
 43 |           <input
 44 |             placeholder="Password"
 45 |             v-model="input.password"
 46 |             type="password"
 47 |           />
 48 |         </div>
 49 |         <NButton @click="handleSubmit">Submit</NButton>
 50 |         <p class="error" v-if="authError">{{ authError }}</p>
 51 |         <p @click="toggleAuthState">
 52 |           {{
 53 |             authState === "login"
 54 |               ? "Don't have an account? Create one now"
 55 |               : "Already have an account? Go ahead an log in"
 56 |           }}
 57 |         </p>
 58 |       </div>
 59 |       <div v-else>
 60 |         <h3>Check email for confirmation message</h3>
 61 |       </div>
 62 |     </NCard>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <style scoped>
 67 | .card {
 68 |   padding: 1rem;
 69 |   width: 25rem;
 70 | }
 71 | 
 72 | .card h3 {
 73 |   font-size: 1.75rem;
 74 |   text-transform: capitalize;
 75 | }
 76 | 
 77 | .input-container {
 78 |   display: flex;
 79 |   flex-direction: column;
 80 | }
 81 | 
 82 | .input-container input {
 83 |   margin-bottom: 0.3rem;
 84 |   padding: 0.2rem;
 85 |   outline: none;
 86 | 
 87 |   border: 0.1rem solid rgba(0, 0, 0, 0.1);
 88 |   border-radius: 0.2rem;
 89 | }
 90 | 
 91 | p {
 92 |   color: blue;
 93 |   font-size: 0.5rem;
 94 |   cursor: pointer;
 95 | }
 96 | 
 97 | .error {
 98 |   color: red;
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/06-NotesApp/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const { signOut, isLoggedIn } = useAuth();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <nav>
 7 |     <ul>
 8 |       <li>
 9 |         <NuxtLink to="/">Home</NuxtLink>
10 |       </li>
11 |       <li>
12 |         <NuxtLink to="/myprofile">Profile</NuxtLink>
13 |       </li>
14 |       <li v-if="isLoggedIn()" class="logout" @click="signOut">Logout</li>
15 |     </ul>
16 |   </nav>
17 | </template>
18 | 
19 | <style scoped>
20 | nav {
21 |   background: black;
22 |   height: 10vh;
23 | }
24 | 
25 | ul {
26 |   display: flex;
27 |   height: 100%;
28 |   align-items: center;
29 |   padding: 0 2rem;
30 | }
31 | 
32 | li {
33 |   color: white;
34 |   margin-right: 1rem;
35 | }
36 | 
37 | .logout {
38 |   margin-left: auto;
39 |   cursor: pointer;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/06-NotesApp/composables/useAuth.ts:
--------------------------------------------------------------------------------
 1 | const useAuth = () => {
 2 |   const user = useState("user", () => null);
 3 |   const { supabase } = useSupabase();
 4 | 
 5 |   supabase.auth.onAuthStateChange((e, session) => {
 6 |     user.value = session?.user || null;
 7 |   });
 8 | 
 9 |   const signUp = async ({ email, password, ...metadata }) => {
10 |     const { user: u, error } = await supabase.auth.signUp(
11 |       {
12 |         email,
13 |         password,
14 |       },
15 |       {
16 |         data: metadata,
17 |         redirectTo: `${window.location.origin}/myprofile?source=email`,
18 |       }
19 |     );
20 |     if (error) throw error;
21 |     return u;
22 |   };
23 | 
24 |   const signIn = async ({ email, password }) => {
25 |     const { user: u, error } = await supabase.auth.signIn({
26 |       email,
27 |       password,
28 |     });
29 |     if (error) throw error;
30 |     return u;
31 |   };
32 | 
33 |   const signOut = async () => {
34 |     const { error } = await supabase.auth.signOut();
35 |     if (error) throw error;
36 |   };
37 | 
38 |   const isLoggedIn = () => {
39 |     return !!user.value;
40 |   };
41 | 
42 |   return {
43 |     user,
44 |     signUp,
45 |     signIn,
46 |     signOut,
47 |     isLoggedIn,
48 |   };
49 | };
50 | 
51 | export default useAuth;
52 | 


--------------------------------------------------------------------------------
/06-NotesApp/composables/useSupabase.ts:
--------------------------------------------------------------------------------
 1 | import { createClient } from "@supabase/supabase-js";
 2 | 
 3 | const SUPABASE_KEY =
 4 |   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhyeGVib2NoanFtaXFycnFycXF2Iiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTY1MDIxMzI1MCwiZXhwIjoxOTY1Nzg5MjUwfQ.w30KrvbS3krHbHvhUsFTX-ag0DX2RgSGaivSE4KPRDA";
 5 | const SUPABASE_URL = "https://xrxebochjqmiqrrqrqqv.supabase.co";
 6 | 
 7 | const useSupabase = () => {
 8 |   const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
 9 | 
10 |   return {
11 |     supabase,
12 |   };
13 | };
14 | 
15 | export default useSupabase;
16 | 


--------------------------------------------------------------------------------
/06-NotesApp/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <Nav />
4 |     <slot />
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/06-NotesApp/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtConfig } from "nuxt3";
2 | 
3 | // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
4 | // qehguqoghoqwihfg932hg023gb23ig32
5 | export default defineNuxtConfig({
6 |   modules: ["@nuxt/ui"],
7 | });
8 | 


--------------------------------------------------------------------------------
/06-NotesApp/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "nuxi dev",
 5 |     "build": "nuxi build",
 6 |     "start": "node .output/server/index.mjs"
 7 |   },
 8 |   "devDependencies": {
 9 |     "nuxt3": "latest"
10 |   },
11 |   "dependencies": {
12 |     "@nuxt/ui": "^0.0.0-alpha.5",
13 |     "@supabase/supabase-js": "^1.34.1"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/06-NotesApp/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { supabase } = useSupabase();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div>
 7 |     <div class="container">
 8 |       <AuthCard />
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <style scoped>
14 | .container {
15 |   max-width: 50%;
16 |   margin: 0 auto;
17 |   display: flex;
18 |   justify-content: center;
19 |   align-items: center;
20 |   height: 90vh;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/06-NotesApp/pages/myprofile.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <h1>Notes App Profile</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/06-NotesApp/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------