Hosting Web Setup Guide

The first step is to create an account on Gadohost.com. Gadohost provides optimized, high-performance cloud hosting suitable for deploying the Node.js API and web backend of SnapShop.

Once registered, navigate to the Billing section and select the Starter Premium plan (Plan 1) as a starting point. This plan includes support for up to 3 Node.js applications, 6 databases, free SSL certificates, and 20 GB of fast NVMe storage, which is perfectly sufficient for launching your SnapShop platform.

Select 'Starter Premium' plan on Gadohost Dashboard

Once you have selected your cloud hosting tier, we need to initialize a container for our Node.js server.

Follow these steps:

1. From the left sidebar navigation menu, click on Node.js apps (Indicated by arrow 1).
2. This will open your application dashboard. Click on the purple + Add New App button in the top right corner (Indicated by arrow 2) or in the center card area to begin configuring your new deployment.

Access Node.js Apps (1) and Click Add New App (2)

After clicking the + Add New App button, a configuration modal will appear to provision your new cloud app instance.

Configure the following settings carefully:

1. In the APP NAME field (Indicated by arrow 1), type the name of your application (e.g., SnapShop or production-v1). Spaces and dots will be converted to hyphens automatically.
2. Under DOMAIN STRATEGY, select CUSTOM DOMAIN.
3. In the DOMAIN ADDRESS field (Indicated by arrow 2), type your registered domain address (e.g., yourdomain.com).
4. Click the blue Deploy instance button at the bottom to start provisioning your server.

Enter App Name (1) and Domain Address (2) in configuration modal

As soon as you click the Deploy instance button, Gadohost will automatically start setting up a default node test page and installing default dependencies (indicated by the progress bar e.g. Processing dependencies... 39%).

You must stop this default process immediately:

1. Wait for the app card to appear on your dashboard.
2. Click the red Stop Instance button (Indicated by arrow 1). This prevents the server from building the default template, allowing us to upload our own clean SnapShop project files in the next steps.

Click 'Stop Instance' (1) to halt default template setup

After stopping the default app instance, we need to set up the MongoDB database for our SnapShop backend.

Follow these steps to access the database options:

1. On your stopped application card, click the purple Manage button (Indicated by arrow 1). This will expand a settings panel displaying various service controls.
2. From the expanded settings row, click on the purple MONGODB icon (Indicated by arrow 2). This will navigate you to the database setup interface where we will create our database credentials.

Click 'Manage' (1) and select the 'MONGODB' option (2)

Now, we will provision a new MongoDB database instance for storing SnapShop users, products, orders, and settings.

Follow these configuration steps carefully:

1. On the MongoDB databases page, click the purple + Add Database button in the top right corner of the background (Indicated by arrow 1). This will open the database creation modal.
2. In the USER field (Indicated by arrow 2), type the username for your database (e.g., yourusername or devsnaplix_test).
3. In the NAME field (Indicated by arrow 3), type the name of the database (e.g., yourdbname or devsnaplix_test). It is usually a good practice to keep the database name and user identical.
4. Next to the PASSWORD field, click the reload/generate icon (Indicated by arrow 4) to generate a secure database password. Make sure to copy and save this password somewhere safe! We will need it shortly to configure the MongoDB connection URI in our project environment file.
5. Finally, click the blue CREATE DATABASE button (Indicated by arrow 5) at the bottom to finalize and provision the database.

Add Database (1), fill User (2) & Name (3), generate Password (4), and Create Database (5)

Once the database is successfully created, it will appear in your Databases list. We need to copy its connection URI so that we can link our Node.js app to this database.

Follow these steps:

1. Locate your new database in the list and click the grey Copy URI button (Indicated by arrow 1). This will copy the MongoDB connection string to your clipboard. Save this string alongside your password, as we will use it to configure our environment variables.
2. After copying the URI, navigate back to your applications list by clicking on Node.js apps in the left sidebar menu (Indicated by arrow 2).

Click 'Copy URI' (1) and then click 'Node.js apps' in sidebar (2)

