feat: BrowserStack demo ecommerce app

Author: Darshan-Chauhan

.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+/.vscode/
 
 # debug
 npm-debug.log*

.vscode/launch.json

@@ -0,0 +1,10 @@
+{
+  "type": "node",
+  "request": "launch",
+  "name": "Launch via NPM",
+  "runtimeExecutable": "${workspaceFolder}\\node_modules\\.bin\\next",
+  "port": 9229,
+  "env": {
+    "NODE_OPTIONS": "--inspect"
+  }
+}

Dockerfile

@@ -0,0 +1,27 @@
+# Install dependencies only when needed
+FROM node:12 AS deps
+
+WORKDIR /opt/app
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:12 AS builder
+
+ENV NODE_ENV=production
+WORKDIR /opt/app
+COPY . .
+COPY --from=deps /opt/app/node_modules ./node_modules
+RUN yarn build
+
+# Production image, copy all the files and run next
+FROM node:12 AS runner
+
+ARG X_TAG
+WORKDIR /opt/app
+ENV NODE_ENV=production
+COPY --from=builder /opt/app/next.config.js ./
+COPY --from=builder /opt/app/public ./public
+COPY --from=builder /opt/app/.next ./.next
+COPY --from=builder /opt/app/node_modules ./node_modules
+CMD ["node_modules/.bin/next", "start"]

README.md

