ColorPlay Doc

Item: ColorPlay - AI SaaS Coloring Book Web App
Version: v1.1
Author: AISaaSFarm
Last updated: 14 Dec 2024
Support: ColorPlay support
Installation service: Contact

Introduction

Welcome to the documentation for ColorPlay, an AI-powered SaaS coloring book web app. Developed with cutting-edge technologies like Laravel, React, and Tailwind.

This item includes two codebases, app (frontend) and web (backend) enabling you to build and deploy fully-responsive, cross-device and cross-browser compatible and scalable web app.

In this guide, you'll find step-by-step instructions on configuring the codebases and building the deployable. We've ensured the documentation is comprehensive yet easy to follow, with:

  • A clear, well-structured format to help you complete the setup and installation effortlessly.
  • Relevant links to resources for additional help,
  • Code snippets for better understanding and implementation, and
  • Screenshots to visually guide you through the process,

Let's get started on bringing your ColorPlay web app to life!

Thank you!

We sincerely appreciate your decision to purchase ColorPlay, our AI SaaS coloring book web app. Your support means the world to us, and we're thrilled to have you as part of our community.

We can't wait to see how you bring your ideas to life with ColorPlay. Happy creating!

Third-party APIs

  • Mail SMTP

    The Mail SMTP credentials are required to configure the mail service. The mail service is used for sending sign-up and access OTPs to users, including admins, to verify their identity for authentication. You can use your email service provider’s SMTP, such as:

    or dedicated SMTP API services like

  • Stripe

    The Stripe subscription and checkout APIs, along with the webhook, are used for processing subscription payments.

  • OpenAI

    OpenAI is using for generating color page line-art descriptions (GPT-4 model) and page line-art illustrations (DALL-E 3 model).

Dependency frameworks and packages

All the dependency packages we used are free for commercial use. Here is the list of major dependency packages we used to develop the project:

Prerequisites

To ensure a smooth and hassle-free setup and installation of the ColorPlay, please make sure you have the following requirements in place before you begin.

  • Text/code editor
  • Unix-like terminal (Bash, ZSH)
  • Node.js and NPM
  • Web server with
    • Unix-like terminal (Bash, ZSH)
    • Cron job scheduler
    • PHP >= 8.2
    • Composer
    • MySQL database
  • Domain pointed to your web server
  • Mail SMTP
  • Stripe live account
  • OpenAI account

File structure

ColorPlay includes 2 codebases, app (frontend) and web (backend). This code splitting is done for scalability of the item and hassle-free setup and deployment.

Folder structure

The source codes and their purposes are:

  • app: The app is developed with React and Tailwind. This is the frontend source code of the ColorPlay app.
  • web: The web is developed with Laravel. You can use this source code for the deployment.

Setup app

This instruction guide shows you how to set up the app, the frontend source code of the ColorPlay app.

Prerequisites

You should ensure you meets the following requirements in place before you begin.

  1. A text/code editor
  2. Unix-like terminal (Bash, ZSH)
  3. Node.js and NPM
  4. Domain name pointed to web server

Build app

  1. Open the app folder.
  2. Copy the .env.example file to .env. Since .env.example is a hidden file, make sure you can view hidden files if you can’t find it in the folder.
  3. Open the .env file and set the VITE_APP_URL value to your domain name.
  4. Install the app's dependency packages by running the following command:
  5. Build the app by running the following command. Once the command runs successfully, the app build will be created in the dist folder:
  6. Copy the dist folder to web/resources/dist folder.

Setup web

The web setup instructions guide you on how to configure the backend and deploy it to your web server.

Please make sure to set up the app by following the Setup app instructions before you begin.

Prerequisites

You should ensure you meets the following requirements in place before you begin.

  1. Web server
  2. Shell access to web server
  3. MySQL database
  4. Mail SMTP
  5. Web browser

Server requirements

ColorPlay has a few system requirements. You should ensure that your web server meets the following requirements:

  • PHP >= 8.2 with extensions
    • Ctype
    • cURL
    • DOM
    • Fileinfo
    • Filter
    • Hash
    • Mbstring
    • OpenSSL
    • PCRE
    • PDO
    • Session
    • Tokenizer
    • XML
  • Composer

Configure

  1. Open the web folder.
  2. Copy the .env.example file to .env and configure the following environment variables.
  3. Set the APP_URL value to your domain name.
  4. Set your MySQL database’s host, port, database name, username, and password to DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, and DB_PASSWORD, respectively.
  5. Set your mail SMTP server’s host, port, authentication username, password, encryption type, and the email from address to MAIL_HOST, MAIL_PORT, MAIL_USERNAME, MAIL_PASSWORD, MAIL_ENCRYPTION, and MAIL_FROM_ADDRESS, respectively.

Deploy

  1. Copy the web folder to your web server.
  2. Install dependencies using Composer by running the following command:
  3. Generate an app key by running the following command:
  4. Migrate the database by running the following command:
  5. Seed the initial settings into the database by running the following command:
  6. Make sure the web server's process owner has permission to write to bootstrap/cache and storage folders.
  7. Set the following cron job to run scheduled tasks after updating the path to the web folder.
  8. Set your web server’s root directory to web/public and the entry point to web/public/index.php.
  9. Set the following PHP configuration directives in your php.ini file:
  10. Open a browser and go to your domain to verify the deployment.

Setup admin

Once you set up the web and complete the deployment, you can start setting up the admin panel and move to production.

Prerequisites

You should ensure you meets the following requirements in place before you begin.

  1. OpenAI account
  2. Stripe live account

