Complete Source Code Setup Guide

Install Node.js

Go to the official Node.js website and download the latest LTS (Long Term Support) version. Install it using the default installation options.

After installation, open Command Prompt (Windows) or Terminal (Mac) and verify the installation by running:

Then run:

If version numbers appear, Node.js and npm are installed correctly.

Install Visual Studio Code

Download and install Visual Studio Code (VS Code).

You will use VS Code as your primary editor to change branding, add configuration values, run the app locally, and prepare for deployment.

Create a GitHub Account

Create a free account at GitHub.com.

GitHub will be used to securely store your project repository and connect your code to your hosting provider.

Create a Vercel Account

Create a free account at Vercel.com.

Tip: For the easiest setup, sign in using the same GitHub account you created in Step 3. Vercel will be used to deploy your web application online.

Extract the ZIP File

Download your MonoCrafter source-code package using the private link provided to you after purchase. Right-click the ZIP file and choose Extract All. Choose a folder on your computer where you want to keep the project safely.

Open the Project in VS Code

Open VS Code. Go to the top menu and select:

File → Open Folder

Select the extracted MonoCrafter source-code folder. You should now see all project files listed in the VS Code Explorer panel on the left.

Prepare Your Brand Assets

Have the following ready: your new software name, logo (PNG or SVG), favicon, preferred brand colors, and domain name.

Replace the Logo

Inside VS Code, locate the project's public/ folder. Look for existing branding files such as logo.png, logo.svg, or favicon.ico.

Replace these with your own files. Important: Keep the exact same filenames to avoid breaking image links in the code.

Change the Browser Title

Locate and open index.html in the root folder. Find the page title tag:

Change it to your new product name and save the file (Ctrl+S or Cmd+S):

Replace the MonoCrafter Name

In VS Code, use the global search function:

• Windows: Ctrl + Shift + F
• Mac: Cmd + Shift + F

Search for MonoCrafter. Review each result and replace appropriate customer-facing references with your new product name.

Create Firebase Project

Go to console.firebase.google.com and sign in. Click Add Project. Enter a name (e.g., "PixelCraft-Studio"). You may disable Google Analytics if not needed. Complete the setup.

Create a Web App & Get Keys

Inside your new Firebase project dashboard, click the Web icon </> to register an app. Enter a nickname (e.g., "PixelCraft Web App") and click Register.

Firebase will display a code block containing your configuration keys (apiKey, projectId, etc.). Keep this page open.

Enable User Login

In the left sidebar of Firebase, open Build → Authentication. Click Get Started.

Open the Sign-in method tab, select Email/Password, enable it, and save. Your database can now accept user registrations.

Create the Environment File

Return to VS Code. Look for a file named .env.example. Duplicate this file and rename the copy to strictly .env (with the dot at the start).

Add Your Keys

Open the .env file. Enter the configuration values provided by Firebase into the matching fields after the equals sign.

Important: Use the exact variable names already provided. Do not rename variables.

Install Dependencies

Inside VS Code, open the terminal by selecting Terminal → New Terminal (or press Ctrl + `). Ensure it opens inside your project folder.

Run the following command to install all required packages:

Wait for the installation to finish completely.

Run the Development Server

Once installed, start the local server by running:

The terminal will display a local URL (e.g., http://localhost:5173). Ctrl+Click (or Cmd+Click) the URL to open your branded app in your browser.

Upload to GitHub

Go to GitHub and click New Repository. Name it (e.g., "pixelcraft-app") and set it to PRIVATE. Upload or push your local project files to this repository.

Ensure your .env file is excluded (via .gitignore) and not uploaded publicly.

Upload to GitHub

Go to GitHub and click New Repository. Name it (e.g., "pixelcraft-app") and set it to PRIVATE. Upload or push your local project files to this repository.

Ensure your .env file is excluded (via .gitignore) and not uploaded publicly.

Import to Vercel

Go to Vercel, sign in with GitHub. Click Add New → Project. Find your new private repository and click Import.

Add Environment Variables

Before hitting deploy, expand the Environment Variables section in Vercel.

Open your local .env file. Copy and paste each variable Name and Value into Vercel one by one. Do not paste the entire file into one field.

Deploy

Click Deploy. Vercel will install dependencies, build, and publish the app. Once finished, click the provided your-app.vercel.app link.

Test The Live Version

Do not assume it works simply because deployment succeeded. Create an account on the live URL, test image uploads, and check database saving. If it fails, check Vercel deployment logs and verify your Vercel Environment Variables.

Connect Your Custom Domain

Inside your Vercel project dashboard, go to Settings → Domains. Enter your custom domain (e.g., yourbrand.com).

Vercel will provide DNS records (A Record or CNAME). Add these records in your domain registrar's settings (e.g., GoDaddy, Namecheap). Once propagated, your app is fully live!