Telux Restaurant - Web App (Vue.js & Firebase)

Telux Restaurant is a dynamic web app by using Vue js and firebase databasew with different components, Vue-Router, etc. The user can easily using the add, update, remove food items to the applciation and disply to frontend without refreshing the page. This is what makes navigation easy and it really nice web applications. https://telux-restaurant.firebaseapp.com/#/

-- https://telux-restaurant.firebaseapp.com/#/

Project Structure

• Material Design
• Navbar Component
• Index Component
• Deleting (local) Data
• Introduction to Firebase
• Setting up Firestore
• Installing Firebase
• Retrieving Firestore Data
• Deleting Firestore Data
• Add Smoothie Component
• Adding Ingredients
• Outputting Ingredients
• Saving Records to Firestore
• Deleting Ingredients
• Edit Smoothie Route
• Firestore Queries
• Edit Smoothie Form
• Updating Firestore Records
• Deploying to Firebase
• Project Review

## A complete CRUD operation by Vue.js. You can add, edit, update, delete the food items.

-> Use Vue CLI -> SPA (single page applications) -> Vue Router, Components, -> Data Binding, Events, Porps, -> Using Material Design -> Navbar Component -> Methods -> Data Binding -> Events -> The Event Object -> Two-way Data Binding (v-model) -> Modifiers -> Conditional Output with v-if -> Looping with v-for

Firebase Database connect and deploy the web app

• Setting up Firestore
• Installing Firebase
• Retrieving Firestore Data
• Updating Firestore Data
• Deleting Firestore Data

DEMO

https://telux-restaurant.firebaseapp.com/#/

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.