Ecommerce built with Quasar

[justinbeaty]

Hello Quasarians!

I just launched a redesign of an ecommerce site I manage, now built with Quasar. I've been working on this for about the past year; it's been a lot of work, but I think the results look great. The site is focused around giving our customers a full look inside of the products, so they can listen, view, and watch videos of each product. Take a look around, my only ask is that if you choose to register an account to see the customer dashboard pages, please don't use junk data like foobar@example.com, the account will likely be deleted by our admin as spam. We have free products available under Deals > Free Products in case you want to see the checkout flow, etc.

Here's some screenshots:

[justinbeaty]

If you have any questions on how I accomplished anything, feel free to ask. The site is using Quasar v1 (will migrate to v2 sometime within the next year) and uses SSR mode.

[justinbeaty]

@ontwikkelfabriek

Hey Dobbel, good to speak to you again. You should be seeing me around on these forums again, for a while I was just deep into crunch mode and I barely had time to even water my plants, lol.

• Stack is Quasar + Nodejs + Magento + MySQL + Redis + Nginx. Quasar speaks only to the nodejs script, which then gets data from redis, magento, or mysql, depending on what it needs. I try to avoid calling magento at all costs, since it's the slowest. Instead I cache as much as I can into redis. The site is deployed via pm2 with both the SSR server and nodejs server running in cluster mode.
• The stack never changed during development. Magento is the constant here, which is what we used for our old site, and wanted to keep using. I probably did go through a few iterations on how the nodejs script was structured though.
• I didn't really plan anything visual beforehand. The process was that I first created a proof of concept nodejs server that would return product info, hooked up a proof of concept Quasar project to talk to the API, and kind of went from there. I probably used more of Quasar's default styles in the beginning, but overtime replaced some with custom components or wrappers around other Quasar components.
• Not planning on using this app for other ecommerce sites directly, but I have a few other sites from this same company (where I'm the sole programmer, fulltime) that I want to redesign, and I'll probably use some same concepts and components. Right now it is just too tightly coupled to the backend and this site's product types. Eventually, I may want to think about creating a generic and open-source project that can rival vue-storefront, but I'm not sure how I would go about that yet. Side note, has anyone ever come across a good system where modules can inject themselves into a node server and vue project? Maybe the vue part could be done with app extensions?
• No github link, I may try to over the next year as I migrate to Quasar v2 clean up some of my custom components and post them, and perhaps the ultimate goal of the previous bullet point. Here's the packages I'm using:

Dependencies:

• cross-fetch Used for calling the API from both frontend and SSR, I like fetch better than axios.
• load-google-maps-api & @google/markerclustererplus
• pdfjs-dist Used for rendering PDFs client-side.
• yt-player Useful library for loading Youtube videos.
• fastest-levenshtein For clientside filtering on certain pages, the main search bar uses RediSearch though.
• mousetrap for creating keyboard shortcuts.
• oaf-routing & focus-visible Helpful libraries for improving accessibility.
• focus-trap & focus-trap-vue Certain places where I wanted to create a focus trap, like the left hand drawer. Quasar has some code already to make focus traps, but doesn't on the drawer and if I had more time I'd probably see if I could import Quasar's functions instead of including another library.
• lazysizes Defers loading of images until visible.
• vue-lazy-hydration Lets you not hydrate some compenents until visible or other manual triggers. Helps to get a higher time to interactive score.
• vue-virtual-scroller I used this instead of Quasar's built in infinite scroll library for some reasons that I don't quite recall, but it seemed to have better performance for my needs.
• vue-smooth-dnd For dragging to reorder in the wishlist screen.
• vuelidate Self explanitory, just a bit nicer than manually do it with Quasar.
• quasar, @quasar/extras, core-js and of course Quasar!
• plus a couple of polyfills

Dev Dependencies, not much here...

• @quasar/app
• compression-webpack-plugin Used to generate both .gz and .br versions of each js / css file
• worker-loader Used for pdf.js loading
• dotenv For the SSR server to get certain env data Strike this, I actually just wrote a simple function to get env vars, as the dotenv source code really isn't that complicated (I need to remove it from my package.json)

You can see I tried to keep bundle size down with not too many packages, and I've made pretty heavy use of webpack splitting to not serve a lot of those packages until needed.

[pikil]

Very impressive work and design!
The shop looks solid and working fast!

How much time did you spend on creating this interface and how many people worked?

[justinbeaty]

@pikil just myself was working on it. All together it was about 15 months, but there was a lot more to this site overhaul than the frontend quasar project. A lot of time was spent on the backend Magento side, and various other parts of this project.

[pikil]

@justinbeaty Totally understandable, that is why I asked actually - the website seems to be very solid and all the components fit nicely together, plus there are heaps of details from what I see.
So, that does actually feel like a lot of effort was put into this - really nice work :)

Maybe the sticky top menu would be a good addition, just something what draws attention away. And I noticed that the sound sample cannot be stopped by clicking on the same button (e.g. Play/Pause), so I had to scroll to the top to stop the sound (was checking from mobile).

[justinbeaty]

@pikil Thanks for the kind words and feedback!

I think you probably were on either the Radio or Preview sub pages. One of our customers did also mention they expected to be able to click on the same track to pause, and I'm not sure why I didn't make that happen, so I'll be fixing it today.