ratracegrad / meal-prep Goto Github PK

Source code for a 4-part series I wrote about Vue, Vue Router, Vuex and Vuetify

Home Page: https://meal-prep-9b30a.firebaseapp.com/

JavaScript 33.71% HTML 1.88% Vue 64.40%

vue vue-router vuex vuetify vuejs vue2 firebase-auth firebase-database firebase

meal-prep's Introduction

meal-prep

This is the source code for a four-part series I wrote on creating a Vue.js application that also uses Vue-Router, Vuetify and Vuex. The articles take you through creating a Vue application and then adding on to it until you have created a fully functional meal delivery website.

Here is what we create in the articles:

Links to the Articles

As I mentioned this source code is the final code created as part of four articles I wrote on creating a Vue.js application using Vue-Router, Vuex, Vuetify and Firebase. Here are links to each version of the articles:
Part 1 - Covers creating the application and adding Vuetify for styling.
Part 2 - Covers using Vue Router to add navigating between pages in the application.
Part 3 - Covers adding Vuex for state management. Also we connect to a Recipes API to get content for our application. Part 4 - Covers using Firebase for Authentication. Users can create an account and order recipes. When they login to their account they will see their orders.

Live Demo

I have a live demo of the meal prep application. You can view it here.

Technology Used

Vue.js
Vue CLI
Vuex
Vuetify
Firebase

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

meal-prep's People

Contributors

Stargazers

Watchers

Forkers

patbi emmabaye swaminator goryszewskig rizafr troubleminds boulder67 insich antvascor upperapps xdevelopers gustavotancarasantander metin aleprog olfamkadmini zgospodinov andillas estebanmed nagramachandran endonix margaritasj spakit darwinrc aniekanedet keeplearningandtrying ochdidji albertvolkman alexriet romanoing ninadsagdeo conceptcodes tangosoftsrl todun invsblmen geekmaros cgodf gabomarf jsdbroughton abdulsalamdahood ajmaxwell kidikudazi lgs yezhus stanxii ahmedayaz kangbudz ikigai-pt noellyb76 ugonna1054 maingijesse edward01 minhkhanb antoniocaccamo novanlexiku tburks tibsgracia yohanvienne sekretk ruglax silpajacob449 coreenergy mohammed5253 bravew bhaidar acostadu ivosanchez stbtony curlybraces huangmarco totozao msabirz doc22940 agnesia-lubuk globalic blackmono sailfish009 bericonsulting mashiane jatinsmu cercuit-ola ryudo2k5 5l1v3r1 kody-liou bukalov ahmedgenina adantes326 qadirforu123 ahsanmumtaz1105 kutayzorlu saidsl samjoan juha-finvoicer kms74 lichnak 418sec wilmanbhigu liya-333 bchwebdev josueabou jackdoe13

meal-prep's Issues

Breaking changes in Vuetify 2.0 means people can not follow your article / code here

You may want to update the article / code, or show how to stick to the older vuetify version

npm install failure

I tried to download and build this project but I get the following error:

pc:~/Data/src/charts git clone https://github.com/ratracegrad/meal-prep.git
Cloning into 'meal-prep'...
remote: Enumerating objects: 114, done.
remote: Total 114 (delta 0), reused 0 (delta 0), pack-reused 114
Receiving objects: 100% (114/114), 1.51 MiB | 766.00 KiB/s, done.
Resolving deltas: 100% (30/30), done.
pc:~/Data/src/charts cd meal-prep/
pc:~/Data/src/charts/meal-prep npm install

> [email protected] install /home/mark/Data/src/charts/meal-prep/node_modules/nodent-runtime
> node build.js

## Built /home/mark/Data/src/charts/meal-prep/node_modules/nodent-runtime/dist/index.js