@@ -2,17 +2,20 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, run the development server:
+First, Install docker:
 
 ```bash
-npm run dev
-# or
-yarn dev
+https://docs.docker.com/engine/install/
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Run below command to build and start the server
+```bash
+docker build -t client . && docker run --name CLIENT_CONTAINER -p 0.0.0.0:5000:3000 client
+```
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+```bash
+visit http://localhost:5000/
+```
 
 ## Learn More
 

next.config.js

@@ -0,0 +1,50 @@
+const optimizedImages = require('next-optimized-images');
+const withStyles = require('@webdeb/next-styles')
+const withPlugins = require('next-compose-plugins');
+const webpack = require('webpack');
+
+const sassConfig = {
+  sass: true, // use .scss files
+  modules: true // style.(m|module).css & style.(m|module).scss for module files
+}
+
+const optimizedImagesConfig = {
+  inlineImageLimit: 8192,
+  imagesFolder: 'images',
+  imagesName: '[name]-[hash].[ext]',
+  optimizeImagesInDev: false,
+  mozjpeg: {
+    quality: 80
+  },
+  optipng: {
+    optimizationLevel: 3
+  },
+  pngquant: false,
+  gifsicle: {
+    interlaced: true,
+    optimizationLevel: 3
+  },
+  svgo: {
+    // enable/disable svgo plugins here
+  },
+  webp: {
+    preset: 'default',
+    quality: 75
+  }
+};
+
+const nextConfiguration = {
+  webpack: config => {
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        PC: JSON.stringify('pc')
+      })
+    );
+    return config;
+  },
+};
+
+module.exports = withPlugins([
+  [withStyles, sassConfig],
+  [optimizedImages, optimizedImagesConfig],
+], nextConfiguration);

package.json

@@ -8,8 +8,31 @@
     "start": "next start"
   },
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@webdeb/next-styles": "^1.1.1",
+    "@zeit/next-sass": "^1.0.1",
+    "autoprefixer": "^10.0.2",
+    "axios": "^0.18.0",
+    "concurrently": "^4.0.1",
+    "cors": "^2.8.5",
+    "express": "^4.16.4",
+    "imagemin-mozjpeg": "^9.0.0",
+    "moxios": "^0.4.0",
     "next": "10.0.1",
+    "next-compose-plugins": "^2.2.1",
+    "next-optimized-images": "^2.6.2",
+    "postcss-import": "^13.0.0",
+    "postcss-preset-env": "^6.7.0",
+    "prop-types": "15.7.2",
     "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "react-dom": "17.0.1",
+    "react-redux": "^5.1.1",
+    "redux": "^4.0.1",
+    "redux-thunk": "^2.3.0",
+    "sass": "^1.29.0",
+    "store2": "^2.12.0",
+    "tailwindcss": "^1.9.6",
+    "webpack": "^4.0.0"
   }
 }

pages/_app.js

@@ -1,7 +1,8 @@
-import '../styles/globals.css'
+import Root from '../src/Root';
+import '../styles/globals.scss';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
+  return <Root><Component {...pageProps} /></Root>;
+};
 
-export default MyApp
+export default MyApp;

pages/api/checkout.js

@@ -0,0 +1,12 @@
+import { isValidUser } from '../../src/constants/users';
+
+export default (req, res) => {
+  const userName = req.body['userName'];
+  if (isValidUser(userName)) {
+    res.statusCode = 200;
+    res.json({});
+  } else {    
+    res.statusCode = 422;
+    res.json({ });
+  }
+};

pages/api/hello.js

@@ -0,0 +1,48 @@
+import offersData from '../../src/constants/offers.json';
+
+export default (req, res) => {
+  const userName = req.query['userName'];
+  const latitude = parseInt(req.query['latitude'], 10);
+  const longitude = parseInt(req.query['longitude'], 10);
+  let city = '';
+
+  const citiesCoords = {
+    mumbai: {
+      lat: 19,
+      lon: 72
+    },
+    london: {
+      lat: 51,
+      lon: 0
+    },
+    "san francisco": {
+      lat: 37,
+      lon: 122
+    },
+    singapore: {
+      lat: 1,
+      lon: 103
+    },
+    sydney: {
+      lat: 33,
+      lon: 101
+    }
+  }
+  const citiesKeys = Object.keys(citiesCoords);
+  citiesKeys.forEach((cityName) => {
+    const cityCoords = citiesCoords[cityName];
+    const hasMatchingLat = latitude >= cityCoords.lat - 1 && latitude <= cityCoords.lat + 1;
+    const hasMatchingLon = longitude >= cityCoords.lon - 1 && longitude <= cityCoords.lon + 1;
+    if(hasMatchingLat && hasMatchingLon) {
+      city = cityName;
+    } 
+  });
+
+  if (city) {
+    res.statusCode = 200;
+    res.json({ offersData });
+  } else {
+    res.statusCode = 404;
+    res.json({ cityName: city });
+  }
+};

pages/api/offers.js

@@ -0,0 +1,15 @@
+import ordersData from '../../src/constants/orders.json';
+
+export default (req, res) => {
+  const userName = req.query['userName'];
+
+  // Set 5 product as fav
+  if (userName === 'existing_orders_user') {
+    const orders = ordersData.orders
+    res.statusCode = 200;
+    res.json({ orders });
+  } else {
+    res.statusCode = 404;
+    res.json({ message: 'No orders found' });
+  }
+};

pages/api/orders.js

@@ -0,0 +1,19 @@
+import productsData from '../../src/constants/products.json';
+
+export default (req, res) => {
+  const userName = req.query['userName'];
+
+  // Set 5 product as fav
+  if (userName === 'fav_user') {
+    const products = productsData.products;
+    const favProducts =  products.slice(0, 5).map((product) => product.isFav = true);
+    res.statusCode = 200;
+    res.json({ products: products.map(itm => ({
+      ...favProducts.find((item) => (item.id === itm.id) && item),
+      ...itm
+    }))});
+  } else {
+    res.statusCode = 200;
+    res.json(productsData);
+  }
+};

pages/api/products.js

@@ -0,0 +1,26 @@
+import { isValidUser, isValidPassword, isLockedUser } from '../../src/constants/users';
+
+export default (req, res) => {
+  const userName = req.body['userName'];
+  const password = req.body['password'];
+  if (isValidUser(userName) && isValidPassword(password)) {
+    res.statusCode = 200;
+    res.json({});
+  } else {
+    let errorMessage = '';
+    if (!isValidUser(userName)) {
+      errorMessage = 'Invalid Username';
+    } else if (!isValidPassword(password)) {
+      errorMessage = 'Invalid Password';
+    } else {
+      errorMessage = 'Something went wrong';
+    }
+
+    if (isLockedUser(userName)) {
+      errorMessage = 'Your account has been locked.'
+    }
+    
+    res.statusCode = 422;
+    res.json({ errorMessage });
+  }
+};