Optio Blue

• Duel Deployment Links:
  • GH-Pages: https://daydin14.github.io/allenhurstcleaners_v2/
  • Netlify: https://allenhurstcleaners.netlify.app/

   GH-Pages deployment link is my DEVELOPMENT link for experimental features.
   Netlify deployment link is my PRODUCTION version.

Table of Contents

• Getting Started
• Features
• Technologies Used
• Google Integrations
• Screenshots
• Environment Variables
• Deployment on GitHub Pages

Getting Started

To get started with the project, follow these steps:

1. Fork the repository: Click the "Fork" button at the top right of this repository to create a copy of the repository in your GitHub account.
2. Clone the repository: Clone the forked repository to your local machine using the following command:

   git clone https://github.com/<your-username>/allenhurstcleaners_v2.git

3. Navigate to the project directory: Change into the project directory:

   cd optio-blue

4. Open with VS Code: Using the terminal, after you've changed directory into the project:

   code .
   //Daves Side Note: '.' is similar to saying, code "current directory"

5. Install dependencies: Install the required dependencies using npm:

   npm install || npm i

6. Start the development server: Start the development server to run the application locally:

   npm start

Features

• Single-Page Application: Built using React, providing a smooth and responsive user experience.
• Google Maps Integration: Utilizes the Google Maps API to display business information and location.
• Google Analytics Integration: Tracks and analyzes user interactions to provide insights into user behavior and application performance.
• Material UI: Styled using Material UI components for a modern and consistent design.

Technologies Used

IDEs/Editors

• VS Code: A powerful, lightweight code editor with built-in support for JavaScript, TypeScript, and Node.js.

Languages

• JavaScript (JS): The main programming language used for building the application.
• HTML: Used for structuring the web pages.
• CSS: Used for styling the web pages.
• Markdown (MD): Used for writing documentation.

Version Control

• Git: A distributed version control system for tracking changes in source code.
• GitHub: A web-based platform for version control and collaboration.

Frameworks, Platforms, and Libraries

• NPM: A package manager for JavaScript, used to install dependencies.
• React: A JavaScript library for building user interfaces.
• React Router: A library for routing in React applications.
• Google Maps API: Used to display maps and business information.
• Google Analytics Integration: Tracks and analyzes user interactions for beahvior insights and application performance.
• Material UI (MUI): A popular React UI framework for building responsive and visually appealing user interfaces.

Google Integrations

Google Maps API Platform Integration

The application integrates with the Google Maps API Platform to provide detailed information about the business location. This includes displaying the business address, phone number, hours of operation, and more. The Google Maps API is wrapped in Material UI components to ensure a seamless and visually appealing user experience.

For more information on the Google Maps API, visit the Google Maps API documentation.

• Google Maps APIs (Google Libraries) used within the application
  • places
  • maps
  • marker
  • embeded maps

Using @react-google-maps/api npm package [Version 2.19.3]

For more information on the Google Maps API NPM Package/Library, visit NPM Documentation

Google Analytics Integration

The application integrates with Google Analytics to track and analyze user interactions. This helps in understanding user behavior, measuring the effectiveness of marketing campaigns, and making data-driven decisions to improve the application. The integration is implemented using the react-ga4 library, which provides a simple interface for sending data to Google Analytics.

For more information on Google Analytics, visit Google Analytics documentation

Using @react-ga4 npm package [Version 2.1.0]

For more information on the Google Analytics NPM Package/Library, visit NPM Documentation

Screenshots

Environment Variables

Note there is configuration setup that needs to be done on Google Maps Platform Console to use the Google Maps API

   REACT_APP_GOOGLE_TAG_ID
   REACT_APP_GOOGLE_MAPS_API_KEY
   REACT_APP_GOOGLE_MAPS_MAP_ID
   REACT_APP_GOOGLE_MAPS_PLACE_ID

Deployment on GitHub Pages

This project uses the gh-pages node package to deploy the application to GitHub Pages. Follow these steps to deploy your application:

1. Install gh-pages: Install the gh-pages package as a development dependency:

   npm install gh-pages --save-dev

2. Update package.json: Add the following scripts to your package.json file:

   "scripts": {
       "predeploy": "npm run build",
       "deploy": "gh-pages -d build",
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject"
   }

3. Add homepage field: Add the homepage field to your package.json file with the URL of your GitHub Pages site:

   "homepage": "https://<your-username>.github.io/allenhurstcleaners_v2"

4. Deploy the application: Run the deploy script to build and deploy the application to GitHub Pages:

   npm run deploy