CollabShop WebSite Built With Vue.js
CollabShop
CollabShop provides a next-generation, revolutionary. new paradigm, way of shopping. Buy your Black Friday offers in group and buy more, buy better, buy faster.
For real tho, we have designed a fully interactive E-commerce website with multiple users, multiple carts, a split bill checkout page, items organized by categories, users and admins, end to end tests, and many more. Our user experience is so rich it will steal your wallet.
With CollabShop you can buy with your spouse, your friends, your family, all at the same time with multiple sessions. We are talking a multi-pentatillion-dollar idea.
Users see what you want to buy in real time and how many users are in the same session. Show off how much money you spend on items, now collaboratively!
Tech Stack
Our stacks are as deep as our wallets!
We have it all. We use bleeding age Vue.js with vuetify, a supper well tested no bugs 100% guaranteed node.js backend (for real tho! It has tests!). We use a non-decentralized, cyptodisrupting Mongo Database.
AND ON TOP OF ALL OF THIS? We use Y.js to sync stuff IN FREAKING REALTIME WITH WEBSOCKETS MAN. WE ARE ON FIRE.
Challenges & What we learned
CSS: CSS is hard. For real.
Y.js: We had some trouble integrating everything together. BUT IT IS MAGIIIIC. It really is awesome. Although one needs to learn how to handle the data formats.
Btw, the checkout process may have a bug.
Show me some photos
Build Setup
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generate
For detailed explanation on how things work, check out the documentation.
Special Directories
You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don’t want to use their functionality.
assets
The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
More information about the usage of this directory in the documentation.
components
The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
More information about the usage of this directory in the documentation.
layouts
Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
More information about the usage of this directory in the documentation.
pages
This directory contains your application views and routes. Nuxt will read all the *.vue files inside this directory and setup Vue Router automatically.
More information about the usage of this directory in the documentation.
plugins
The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use Vue.use(), you should create a file in plugins/ and add its path to plugins in nuxt.config.js.
More information about the usage of this directory in the documentation.
static
This directory contains your static files. Each file inside this directory is mapped to /.
Example: /static/robots.txt is mapped as /robots.txt.
More information about the usage of this directory in the documentation.
store
This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
More information about the usage of this directory in the documentation.