Movies Store App (Vue + Nuxt.js + Vuex + Appbase)

This is a tutorial series aiming to teach how to build a feature-rich, scalable e-commerce app using Vue, Vuex and Nuxt.

You will learn the following concepts:

Basics of Vue and VueX, and how to use them effectively by building an e-commerce app from ground up,

Build a full-stack progressive web app with offline support,

Build an end-to-end app with a first class search experience,

The latest trends in ES6/ES7, how to use CSS-in-JS & dive into server-side rendering (SEO focused) using Nuxt.JS,

Learn about the following SaaS services:

Appbase.io (for powering search and search-driven analytics),

Auth0 (for user authentication functionality),

Stripe (for handling payments), and

Heroku and Vercel(for hosting the app).

Getting Started

1. Clone the repo or Unzip the project

If you’re using a Zip of the project, just unzip and go to the root directory.

If you’re accessing this via the Github repository, you can clone the project using:

2. Set up Environment variables

Create a .env file at the root & add the following config variables:

3. Run the project

Run the following command to run the project locally

Voila! Your project is live at localhost:4000.

Note: If you’re on windows, use yarn windows-dev instead of yarn dev in the above command.

4. Customize Theme

You can easily customize the app UI just by modifying the theme variables in utils/constants.js file.

Check out the tutorial series

Getting Started with Vue and Nuxt.JS

Basics of Vue

Home Page + Layout + CSS-in-JS (Emotion.JS)

Basics of VueX

Appbase.io + ReactiveSearch UI Components

Building The Search Page

Authentication with Auth0

Product Page + Checkout Page + Payment with Stripe

Analytics with Appbase.io

Deploying the Nuxt App:
A) Deployment with Heroku
B) Deployment with Vercel

PWA (Progressive Web App) compatibility

If you’re looking for the React version of our series, you can check out this post that uses React, Redux, Next.JS and appbase.io:
Build an end-to-end Movie Store App with React + Redux + Appbase.io (2021)

GitHub

https://github.com/appbaseio-apps/vue-moviestore