Building a SaaS application is one thing. Deploying it so others can actually use it is another challenge entirely. In the first episode of our "Vibecode Your SaaS" series, we built and deployed a complete Health Tracker application from scratch, covering everything from database setup to SSL certificate configuration.

This isn't a simple "hello world" - it's a full-stack application with persistent data storage, custom domain configuration, and production-ready security. Here's exactly what we built and how you can follow along.

What We Built

The Health Tracker is a web-based BMI (Body Mass Index) calculator with history tracking. Users can:

• Calculate BMI using metric (cm/kg) or imperial (inches/lbs) units
• View their BMI category (Underweight, Normal, Overweight, Obese)
• See a history of past calculations with timestamps
• Access color-coded visual feedback for each BMI category

The application uses a PHP backend with MySQL for data persistence, and a Tailwind CSS frontend for responsive design.

Technical Stack

Frontend:

• HTML5
• Tailwind CSS (via CDN)
• JavaScript for form handling and real-time calculations

Backend:

• PHP for server-side logic
• MySQL database with two tables: users and bmi_records
• Apache2 web server

Infrastructure:

• Custom domain (purchased from Namecheap)
• DNS configuration with A records
• SSL/HTTPS via Let's Encrypt
• Automated certificate renewal with Certbot

Step-by-Step Breakdown

1. Application Planning and Generation

The build started with a simple prompt to NonBioS: "I want to build a health tracker application starting with BMI tracking."

NonBioS generated a complete application plan including:

• Feature specifications (BMI calculator, history tracking, visual categories)
• Technical stack recommendations
• Database schema design
• File structure (5 files total)

2. Database Setup

NonBioS automatically created:

• MySQL database named health_tracker
• Database user health_user with appropriate permissions
• Two tables:
  • users table for user management
  • bmi_records table for storing BMI calculations with foreign key relationships

The schema includes timestamps for tracking when calculations were made, supporting both metric and imperial unit systems.

3. Application Deployment to Apache

The application was deployed to /var/www/html/health-tracker/ with proper file permissions set for the Apache web server. At this point, the application was accessible via the server's IP address  but not yet connected to a custom domain.

4. Custom Domain Configuration

Purchasing and Preparing the Domain

For this tutorial, we used a domain purchased from Namecheap.com (nonbios-health-tracker.xyz), but the process works with any domain registrar (GoDaddy, Google Domains, Cloudflare, etc.).

Key insight: Every domain registrar provides a DNS management dashboard where you configure how your domain resolves to IP addresses.

Initial DNS Configuration

The first step was creating an A record:

• Type: A Record
• Host: @ (or blank, representing the root domain)
• Value: [the NonBioS server IP]
• TTL: Automatic

This tells the DNS system: "When someone types nonbios-health-tracker.xyz, direct them to this IP address."

Apache Virtual Host Configuration

After configuring DNS, NonBioS automatically:

1. Created an Apache Virtual Host configuration file for the domain
2. Enabled the new site using a2ensite
3. Reloaded Apache to apply changes

The Virtual Host configuration maps the domain name to the application directory, allowing Apache to serve the correct application when requests come in for that specific domain.

5. DNS Troubleshooting with DNSChecker

Initial Problem

After the first DNS configuration, attempting to access the domain resulted in a DNS_PROBE_FINISHED_NXDOMAIN error - the domain wasn't resolving at all.

Using DNSChecker.org

DNSChecker.org is a free tool that queries DNS servers worldwide to check if your DNS changes have propagated. The initial check showed red crosses across all servers - the DNS records weren't being picked up globally.

Root Cause Analysis

Going back to the Namecheap DNS settings revealed the issue:

• A URL Redirect Record was configured, redirecting the root domain to www.nonbios-health-tracker.xyz
• However, there was no A record for the www subdomain
• This created a redirect loop to a non-existent destination, causing DNS resolution to fail completely

The Fix

Two changes were needed:

Change 1: Delete the URL Redirect Record

• This removed the problematic redirect

Change 2: Add a second A record for the www subdomain

• Type: A Record
• Host: www
• Value: [Server IP Address]
• TTL: Automatic

Now both nonbios-health-tracker.xyz and www.nonbios-health-tracker.xyz pointed directly to the server.

Understanding DNS Propagation

After making DNS changes, propagation can take anywhere from a few minutes to an hour (sometimes longer). This is because:

• DNS records are cached at multiple levels (ISPs, routers, browsers)
• Changes need to propagate through the global DNS infrastructure
• Different geographic regions may pick up changes at different times

Using DNSChecker.org, we could see the green checkmarks gradually appearing as more DNS servers worldwide picked up the new configuration.

Pro tip: Don't panic if your domain doesn't work immediately after DNS changes. Use DNSChecker.org to monitor progress rather than repeatedly testing in your browser.