Setup

  1. Open a browser and go to yourdomain.com/admin/create to create the admin account. Enter your Name and Email, then click the Create admin button to create the admin account. Admin create page
  2. Check your email inbox or spam folder to find the verification email.
  3. Find the OTP in the email and enter it into the OTP field in the verification form. Then click Access account to sign in to the admin account. OTP verify page
  4. Go to Account in the admin panel and set up the app from App settings. Admin account page
    1. You can find your OpenAI API key or create one from OpenAI platform from API keys.
    2. You can find your Stripe live API secret key or create one from Stripe dashboard from API keys.
    3. You can find your Stripe live webhook signing secret or create one from Stripe dashboard from webhooks. Set the endpoint URL to http://yourdomain.com/api/stripe/webhook, the version to 2024-11-20.acacia, and select the invoice.paid and customer.subscription.deleted events.
  5. Go to Plans, edit each plan, and set the Stripe price ID. You don’t need to set a Stripe price ID for the free plan. You can find the Price ID in the Stripe dashboard under the Pricing section of the product in the Product Catalog. Plan edit page
  6. You can verify the app setup in the App setup status section under Account. If all the checks are completed, you are ready to move to production!

Admin panel

The admin panel is the super administrator's console for managing the ColorPlay app. From the admin panel, the admin can monitor the platform's performance, manage app settings, the website, plans, users, subscriptions, and color pages.

Admin panel

  • Dashboard

    From the Dashboard, the admin can monitor the performance of key metrics with counters and charts for the current week, the current month, and all-time.

  • Users

    In the Users, the admin can view all users. To block a user, the admin simply needs to click the pause icon. Once blocked, the user will no longer have access to their user panel. To unblock a user, the admin can click the play icon, which will restore the user's access to their panel.

  • Pages

    In the Pages section, the admin can view all the pages created by users. To block a page, the admin can click the pause icon. Once a page is blocked, it will no longer be displayed on Public pages or in the owner's My pages. However, all colored pages will remain unaffected. To unblock a page, the admin can click the play icon.

  • Colored pages

    The admin can view all the pages colored by users in the Colored pages.

  • Subscriptions

    The admin can view all user subscriptions, including active and canceled ones, in the Subscriptions.

  • Plans

    In the Plans section, the admin can update the plans, including basic details such as title, description, price, and Stripe price ID, as well as plan limits. The Stripe price ID is only required for paid plans and is not needed for the free plan.

  • Website

    The admin can update the landing page sections, as well as the privacy policy and terms of service pages, from the Website section.

  • Account

    • App setup status

      In the App setup status section under Account, the admin can see the status of the app setup. If everything is checked, the platform is ready for production.

    • Admin account

      From the Admin account, the admin can update the basic account details, including the name, photo, and email.

    • App settings

      The admin can update the basic app details and configure third-party APIs, OpenAI and Stripe from App settings.

User panel

The user panel is where the end users of the ColorPlay app can access and manage their accounts. To create an account, users can visit yourdomain.com/sign-up and simply provide their name and email address.

Once registered, they can sign in to their user panel using their registered email address at yourdomain.com/sign-in. During the sign-in process, users can verify their identity by entering the OTP sent to their registered email address.

User panel

After signing in, users can manage:

  • Create page: The user can create an AI-powered coloring page line-art illustration from Create page. They simply need to provide a prompt describing what they want to create. The user can also use the magic wand icon to generate a random prompt. Page create page
  • Public pages:
    • The user can find all the pages created on the platform, including those created by others, on the Public pages. They can click on any page and start coloring it if they have sufficient credits available in their plan.
    • The user can click on the heart icon to mark a page as a favorite. These favorited pages will be listed under their Favorite pages.
    • If a user owns a page, they have the ability to permanently delete it by clicking the trash icon. Once deleted, the page will no longer appear in the Public pages or My Pages. However, pages that have already been colored using the deleted page will remain unaffected.
  • Favorite pages: The user can manage all their favorited pages from the Favorite pages.
  • My pages: The user can manage all the pages they have created from the My pages.
  • Colored pages: The user can manage all the pages they have colored from the Colored pages.
  • Account:
    • From the Account section, the user can update their basic account details and manage their plan.
    • In the Plan section, they can find their current plan and available credits. The expiration information for the current plan will also be available here if they are on a paid plan. They will have the option to change plan and, if they are on a paid plan, the option to cancel plan.
    • Once a user clicks on Change plan, they will be directed to the Checkout page. From there, they can choose a paid plan and complete the payment via Stripe.
    • When a user cancels plan, the current subscription will be canceled, and their plan will be downgraded to the free plan.

Support

We believe in providing exceptional support to our valued users. While support is optional, we offer it for your convenience and to ensure you have the best possible experience with ColorPlay.

Our dedicated support team is here to assist you with any questions, concerns, or issues you may encounter while installing the app.

Please keep in mind that support is available for a limited time, typically for the duration specified in your purchase agreement.

To make the most of our support services, here's what you can do:

  • Check the documentation: Before reaching out to us, consult our comprehensive documentation. It often contains answers to common questions and step-by-step guides for various tasks.
  • Google it: Many issues can be resolved quickly through a simple Google search or by asking ChatGPT. You might find community forums, blog posts, or video tutorials that address common questions related.
  • Provide details: When reaching out for assistance, please provide as much detail as possible about your issue. This helps us diagnose and resolve problems more efficiently.
  • Response time: Our support team is committed to helping you promptly. Our standard support response time is 24 hours. You can expect a response from us within this timeframe.
  • Contacting support: To get support, please reach us via our CodeCanyon item support, ColorPlay support. We recommend using this official support channel to ensure a timely response.

Changelog