With our database created and stopped application instance ready, we can now access the server's files directory to upload the SnapShop backend code.

Follow these steps:

1. On the applications dashboard, click the purple Manage button on your app card (Indicated by arrow 1) to expand the settings menu.
2. Click on the purple FILES icon (Indicated by arrow 2) which is the first option in the row. This will open the Gadohost file manager for your Node.js application instance.

Click 'Manage' (1) and select the 'FILES' icon (2)

When you first open your application's file manager, you will notice a few default boilerplate files and folders (such as index.js, package.json, etc.). We need to delete these files to ensure a clean workspace before uploading our project files.

Follow these steps to clean the directory:

1. Check the Select All checkbox in the table header next to "IDENTITY" (Indicated by arrow 1). This will select all the default files in the folder.
2. With the files selected, a purple batch operation toolbar will appear. Click the red DELETE button in this toolbar (Indicated by arrow 2) and confirm the deletion.

Check 'Select All' (1) and click 'DELETE' (2) to clear default files

Now that our file manager is clean, we need to create a new environment variable file (.env) to hold our database credentials and configuration keys.

Follow these steps to initialize the file creation:

1. Click the blue + CREATE NEW button at the top right of the file manager header (Indicated by arrow 1). This will expand a dropdown menu.
2. From the dropdown menu, select New binary file (Indicated by arrow 2).

Click '+ CREATE NEW' (1) and select 'New binary file' (2)

After clicking New binary file, a modal will prompt you to enter the name of the new file.

Follow these steps to deploy the file:

1. In the LABEL text box (Indicated by arrow 1), type exactly: .env (make sure to include the leading dot).
2. Click the blue DEPLOY button (Indicated by arrow 2) to create the file in your server root directory.

Type '.env' in LABEL box (1) and click 'DEPLOY' (2)

Now that the .env file is created, you need to open it and configure the database connection.

Follow these steps to edit the file:

1. Click the three dots (...) on the right side of the .env file row (Indicated by arrow 1).
2. Select the Edit Code option from the dropdown menu (Indicated by arrow 2).

Click the three dots (1) and select 'Edit Code' (2)

Paste the following environment variables template inside the file editor:

DEMO_MODE=false
MONGODB_URI=
JWT_SECRET=
NEXT_PUBLIC_API_URL=

Follow these steps to configure and save:

1. Paste the copied template into the editor.
2. In the MONGODB_URI field (Indicated by arrow 1), paste the MongoDB Connection URI that you copied in Step 7.
3. In the JWT_SECRET field, type any long random text (e.g., my_super_secret_key_2026!). This is used to secure user sessions.
4. In the NEXT_PUBLIC_API_URL field, type your website's domain name without a trailing slash (e.g., https://yourdomain.com). If you don't have a domain yet, use your app's temporary Gadohost URL.
5. Click the blue Save File button in the top-right corner (Indicated by arrow 2) to save your configurations.

Paste variables & MongoDB connection string (1) and click 'Save File' (2)

Now, you need to upload the website project code archive to your Gadohost Cloud Storage.

Follow these steps to upload the file:

1. Click the grey UPLOAD button located at the top-right corner of the Cloud Storage interface (Indicated by arrow 1).
2. In the system file dialog that pops up, select the website zip package: SnapShop-WebSite-v1.0.2 (Indicated by arrow 2).
3. Click the Open button at the bottom of the file dialog (Indicated by arrow 3) to start uploading the archive.

Click 'UPLOAD' (1), select the website zip package (2), and click 'Open' (3)

Once the upload is complete, you need to extract the website code files into your server root directory.

Follow these steps to extract the archive:

1. Click the three dots (...) on the right side of the code.zip file row (Indicated by arrow 1).
2. Select the yellow Extract All option from the dropdown menu (Indicated by arrow 2).

Click the three dots (1) and select 'Extract All' (2)

To secure your application with HTTPS, you need to configure an SSL certificate for your domain.

Follow these steps to access SSL configuration:

