First commit.

Author: ElementalEquityCode

.eslintrc.json

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

.gitattributes

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

.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+out
+.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.

_docs/authentication-amplify.md

@@ -0,0 +1,147 @@
+---
+title: Amplify
+---
+
+# Amplify
+
+AWS Amplify is a set of services accompanied by various tools and libraries created to help the
+development of apps. Their suite offers among other features, an authentication feature, which can
+be used as a stand-alone authentication system. The project is able to be used with this
+authentication system, as well. Should you want to implement any of the other features Amplify
+offers, you can refer to their [documentation](https://docs.amplify.aws/).
+
+## Set up your Amplify account
+
+The documentation for this, can be found in the official documentation of the service, mentioned
+above.
+
+## Configuration
+
+In order to configure Amplify client library you have to open (or create) `.env` file in the
+project's root folder and set the following variables as presented in your Amplify account settings:
+
+```shell
+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=
+```
+
+If you do not want to set up environment variables, settings can be applied simply on
+the `amplifyConfig` object found in the `src/config.js` file.
+
+```js
+export const amplifyConfig = {
+  aws_project_region: '',
+  aws_cognito_identity_pool_id: '',
+  aws_cognito_region: '',
+  aws_user_pools_id: '',
+  aws_user_pools_web_client_id: ''
+};
+```
+
+## How it was implemented
+
+As mentioned above, Amplify offers a set of components to help your development process, although
+they're not used in the app.
+
+The `Auth` singleton from the library is used to provide the authentication feature to a context (
+which wraps the content of the `App` component).
+
+This aforementioned context is then used in the component tree to access the `Auth` public methods.
+It provides the user authentication status and user profile, if available.
+
+## How to use Amplify Provider
+
+By default, the project uses a mocked `JWT provider` (as in: it doesn't use an actual JWT based
+authentication server). To make use of Amplify simply follow these steps:
+
+### Step 1. Replace the provider and consumer
+
+Open `src/pages/_app.js` file and replace the following line:
+
+```js
+import { AuthConsumer, AuthProvider } from '../contexts/jwt-context';
+```
+
+with
+
+```js
+import { AuthConsumer, AuthProvider } from '../contexts/amplify-context';
+```
+
+### Step 2. Replace the hook context
+
+Open `src/hooks/use-auth.js` file and replace the following line:
+
+```js
+import { AuthContext } from '../contexts/jwt-context';
+```
+
+with
+
+```js
+import { AuthContext } from '../contexts/amplify-context';
+```
+
+## How to use auth
+
+### Retrieve user profile
+
+In the example below, you can find how it can be used in any component not just the `App`. Should
+you want to use it in any other component, you'll have to import the `useAuth` hook and use it as
+needed.
+
+```jsx
+// src/pages/index.js
+import { useAuth } from '../hooks/use-auth';
+
+const Home = () => {
+  const { user } = useAuth();
+
+  return (
+    <div>
+      Email: {user.email}
+    </div>
+  );
+};
+```
+
+### Auth methods / actions
+
+> For simplicity and space limitations, the code below is used only to exemplify, actual code can be found in the components.
+
+```jsx
+// src/pages/index.js
+import { useAuth } from '../hooks/use-auth';
+
+const Home = () => {
+  const { login } = useAuth();
+  
+  const handleLogin = () => {
+    // Email/username and password
+    login('demo@devias.io', 'Password123!');
+  };
+
+  return (
+    <div>
+      <button onClick={handleLogin}>
+        Login
+      </button>
+    </div>
+  );
+};
+```
+
+## Implemented flows
+
+Currently, the app only covers the main flows:
+
+- Sign in
+- Sign up
+- Confirm sign up
+- Resend sign up
+- Forgot password
+- Forgot password submit
+- Logout