feat: create example app to live preview changes in kit and to use for running e2e tests

.eslintrc

@@ -2,7 +2,12 @@
     "root": true,
     "env": {
         "browser": true,
-        "node": true
+        "node": true,
+        "es6": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 2020,
+        "sourceType": "module"
     },
     "globals": {
         "mParticle": true,
@@ -26,5 +31,6 @@
         "no-useless-escape": "off",
         "no-unexpected-multiline": "off",
         "no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }]
-    }
+    },
+    "ignorePatterns": ["**/dist/**", "**/node_modules/**"]
 }

README.md

@@ -1 +1,62 @@
-# mparticle-javascript-integration-rokt
+# mParticle JavaScript Integration for Rokt
+
+This repository contains the mParticle JavaScript integration (kit) for Rokt.
+
+## Snippet Example
+
+A simple snippet example application is included in this repository to demonstrate the integration between mParticle and Rokt. The example shows how to:
+
+1. Initialize the mParticle Web SDK with the standard snippet
+2. Load and register the Rokt Kit
+3. Display the Rokt Layout when a button is clicked
+
+### Running the Example
+
+To run the example:
+
+1. Build the Rokt Kit:
+   ```
+   npm run build
+   ```
+
+2. Navigate to the example app directory:
+   ```
+   cd example-app
+   ```
+
+3. Install dependencies:
+   ```
+   npm install
+   ```
+
+4. Update the API key in `index.html` with your mParticle API key
+
+5. Start the server:
+   ```
+   npm start
+   ```
+
+6. Open your browser to http://localhost:3000
+
+## Development
+
+### Building the kit
+
+```
+npm install
+npm run build
+```
+
+### Testing
+
+```
+npm test
+```
+
+## Documentation
+
+Complete documentation for this integration can be found on the [mParticle docs site](https://docs.mparticle.com/).
+
+## License
+
+This project is licensed under the Apache 2.0 License - see the [LICENSE](LICENSE) file for details.

example-app/.env.example

@@ -0,0 +1,4 @@
+# Rokt mParticle API Key
+ROKT_API_KEY=your_api_key_here
+# Rokt Account ID
+ROKT_ACCOUNT_ID=your_account_id_here

example-app/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "extends": ["eslint:recommended"],
+  "rules": {
+    "no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }]
+  }
+}

example-app/.gitignore

@@ -0,0 +1,27 @@
+# Dependency directories
+node_modules/
+dist/
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# IDE files
+.vscode/
+.idea/
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

example-app/README.md

@@ -0,0 +1,82 @@
+# mParticle Rokt Kit Example App
+
+This is an example web application that demonstrates the integration of the mParticle Rokt Kit using webpack.
+
+## Setup
+
+1. Clone the repository
+2. Build the parent project first to create the Rokt Kit:
+```
+cd ..
+npm run build
+```
+3. Install dependencies in the example app:
+```
+cd example-app
+npm install
+```
+4. Set up your environment variables:
+```
+cp .env.example .env
+```
+5. Update the `.env` file with your actual Rokt API key and Account ID:
+```
+ROKT_API_KEY=your-api-key-here
+ROKT_ACCOUNT_ID=your-account-id-here
+```
+
+## Development
+
+To start the development server with hot-reloading:
+```
+npm start
+```
+
+This will open the application in your default browser at http://localhost:3000.
+
+## Building for Production
+
+To build the application for production (this will automatically build the parent project first):
+```
+npm run build
+```
+
+This will create a `dist` directory with the bundled application.
+
+## Project Structure
+
+- `src/` - Source code directory
+  - `index.html` - HTML template
+  - `index.js` - Main JavaScript file
+  - `styles.css` - CSS styles
+- `dist/` - Production build output (created after running build)
+- `.env` - Environment variables (not tracked in git)
+- `.env.example` - Example environment variables template
+- `.gitignore` - Git ignore configuration
+- `webpack.config.js` - Webpack configuration
+- `package.json` - Project dependencies and scripts
+- `../dist/Rokt-Kit.iife.js` - Rokt Kit integration from parent project
+
+## Environment Variables
+
+The application uses the following environment variables:
+
+- `ROKT_API_KEY`: Your mParticle API key for Rokt integration
+- `ROKT_ACCOUNT_ID`: Your Rokt Account ID used for configuring the Rokt kit
+
+These variables should be stored in a `.env` file that is not committed to version control.
+
+## Features
+
+- Webpack bundling for modern JavaScript development
+- CSS loading with style-loader and css-loader
+- Development server with hot reloading
+- Production build optimization
+- Integration with the parent project's Rokt Kit
+- Environment variable configuration for secure API key management
+
+## Using the Example App
+
+1. Click the "Fire Event" button to trigger a test event in mParticle
+2. Click the "Show Rokt Offer" button to display a Rokt placement
+3. Check the console output area at the bottom of the page for debug information