1. Navigate to the Node.js apps section in the sidebar menu (Indicated by arrow 1).
2. On your app instance card, click the purple Manage button (Indicated by arrow 2) to open the control options.
3. Click the green SSL button in the bottom grid (Indicated by arrow 3) to start generating or installing your SSL certificate.

Select 'Node.js apps' (1), click 'Manage' (2), and click 'SSL' (3)

Before generating the free SSL certificate, you must ensure that your custom domain has been configured with the correct Gadohost name servers:

Follow these steps to generate your SSL certificate:

1. Locate your custom domain in the list (Indicated by arrow 1) and verify that it matches your app instance. Make sure the status badge shows yellow Pending (indicating the nameservers are pointed correctly).
2. Click the blue Generate SSL button on the right side of the domain card (Indicated by arrow 2) to request and apply your free Let's Encrypt SSL certificate.

Verify domain (1) and click 'Generate SSL' (2)

After setting up the environment variables and the SSL certificate, you need to restart the application instance to apply the changes.

Follow these steps to re-launch:

1. Go to the Node.js apps section in the sidebar menu (Indicated by arrow 1).
2. Click the blue Re-launch button on your app card (Indicated by arrow 2).
3. Wait about 5 minutes for the installation and build process to complete. You will see a progress bar indicating the status.

Select 'Node.js apps' (1) and click 'Re-launch' (2)

Once the build process is complete, the application status will change to indicate it is running successfully.

Follow these final steps:

1. Verify that the status badge at the top of the card shows green Ready (Indicated by arrow 1). Congratulations! The installation was successful.
2. Click the LIVE SITE PREVIEW link at the bottom of the card (Indicated by arrow 2) to open and test your live website immediately!

Confirm status 'Ready' (1) and click 'LIVE SITE PREVIEW' (2)

The first step in the wizard will verify your MongoDB connection string.

1. Click the Test MongoDB Connection button.
2. If the connection is successful, it will automatically move to the next step.

This step will create the required tables and insert the default translations.

1. Click the Install Database Tables button.
2. Wait for the tables and seeds to be installed securely.

Enter your website's general information.

1. Type your Website Name (e.g. SnapShop).
2. Type your Domain / Link.
3. Click Next Step.

Set up your master admin credentials.

1. Enter an Username, Email Address, and a Secure Password.
2. Click Complete Installation to finalize the setup.

Congratulations! Your website is fully configured.

1. Click Go to Admin Panel. You will be automatically logged in to your new dashboard!

To initialize Firebase services for your website, you must create a new project in the Google Firebase developer portal.

Follow these steps:

1. Navigate to the Firebase Console.
2. Click the card Get started with a Firebase project or Create a project (Indicated by the red highlight).

Access Firebase Console and click Create a project

Choose a name for your Firebase project to distinguish it in your developer dashboard.

Follow these steps:

1. In the Enter your project name field (Indicated by arrow), type your desired project name (e.g., SnapShop).
2. Check both checkboxes (Indicated by the red boxes) to accept the Firebase Terms and confirm your business use.
3. Click the Continue button at the bottom (Indicated by arrow).

Enter your project name, check terms, and click Continue

Configure Google Analytics settings for your project to track user interactions and metrics.

Follow these steps:

1. Verify your Analytics location (Indicated by the box).
2. Check the Google Analytics terms checkboxes at the bottom (Indicated by the box).
3. Click the Create project button (Indicated by arrow) to initiate the workspace provisioning.

Select location, accept terms, and click Create project

Proceed through the AI Assistance recommendations during the project initialization.

Follow these steps:

1. Review the optional AI assistance features in your Firebase project.
2. Click the blue Continue button at the bottom (Indicated by the box and arrow).

Click Continue to proceed to project creation

Wait for Firebase to finish provisioning resources for your new cloud project workspace.

Follow these steps:

1. Once you see the green success message Your Firebase project is ready, click the blue Continue button to enter your project console dashboard.

Click Continue once the project is successfully created

To link your live website domain with Firebase, you must create a Web application instance within your project settings dashboard.

Follow these steps:

