Main Website for PhotoEditor

• Last Modified: 2024-04-30
• Author: Phill Weston

Table of Contents

• Main Website for PhotoEditor
  • Table of Contents
  • Introduction
  • Features
  • How to configure the website
    • Required Environment Variables
    • WalletConnect API
  • Roadmap
  • Setting Up for Mail Subscription Service
  • Plugins
  • Expanding the ESLint configuration
  • License

Introduction

This is the main website for the PhotoEditor project. It is built using React and TypeScript.

Features

How to configure the website

Required Environment Variables

The following environment variables are required to run the website:

Note: The environment variables used for vite should be prefixed with VITE_.

Env Name	Ignorable	Description
VITE_WALLETCONNECT_PROJECT_ID	Essential	The WalletConnect project ID.
VITE_EMAIL_TOKEN	Essential	The EmailJS token.
VITE_EMAIL_SERVICE_ID	Essential	The EmailJS service ID.
VITE_EMAIL_TEMPLATE	Essential	The EmailJS template ID for subscription.
VITE_CONTACT_EMAIL_TEMPLATE	Essential	The EmailJS template ID for contact.
VITE_ACTIVE_NETWORK	Essential	The active network for the WalletConnect API.
VITE_AUTH_WEB_ADDRESS	Essential	The authentication web address for the website.

WalletConnect API

Refer to the Web3Modal SDK for React for more information.

Roadmap

• Add WalletConnect support and address display.
• Add activation code generation request and respond to the webpage.
• Add Email subscription service (using EmailJS and Postcard).
• Finish the documentation page.

Setting Up for Mail Subscription Service

Here is the detailed step about how to configure the backend mail server for GitHub Pages (or other web services that only support frontend pages).

1. Generate HTML Mail Template (Postcards)

   Postcards - Designmodo

   After editing the contents, export as a ZIP file with the images and HTML files together.

2. Domain Email Account Registration and SMTP Server Setting

   GoDaddy Webmail

3. Use EmailJS for Email Backend Service

   Basic Setting

   Send email directly from your code | EmailJS

   REST API Documentation

   /send API | EmailJS

   Note:

   • SMTP.js only supports elasticemail as its backend SMTP mail server, no third-party SMTP server is supported.

   • The limitation of the content body of EmailJS is no more than 50kb, be sure the size of the HTML file is less than the threshold.

   • We can use the following website to shrink the size of the HTML file by removing the unnecessary characters (like white space, etc)

     HTML Compressor - Reduce the size of HTML, CSS, JavaScript, PHP and Smarty code.

4. Backblaze B2 OBS Bucket for Image Storage

   We need to upload the images extracted from the downloaded ZIP file to the OBS bucket and replace all of the image paths from the relative path to the HTTPS path, which can be obtained through the detailed property of the file in the OBS bucket.

Plugins

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

• Configure the top-level parserOptions property like this:

  export default {
    // other rules...
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      project: ['./tsconfig.json', './tsconfig.node.json'],
      tsconfigRootDir: __dirname,
    },
  }

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked

• Optionally add plugin:@typescript-eslint/stylistic-type-checked

• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.