6. SSL/HTTPS Configuration with Let's Encrypt

Once the domain was accessible via HTTP, the next step was adding SSL/HTTPS for secure connections.

What is Let's Encrypt?

Let's Encrypt is a free, automated, and open Certificate Authority that provides SSL/TLS certificates. It's become the standard for adding HTTPS to websites without paying for commercial certificates.

Certbot Installation and Configuration

NonBioS automated the entire SSL setup process using Certbot, the official Let's Encrypt client:

Step 1: Install Certbot and the Apache plugin

bash

apt-get update
apt-get install certbot python3-certbot-apache

Step 2: Obtain and install the SSL certificate

bash

certbot --apache -d nonbios-health-tracker.xyz -d www.nonbios-health-tracker.xyz

Behind the scenes, Certbot:

• Verified domain ownership through ACME challenge
• Communicated with Let's Encrypt's certificate authority
• Generated cryptographic keys
• Obtained the certificate (valid for 90 days)
• Installed the certificate in Apache
• Created an SSL-enabled Virtual Host configuration
• Set up automatic HTTP to HTTPS redirect

Step 3: Configure automatic renewalCertbot includes a systemd timer that automatically checks for certificate renewal. The certificate renews automatically before expiration, requiring no manual intervention.

SSL Configuration Results

The completed SSL setup included:

• Valid SSL certificate for both root and www subdomains
• TLS/SSL encryption for all traffic
• Automatic HTTP to HTTPS redirect (all HTTP requests automatically redirect to HTTPS)
• Certificate valid until 90 days from installation
• Auto-renewal configured with next check scheduled

7. Final Verification

The application was now accessible at:

• https://nonbios-health-tracker.xyz (primary URL)
• https://www.nonbios-health-tracker.xyz (www subdomain)
• Any HTTP requests automatically redirect to HTTPS

The browser displayed the green padlock icon, confirming:

• Valid SSL certificate
• Secure encrypted connection
• Certificate issued by Let's Encrypt

Key Takeaways and Best Practices

DNS Configuration Tips

1. Always add A records for both root (@) and www - Users may type either version of your domain
2. Remove conflicting records - URL redirects and CNAME records can interfere with A records
3. Use DNSChecker.org for troubleshooting - Don't rely solely on your browser, which may cache old DNS information
4. Be patient with propagation - DNS changes aren't instant; expect 15-60 minutes minimum
5. TTL matters for testing - Lower TTL values (like 60 seconds) allow faster testing of DNS changes

SSL/HTTPS Best Practices

1. Always use HTTPS for production applications - Modern browsers flag HTTP sites as "Not Secure"
2. Let's Encrypt is production-ready - It's not just for testing; major sites use Let's Encrypt certificates
3. Enable automatic renewal - Let's Encrypt certificates expire after 90 days; automation is essential
4. Redirect HTTP to HTTPS - Ensure all users get the secure version regardless of how they access your site
5. Test the certificate - Click the padlock icon to verify the certificate is valid and properly configured

Development Workflow Insights

1. Deploy early - Don't wait until your app is "perfect" to deploy; deploy the MVP and iterate
2. Real domains matter - Sharing https://your-app.com is infinitely better than "it's on my laptop"
3. Document as you build - The troubleshooting steps (like the DNS redirect issue) become valuable learning experiences
4. Use monitoring tools - DNSChecker.org, SSL checkers, and other tools help you validate configurations
5. Automate where possible - Tools like Certbot and NonBioS automate complex configurations

Tools and Resources Used

• Namecheap.com: Domain registrar (any registrar works - GoDaddy, Google Domains, Cloudflare, etc.)
• DNSChecker.org: Free DNS propagation checking tool
• Let's Encrypt: Free SSL/TLS certificate authority
• Certbot: Official Let's Encrypt client for Apache/Nginx
• Apache2: Web server (pre-configured in NonBioS environment)
• MySQL: Relational database for data persistence
• Tailwind CSS: Utility-first CSS framework via CDN

What's Next in the Series

This is just the foundation. In upcoming episodes, we'll progressively add features to transform this MVP into a full-featured SaaS application:

• User Authentication: Registration, login, and session management
• User Profiles: Personalized dashboards and settings
• Goal Setting: Allow users to set and track health goals
• Progress Tracking: Visualize BMI trends over time
• Data Visualization: Charts and graphs using Chart.js or similar libraries
• API Integrations: Connect with fitness trackers and health platforms
• Notification System: Email or push notifications for milestones
• Premium Features: Subscription tiers and payment processing
• Admin Dashboard: Management interface for monitoring users and data
• Social Features: Share progress, compare with friends

Each episode will be driven by community feedback - what features would you like to see added next ?

‍