1. On your Firebase project overview dashboard page, click the circular Web (</>) icon (Indicated by the red box and arrow) to register your new web client app.

Click the Web icon () to create a new Web project application

Assign an identifier name to your web application registration.

Follow these steps:

1. In the App nickname text field (Indicated by the red box), type a name for your web app configuration (e.g., SnapShop Web).
2. Click the blue Register app button (Indicated by the arrow).

Type your App nickname and click Register app

Firebase will generate a configuration keys object. This object connects your web pages to Firebase servers.

Follow these steps:

1. Locate the const firebaseConfig block inside the script tag (Indicated by the red box).
2. Copy this JavaScript config object block (from apiKey to measurementId).
3. Save this copied object safely in a local file on your machine, as we will paste these values into our website configuration panel.
4. Click the blue Continue to console button at the bottom.

Copy the firebaseConfig object details and save them locally

Configure project settings, keys, and security parameters in the management settings page.

Follow these steps:

1. Click the gear settings icon next to "Project Overview" in the left sidebar menu (Indicated by the red box and arrow).
2. Select Project settings from the menu options to load the settings dashboard.

Click the settings gear icon and go to Project Settings

Enable secure user login options (like Google, Facebook, etc.) inside the Authentication dashboard.

Follow these steps:

1. In the left sidebar menu under the "Build" category, click on Authentication (Indicated by the red box and arrow).

Select Authentication from Build sidebar menu

For Firebase authentication scripts to run securely on your custom domain name, you must authorize it in your project settings.

Follow these steps:

1. Go to the Settings tab in the Authentication dashboard.
2. Scroll down to Authorized domains.
3. Click the Add domain button.
4. Enter your custom domain address (e.g., yourdomain.com) (Indicated by the red box and arrow).
5. Click the blue Add button to save changes and authorize your website domain.

Authorize your website domain name in Authorized domains list

• Node.js: Version 18.x or higher is required.
• Database: MongoDB version 7.0+ (Local or MongoDB Atlas).
• Hosting Environment: A Node.js compatible environment is required. We recommend VPS hosting (like Gadohost or DigitalOcean), or platform-as-a-service like Vercel. Standard shared hosting without Node.js support will not work.

This platform integrates with several powerful third-party services. Please be aware that:

• AI Auto-Translations: Using OpenAI, Groq, or Google Gemini requires you to create your own individual accounts with those providers and provide your own API keys. These services may charge you based on your usage.
• Cloud Storage: Using AWS S3, DigitalOcean Spaces, GCS, or Backblaze requires your own accounts. Usage may incur extra costs from those providers.
• Payment Gateways: Stripe, PayPal, and Razorpay require you to register merchant accounts to process payments. Standard transaction fees apply from the respective payment processors.

SnapShop is designed to be easily brandable via the Admin Dashboard:

• Logos & Favicon: Navigate to `Admin Dashboard > Settings > General` to upload your own Logo and Favicon. This changes the branding globally across the storefront and admin panel.
• Colors & Themes: Navigate to `Admin Dashboard > Settings > Theme`. You can select from pre-built modern themes (Light, Dark, Glass, Nature, Midnight) and define a custom primary brand color.

For developers who wish to modify or extend the platform, here is a breakdown of the project architecture (built on Next.js 14 App Router):

• src/app/: Contains all Next.js pages and routes.
  • (storefront)/: Public customer-facing pages (Home, Product, Cart, Checkout).
  • admin/: Admin Dashboard interface.
  • api/: Backend API endpoints (e.g., /api/products, /api/orders, /api/settings).
• src/components/: Reusable UI React components.
• src/models/: Mongoose database schemas.
• src/lib/: Core utility functions, database connection logic, and authentication helpers.

Extending the Code: To add new API endpoints, create a new folder under src/app/api/ with a route.ts file. To add new database collections, define a schema in src/models/ and import it where needed.

We are committed to maintaining and improving SnapShop. All future updates will be provided for free to existing buyers. A detailed changelog will be included with every update package outlining new features, bug fixes, and security patches.