> [email protected] install /home/mark/Data/src/charts/meal-prep/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp WARN Using request for node-pre-gyp https download 
node-pre-gyp WARN Tried to download(403): https://storage.googleapis.com/grpc-precompiled-binaries/node/grpc/v1.13.1/node-v67-linux-x64-glibc.tar.gz 
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, glibc) (falling back to source compile with node-gyp) 
node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v67 ABI, glibc) (falling back to source compile with node-gyp) 
node-pre-gyp WARN Hit error Connection closed while downloading tarball file 
make: Entering directory '/home/mark/Data/src/charts/meal-prep/node_modules/grpc/build'
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
make: Entering directory '/home/mark/Data/src/charts/meal-prep/node_modules/grpc/build'
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/avl/avl.o
sed: can't read ./Release/.deps/Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o.d.raw: No such file or directory
rm: cannot remove './Release/.deps/Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o.d.raw': No such file or directory
make: *** [grpc.target.mk:450: Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o] Error 1
make: Leaving directory '/home/mark/Data/src/charts/meal-prep/node_modules/grpc/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:193:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:255:12)
gyp ERR! System Linux 5.0.10-arch1-1-ARCH
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/home/mark/Data/src/charts/meal-prep/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-glibc/grpc_node.node" "--module_name=grpc_node" "--module_path=/home/mark/Data/src/charts/meal-prep/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-glibc" "--napi_version=4" "--node_abi_napi=napi"
gyp ERR! cwd /home/mark/Data/src/charts/meal-prep/node_modules/grpc
gyp ERR! node -v v11.14.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/bin/node /usr/lib/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/home/mark/Data/src/charts/meal-prep/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-glibc/grpc_node.node --module_name=grpc_node --module_path=/home/mark/Data/src/charts/meal-prep/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-glibc --napi_version=4 --node_abi_napi=napi' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/mark/Data/src/charts/meal-prep/node_modules/grpc/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:193:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:999:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:266:5)
node-pre-gyp ERR! System Linux 5.0.10-arch1-1-ARCH
node-pre-gyp ERR! command "/usr/bin/node" "/home/mark/Data/src/charts/meal-prep/node_modules/grpc/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--library=static_library"
node-pre-gyp ERR! cwd /home/mark/Data/src/charts/meal-prep/node_modules/grpc
node-pre-gyp ERR! node -v v11.14.0
node-pre-gyp ERR! node-pre-gyp -v v0.10.3
node-pre-gyp ERR! not ok 
Failed to execute '/usr/bin/node /usr/lib/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/home/mark/Data/src/charts/meal-prep/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-glibc/grpc_node.node --module_name=grpc_node --module_path=/home/mark/Data/src/charts/meal-prep/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-glibc --napi_version=4 --node_abi_napi=napi' (1)
make: *** No rule to make target 'Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o', needed by 'Release/obj.target/libgrpc.a'.  Stop.
make: Leaving directory '/home/mark/Data/src/charts/meal-prep/node_modules/grpc/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:193:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:255:12)
gyp ERR! System Linux 5.0.10-arch1-1-ARCH
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/home/mark/Data/src/charts/meal-prep/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-glibc/grpc_node.node" "--module_name=grpc_node" "--module_path=/home/mark/Data/src/charts/meal-prep/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-glibc" "--napi_version=4" "--node_abi_napi=napi"
gyp ERR! cwd /home/mark/Data/src/charts/meal-prep/node_modules/grpc
gyp ERR! node -v v11.14.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build --library=static_library`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mark/.npm/_logs/2019-05-02T06_17_57_028Z-debug.log

pc:~/Data/src/charts/meal-prep uname -a
Linux pc 5.0.10-arch1-1-ARCH #1 SMP PREEMPT Sat Apr 27 20:06:45 UTC 2019 x86_64 GNU/Linux
pc:~/Data/src/charts/meal-prep npm --version
6.9.0
pc:~/Data/src/charts/meal-prep vue --version
3.7.0
pc:~/Data/src/charts/meal-prep

addRecipe in mutations is returning an erro when adding an item.

Hello,
Thanks for this nice tutorial! However there is an error on the add item when orderRecipe method gets clicked! it throws an error like "[vuex] unknown action type: addRecipe"
I could not figure it out.
Thanks.

After log in [vuex] do not mutate vuex store state outside mutation handlers.

Hi,

When I try to log in I have the following error
[vuex] do not mutate vuex store state outside mutation handlers.
It is because the commits inside the login function:

userLogin({ commit }, { email, password }) { firebase .auth() .signInWithEmailAndPassword(email, password) .then(user => { commit('setUser', user); commit('setIsAuthenticated', true); this.$router.push('/'); }) .catch(() => { commit('setUser', null); commit('setIsAuthenticated', false); this.$router.push('/login'); }); },

If I commit these two:

commit('setUser', user);
commit('setIsAuthenticated', true);
the function works without any problem.

issue in mobile

I am trying to open this in mobile but it's menus are not working on mobile.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.