Init project

.env.example

@@ -0,0 +1,15 @@
+NEXT_PUBLIC_ENABLE_REDUX_DEV_TOOLS=
+NEXT_PUBLIC_AUTH0_CLIENT_ID=
+NEXT_PUBLIC_AUTH0_DOMAIN=
+NEXT_PUBLIC_AWS_COGNITO_IDENTITY_POOL_ID=
+NEXT_PUBLIC_AWS_COGNITO_REGION=
+NEXT_PUBLIC_AWS_PROJECT_REGION=
+NEXT_PUBLIC_AWS_USER_POOLS_ID=
+NEXT_PUBLIC_AWS_USER_POOLS_WEB_CLIENT_ID=
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_APP_ID=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_GTM_CONTAINER_ID=

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off",
+    "jsx-a11y/alt-text": "off",
+    "react/display-name": "off",
+    "react/no-children-prop": "off",
+    "react/jsx-max-props-per-line": [
+      1,
+      {
+        "maximum": 1
+      }
+    ]
+  }
+}

.gitattributes

@@ -0,0 +1 @@
+* text=lf

.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+.next
+
+# misc
+.DS_Store
+.eslintcache
+/.env
+/.env.local
+/.env.development.local
+/.env.test.local
+/.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

_docs/analytics-configuration.md

@@ -0,0 +1,32 @@
+---
+title: Analytics Configuration
+---
+
+# Configuration
+
+## Create GTM account
+
+In order to use the GTM platform, you need to create a GTM account. Read more about it
+[here](https://support.google.com/tagmanager/answer/6103696?hl=en#install&zippy=%2Cweb-pages).
+
+## Set up configuration options
+
+The app uses environment variables because it can be deployed with different accounts
+for `development`, `qa`, and `production`. This allows you to configure the GTM library differently
+for each environment.
+
+Open `.env` file (or create) in the project's root folder and set the
+variable `NEXT_PUBLIC_GTM_CONTAINER_ID` with the container ID provided by GTM platform.
+
+```shell
+NEXT_PUBLIC_GTM_CONTAINER_ID=GTM-XXXXXX
+```
+
+If you do not want to set up environment variables, settings can be applied simply on
+the `gtmConfig` object found in the `src/config.js` file.
+
+```js
+export const gtmConfig = {
+  containerId: ''
+};
+```

_docs/analytics-event-tracking.md

@@ -0,0 +1,66 @@
+---
+title: Event tracking
+---
+
+# Event tracking
+
+By default, the GTM library's push platform captures the browser location data, such as url,
+pathname, title, and other details. You can extend it to match your business needs. For example, you
+may need the event name, site section, campaign name, product name, price, process step, etc.
+
+## Page view
+
+```jsx
+// src/pages/login.js
+import { useEffect } from 'react';
+import { gtm } from '../lib/gtm';
+
+const Login = () => {
+  useEffect(() => {
+    gtm.push({event: 'page_view'});
+  }, []);
+
+  return (
+    <div>
+      content
+    </div>
+  );
+};
+```
+
+This example shows you how to track the page view event once the page component gets mounted. It can
+also be used on mounting virtual pages, such as modals, dialogs, etc.
+
+## Other action
+
+```jsx
+// src/pages/product.js
+import { gtm } from '../lib/gtm';
+
+const Product = () => {
+  const handleAddToCart = () => {
+    gtm.push({
+      event: 'add_to_cart',
+      price: '317,65',
+      currency: 'EUR',
+      name: 'Dell Monitor 27"'
+    });
+  };
+
+  return (
+    <div>
+      <div>Dell Monitor 27"</div>
+      <div>EUR 317,65</div>
+      <button onClick={handleAddToCart}>
+        Add to cart
+      </button>
+    </div>
+  );
+};
+```
+
+As it can be seen, this example has multiple variables to help you identify the product that was
+added to cart and its price. These are called conversion variables in most systems, and they are
+used to determine the user behaviour after visiting a specific page or site section. If the user
+does not complete the checkout process, you are able to identify most products added to the cart,
+and make decisions based on metrics.

_docs/analytics-introduction.md

@@ -0,0 +1,28 @@
+---
+title: Analytics Introduction
+---
+
+# Introduction
+
+For many companies is important to understand the user traffic, origin and behaviour. This may apply
+to your business, and you can find an example in the app.
+
+## Google Tag Manager (GTM)
+
+In previous versions the app used `Google Analytics` directly, but for this version it uses GTM.
+This enables a lot more control over the analytics implementation and also helps you display things
+like GDPR modal, various targeted content; control the data transfer, cookies and other aspects
+based on user data privacy preferences. Read more about GTM
+[here](https://support.google.com/tagmanager/answer/6102821?hl=en&ref_topic=3441530).
+
+## How GTM it works
+
+In order to use the `GTM platform` you set up a container, then you create a tag for each provider
+you need, for example, Google Analytics. Then, using the triggers, you control multiple tags based
+on data pushed to the data layer. The data pushed gets computed on the client (browser), and then
+the library determines which tags will be loaded.
+
+## How is it implemented
+
+The app uses a small singleton class to help with loading the `GTM library`, initialize it and track
+events via the GTM available methods.

_docs/auth-guard.md

@@ -0,0 +1,39 @@
+---
+title: Auth Guard
+---
+
+# Auth Guard
+
+This is a simple component that can be used to protect a private route. It controls whether it
+should allow navigation to a requested route based on given context. Similar to the GuestGuard,
+the app provides a `hoc` to prevent the entire page render.
+
+## Example
+
+```jsx
+// src/pages/dashboard/index.js
+import { withAuthGuard } from '../../hocs/with-auth-guard';
+
+const Overview = () => {
+  return (
+    <div>
+      content
+    </div>
+  );
+};
+
+export default withAuthGuard(Overview);
+```
+
+## How it works
+
+It connects with the authentication provider (Amplify, Auth0, Firebase, or JWT, depending on your
+setup) and extracts the required data to detect whether it should render the children passed as
+props, otherwise it redirects to the `Login` component with a redirect url query string parameter
+to allow the Login component to redirect back to the requested url after a successful 
+authentication.
+
+## How it can be extended
+
+As mentioned, this is a sample component, thus it can and should be adjusted to match your business
+needs.