Javascript Vue

CollabShop WebSite Built With Vue.js3 min read

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.

GitHub

View Github

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest